# 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.
    
    <table border="1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.8711%;"></col></colgroup><tbody><tr><td>[![image.png](https://manuais.ufcat.edu.br/uploads/images/gallery/2026-07/scaled-1680-/5V5image.png)](https://manuais.ufcat.edu.br/uploads/images/gallery/2026-07/5V5image.png)
    
    </td></tr></tbody></table>
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. Alterne o editor para o modo "text/html" para sair do modo de código-fonte, salve a página e verifique como a imagem ficou na visualização no portal.