Skip to main content

Guia de Inserção e Dimensionamento de Imagens

Melhores práticas para inserção de imagens e como contornar problemas de visualização e corte quando as imagens possuem proporções muito longas.

Método 1: Preparação Prévia da Imagem (Recomendado)

A forma mais segura e eficiente de garantir a exibição correta no portal é adequar as proporções da imagem antes de realizar o upload.

  • Utilize um editor de imagens (Photoshop, Canva, GIMP, etc.) para ajustar a largura e a altura.

  • Ao inserir a imagem já nas dimensões adequadas, o portal consegue renderizá-la nativamente, sem que a página desconfigure e sem a necessidade de intervenções manuais no código.

Dimensões e Proporções Recomendadas

Para garantir que a imagem se adapte perfeitamente ao portal sem quebrar o layout ou sofrer cortes, siga estas diretrizes ao exportar o arquivo no seu editor de imagens:

1. Largura da Imagem

  • A largura ideal para a área de conteúdo do portal varia entre 800px e 1200px.

  • Se a imagem tiver uma largura maior que essa, o Plone tentará espremê-la para caber na tela, o que pode distorcer a altura ou dificultar a leitura dos textos.

2. Proporção e Altura

  • Formatos recomendados: Dê preferência a formatos horizontais (paisagem, como 16:9 ou 4:3) ou quadrados (1:1).

  • Evite arquivos "fita": Imagens onde a altura é desproporcionalmente maior que a largura (exemplo: 800px de largura por 3000px de altura) causarão problemas de rolagem e cortes na renderização nativa. O ideal é que a altura não ultrapasse o dobro da largura (proporção máxima de 1:2).

3. Boas Práticas para Imagens Extensas ou Complexas Caso você precise publicar infográficos, diagramas muito compridos ou imagens que contenham muito texto pequeno, a inserção de uma imagem única e gigante pode gerar uma experiência de navegação ruim. Nestes casos, recomenda-se:

  • Divisão da imagem: Recorte a imagem original em partes menores (por tópicos ou seções) e insira essas partes em sequência na página.

  • Disponibilizar em PDF (Recomendado): Para arquivos que exigem leitura detalhada ou zoom por parte do usuário, insira apenas uma imagem ilustrativa (uma "capa" ou prévia) na página e adicione um link logo abaixo disponibilizando o documento completo em formato PDF. O PDF preserva a qualidade e a acessibilidade do conteúdo.

Método 2: Ajuste de Dimensionamento via Código-fonte HTML (Alternativa)

Se não for possível redimensionar o arquivo original e a imagem inserida ficar "cortada" ou com a visualização comprometida, o editor do portal poderá realizar um ajuste manual no código da página.

Siga o passo a passo:

  1. No painel de edição da página no Plone, insira a imagem normalmente.

  2. Na barra de ferramentas do editor de texto, selecione "text/x-web-textile" para alternar para editor de código.

    image.png

  3. No código HTML que será exibido, localize a tag correspondente à imagem que você acabou de inserir. Ela começará com <img.

  4. Dentro dessa tag, adicione o seguinte parâmetro de estilo: style="min-height: 1767px; object-position: top;".

    • Exemplo de como deve ficar: <img src="link-da-imagem.jpg" style="min-height: 1767px; object-position: top;" alt="Descrição">

  5. Atenção à altura: O valor 1767px é apenas um referencial. Dependendo da altura real do sua imagem, você precisará alterar esse número (aumentando ou diminuindo, ex: 1200px, 2000px) até que a imagem seja exibida por completo.

  6. Clique novamente no botão < > para sair do modo de código-fonte, salve a página e verifique como a imagem ficou na visualização final.

Back to top