Alguns temas (e o CSS padrão do WooCommerce) especificam a largura da imagem do produto para garantir a consistência do layout em vários dispositivos. As dimensões que você especifica na guia “Catálogo” das configurações do WooCommerce afetam o tamanho das miniaturas que o tema utiliza quando exibe as imagens dos produtos. Ele não altera o tamanho da imagem, ela é renderizada.
Portanto, se as suas configurações não são adequadas (imagens muito pequenas) para o seu tema, você pode ver distorções nas imagens. Isso pode ser um pouco complicado, mas a imagem abaixo ajuda a explicar.
Para garantir que as imagens não fiquem distorcidas, certifique-se de que essas configurações estão apropriadas para seu tema.
Um exemplo prático
Com uma rápida demonstração iremos corrigir um problema hipotético de distorção. Mas antes de aprofundar, há uma ressalva: tenha certeza de que as imagem que você está fazendo upload estejam no tamanho adequado. Se elas não estiverem, este exercício não tem sentido. Qualquer tamanho acima de 800×800 deve ser apropriado para a maioria dos temas.
Tipos de Miniatura
Neste exemplo vamos usar os termos “Imagem do produto”, “Catálogo de imagens”, e “Imagem miniatura do produto”, como listado nas configurações de imagem. Estas miniaturas são usadas em vários locais:
- Imagem do produto – são as maiores miniaturas e são usadas na página de detalhes do produto.
- Catálogo de imagens – são miniaturas de tamanho médio e são usadas em todos os loops dos produtos. Por exemplo, categorias, produtos relacionados, “aumenta vendas”, “venda cruzada”, etc.
- Imagem miniatura do produto – são as menores miniaturas, utilizadas em galerias de produtos nas páginas individuais de produtos, no carrinho, e em widgets, como “produtos em destaque” e “produtos recentes”.
Descubra em qual tamanho seu tema utiliza as miniaturas
O primeiro passo para corrigir quaisquer imagens distorcidas é encontrar as dimensões que seu tema utiliza em cada tipo de miniatura.
Imagem do produto
Para fazer isso, encontre o lugar onde seu tema utiliza a miniatura maior. Na maioria dos casos será na página da Loja.
Se você estiver utilizando o Google Chrome, você pode simplesmente clicar com o botão direito do mouse sobre a imagem e clicar em “Inspecionar elemento”. Algo similar pode ser feito também com o Mozilla Firefox, usando o plugin “Firebug”. Isto irá te dar as dimensões.
Aqui podemos ver que as miniaturas do catálogo foram renderizadas no tamanho de 280x249px. Anote isto.
Catálogo de imagens
Repita o processo acima. Esta imagem será a imagem maior na página com os detalhes do produto.
Nete caso as miniaturas do catálogo foram renderizadas no tamanho de 280x257px. Este valor varia de tema para tema.
Imagem miniatura do produto
Repita o processo anterior para descobrir o tamanho renderizado da imagem. O lugar mais provável de localizá-la é na galeria do produto.
Neste caso, a imagem está no tamanho de 86x86px.
Introduza os dados e gere as miniaturas novamente
Agora que sabemos o tamanho que nosso tema está renderizando as miniaturas, podemos configurar no WooCommerce para ter certeza que todas as miniaturas criadas a partir de agora são do tamanho adequado. (Tamanho adequado significa ser igual ou maior do que as dimensões que acabamos de obter do tema).
Na guia Catálogo das configurações do WooCommerce, adicione as dimensões que você obteve acima e clique em “Salve as alterações”.
Quaisquer novas imagens enviadas agora terão as miniaturas de acordo com esta definição, e aparecerão sem distorção ou pixelização no site.
Salvar as alterações não atualiza automaticamente todas as imagens de produtos que já haviam sido enviadas previamente. Para atualizar as imagens antigas o WordPress precisa gerar novamente as miniaturas. Há um ótimo plugin que faz exatamente isso: “Regenerate Thumbnails”.
Suporte Retina
Uma nota para monitores de retina: Estas telas HiDPI contém o dobro de pixels que monitores padrão. Portanto, para imagens perfeitas em telas Retina, defina suas miniaturas para serem o dobro do tamanho que eles são renderizadas pelo tema. Então, se um tema renderiza as miniaturas em 80 × 80, você deve adicioná-las 160 × 160.
Tenha em mente que isso pode afetar o desempenho, imagens maiores, obviamente, levam mais tempo para carregar.
