Quando você muda para o novo editor de artigos, pode ver problemas com imagens e vídeos, como espaço extra, sem bordas ou vídeos que não são exibidos corretamente.
Este artigo abrange:
Solução de problemas com imagens
Adicionar bordas às imagens
O novo editor de artigos não oferece Support às bordas de imagens baseadas em tabela usadas no editor legado. Para adicionar bordas, use as opções de estilo de imagem ou aplique uma classe CSS personalizada às imagens.
Como adicionar bordas de imagem com uma classe CSS:
- Insira sua imagem no artigo
- Clique no botão HTML na barra de ferramentas para abrir o editor de código-fonte
- Encontre o elemento de
imgda sua imagem na origem. Adicione um nome de classe CSS, por exemplo,bordered-image. Definaclass="bordered-image"no elemento deimg. - Salvar suas alterações
- Certifique-se de que o CSS da central de ajuda inclua o estilo de borda. Por exemplo:
.bordered-image {
border: 1px solid #ccc;
border-radius: 4px;
}
- Insira sua imagem no artigo
- Clique no botão HTML na barra de ferramentas para abrir o editor de código-fonte
- Na origem, encontre o elemento de
imgpara a sua imagem. Localize o atributostyle=""ou adicione-o. -
Adicione os estilos de borda aqui, por exemplo:
border-radius: 8px; border: 10px solid black; -
O atributo
styledeve ter a aparênciastyle="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;" - Salvar suas alterações
Impedir distorção de imagem e gerenciar o tamanho da imagem
- Não redimensione as imagens no novo editor de artigos, a menos que você precise. Se você redimensionar uma imagem, altere apenas uma dimensão, largura ou altura, para manter a proporção de aspecto. O editor dimensionará a outra dimensão automaticamente.
- Use uma ferramenta externa, como Photoshop, GIMP ou um editor online, para redimensionar as imagens antes de carregá-las
- Use o botão Inserir imagem em vez de copiar e colar. Copiar e colar pode adicionar atributos HTML indesejados.
- Defina as imagens como 100% de largura por padrão:
- Depois de inserir uma imagem, selecione-a e use a barra de ferramentas da imagem para definir a largura como 100%
- Para uma solução global, adicione este CSS ao tema da central de ajuda:
.article-body img {
width: 100%;
height: auto;
}
- Se as imagens estiverem distorcidas nos e-mails de notificação:
- Remover atributos HTML de largura e altura da tag de
<img> - Use CSS para definir o tamanho, mas alguns clientes de e-mail removem os atributos CSS
- Para imagens coladas, certifique-se de que o editor remova os atributos HTML de largura e altura e use CSS para tamanho
- Remover atributos HTML de largura e altura da tag de
Dicas e correções adicionais
- Se você faz parte de um Programa de acesso antecipado, informe os artigos específicos e conceda acesso à conta para investigação
- Se você não gerencia o tema da central de ajuda, entre em contato com seu administrador ou desenvolvedor para solicitar alterações de CSS
- Teste as alterações em um ambiente de teste antes de aplicá-las ao uso
- Limpe o cache do navegador após alterar o CSS ou o tema para ver as últimas atualizações
- Para migrações em larga escala:
- Use ferramentas de desenvolvedor do navegador para encontrar tabelas de problemas e acelerar o processo de revisão
- Faça ajustes manuais em cada artigo afetado. Não há uma ferramenta de migração em massa ou correção.
Essas etapas resolvem a maioria dos problemas de exibição de imagem e vídeo após você mudar do editor legado para o novo editor de artigos. Eles ajudam você a manter uma aparência consistente e profissional nos artigos da central de ajuda.
Solução de problemas com vídeos
Se você mudar do editor legado para o novo editor de artigos, os vídeos incorporados podem aparecer de maneira diferente nos artigos da central de ajuda. Esta seção mostra como fazer com que os vídeos incorporados sejam exibidos corretamente, especialmente com códigos de inserção personalizados ou plataformas de vídeo não padrão.
Para exibir os vídeos incorporados corretamente:
- Ative a configuração Exibir conteúdo não seguro nas configurações de administração da central de ajuda
- Essa configuração permite que iframes e scripts sejam renderizados em artigos
- Se você tiver preocupações de segurança, consulte sua equipe de TI ou de segurança antes de ativar essa configuração porque ela tem implicações de segurança
Apenas códigos de inserção baseados em iframe são compatíveis com inserções de vídeo no novo editor de artigos. Outros métodos, como tags de script, links diretos ou tags de div personalizadas, não são suportados e não são renderizados no editor ou nos artigos publicados.
Você pode inserir um vídeo incorporado de duas maneiras:
- Clique em Inserir no artigo > Inserido na barra de ferramentas
- Cole um código de inserção do iframe diretamente no código-fonte do artigo
- Se seus artigos usaram incorporações que não são Iframe, atualize-os para usar códigos de incorporação baseados em iframe de seu provedor de vídeo
- Se você já usou iframes, ative a opção Exibir conteúdo não seguro para que eles sejam renderizados sem atualizar cada artigo
Ajustar o tamanho do vídeo
O novo editor de artigos pode definir os vídeos incorporados como 100% de largura por padrão. Para alterar o tamanho, use CSS, não atributos de largura HTML:
.article-body iframe {
width: 50% !important;
}
Se os vídeos forem exibidos como miniaturas pequenas ou não forem exibidos conforme o esperado:
- Confirme que a opção Exibir conteúdo não seguro está ativada
- Certifique-se de usar um código de inserção baseado em iframe
- Se o problema persistir, relate-o com detalhes do código de inserção e capturas de tela para seu contato de Support ou gerente de produto
Para obter mais informações, consulte Transição para o novo editor de artigos.
Aviso sobre a tradução: este artigo foi traduzido por um software de tradução automática para oferecer a você uma compreensão básica do conteúdo. Medidas razoáveis foram tomadas para fornecer uma tradução precisa, no entanto, a Zendesk não garante a precisão da tradução.
Em caso de dúvidas relacionadas à precisão das informações contidas no artigo traduzido, consulte a versão oficial do artigo em inglês.