Uma publicação de texto sem imagens obtém 2 a 3 vezes menos interação do que um artigo com conteúdo visual. As imagens quebram paredes de texto, mantêm a atenção e ajudam a explicar coisas difíceis de transmitir com palavras. Além disso, as imagens nos textos alternativos e nos nomes dos ficheiros trazem tráfego de pesquisa do Google Imagens, para um blogue técnico isso representa centenas de visitas extra por mês.

O editor Gutenberg (o editor de blocos no WordPress) trabalha com imagens sem um único plugin. Cinco blocos integrados cobrem todos os cenários básicos: desde uma única imagem a galerias e capas de ecrã inteiro com camadas de texto. Mas os principiantes ainda têm dúvidas: qual o bloco a escolher, como alinhar uma imagem para que o texto não se parta, como colocar duas imagens lado a lado ou porque precisaria de um filtro duotone.

Abaixo está uma análise passo a passo de cada bloco com definições que os guias curtos não mencionam. Sem plugins, apenas as ferramentas integradas do Gutenberg.

💡 Resumo rápido:

• Adicione uma única imagem com o bloco «Image» e configure o alinhamento através da barra de ferramentas, para uma imagem isso é suficiente
• Coloque uma imagem ao lado do texto com o bloco «Media & Text», ele mantém rigidamente as proporções, o texto não se sobrepõe
• Coloque duas ou mais imagens em linha com o bloco «Gallery» e especifique o número de colunas, a grelha alinha-se automaticamente
• Sobreponha texto a uma foto com o bloco «Cover» com filtros, sobreposição e efeito parallax opcional
• Ative a lightbox nas definições do bloco «Image», a imagem abre em ecrã inteiro sem recarregar a página

Quais os blocos Gutenberg que trabalham com imagens

O WordPress de raiz fornece cinco blocos relacionados com imagens. Cada um resolve a sua própria tarefa, não os deve confundir.

• Image (Image), uma única imagem com alinhamento, legenda, link, filtro duotone e definições de lightbox. O bloco de construção básico para qualquer publicação. Documentação
• Gallery (Gallery), uma grelha de várias imagens com definições de colunas. Substitui as galerias clássicas do editor antigo e o shortcode [gallery]. Documentação
• Media & Text (Media & Text), um bloco de duas colunas: imagem à esquerda (ou direita), texto ao lado. Uma ligação rígida sem desalinhamento quando a resolução muda. Documentação
• Cover (Cover), uma imagem de fundo com uma camada de texto e botões por cima. Pode configurar a sobreposição de cor, opacidade e fundo fixo. Documentação
• File (File), um link de download com um cartão. Para instruções em PDF e arquivos, não para exibir uma imagem na página.

Os primeiros quatro são o seu arsenal principal. O bloco «File» não é usado para ilustrar conteúdo, por isso vamos cobrir apenas os blocos visuais abaixo.

Como adicionar uma única imagem e configurar o alinhamento

O cenário mais comum: inserir uma imagem no texto e ajustar a sua posição em relação aos parágrafos.

Clique no botão «+» (adicionar bloco) na interface do editor e selecione «Image». Aparece uma janela de upload, pode arrastar um ficheiro do seu computador, selecionar da biblioteca de media do WordPress ou colar um URL. Após o upload, a imagem aparece imediatamente no editor e uma barra de ferramentas com botões de alinhamento surge acima dela.

Opções de alinhamento disponíveis:

• Alinhar à esquerda, a imagem é empurrada para a esquerda, o texto flui à direita
• Alinhar ao centro, imagem no centro, texto acima e abaixo
• Alinhar à direita, versão espelhada do alinhamento à esquerda
• Largura ampla, a imagem estende-se para além dos limites do bloco de texto, mas não a ecrã inteiro
• Largura total, a imagem estica-se de margem a margem da área de conteúdo

Os pontos azuis nos cantos da imagem permitem redimensionar arrastando, sem necessidade de calcular pixels em CSS. Na barra lateral direita (o separador «Block»), pode configurar o texto alternativo para SEO e um link que os utilizadores seguirão ao clicar na imagem.

Duas dicas que vão poupar tempo. Primeira: ative a lightbox (a opção «Enlarge on click» nas definições de link do bloco), quando clicada a imagem abre em ecrã inteiro, o utilizador não sai da página. Segunda: o filtro duotone (ícone de círculo na barra de ferramentas do bloco) altera o esquema de cores da imagem sem Photoshop, útil quando capturas de ecrã de fontes diferentes colidem visualmente. O filtro não altera o ficheiro de origem na biblioteca de media, pode sempre repô-lo.

Mas há um senão: «alinhar à esquerda» e «alinhar à direita» funcionam bem apenas quando o texto é suficientemente longo. Se o parágrafo for curto, a imagem «cai» fora do fluxo e o cabeçalho seguinte sobrepõe-se a ela. Nesses casos, é melhor usar o bloco «Media & Text».

Bloco «Media & Text»: imagem e parágrafo num só conjunto

O bloco Media & Text fixa rigidamente a proporção: metade da largura para a imagem, metade para o texto. Sem desalinhamento quando a resolução do ecrã muda.

Adicionado da mesma forma: botão «+», procure por «Media & Text». Selecione uma imagem e escreva o texto na coluna adjacente. Na barra lateral, estas opções estão disponíveis:

• Trocar de lugar (imagem à esquerda ou direita)
• Modo de ecrã inteiro (esticar para a largura total disponível)
• Cor de fundo para a metade do texto

O bloco é especialmente conveniente para instruções passo a passo: captura de ecrã de uma definição à esquerda, descrição do que está a acontecer à direita. O leitor não perde a ligação entre texto e imagem ao fazer scroll.

Na prática, o Media & Text ajuda também em situações mais prosaicas. Por exemplo, inseriu uma captura de ecrã com alinhamento à esquerda e o H2 seguinte «colidiu» com a imagem. É tarde demais para mudar a estrutura do parágrafo, envolva a imagem e o texto em Media & Text, o problema desaparece em 10 segundos.

Como colocar duas ou mais imagens lado a lado com o bloco de galeria

Se precisar de mostrar uma série de capturas de ecrã ou fazer uma coleção de fotos, use o bloco «Gallery». Ao contrário do antigo editor clássico onde a galeria vivia como um shortcode [gallery] separado, o Gutenberg gere-a visualmente.

Adicione o bloco «Gallery», carregue as imagens necessárias, elas organizam-se automaticamente numa grelha. Nas definições do bloco (painel direito), selecione o número de colunas: 2, 3, 4 ou mais. Para duas imagens lado a lado, defina «2 colunas», obterá uma linha organizada sem ajuste manual de tamanho.

Funcionalidades adicionais do bloco de galeria:

• Recorte de miniaturas, todas as imagens são trazidas para o mesmo tamanho, a grelha parece uniforme
• Configuração do espaçamento entre imagens
• Anexar um link a cada imagem separadamente

Se o projeto exigir um layout não padronizado (imagens de tamanhos diferentes numa grelha), as capacidades da galeria integrada podem não ser suficientes. Então o bloco «Columns» (Columns) vem em socorro, blocos «Image» separados são aninhados dentro dele com definições independentes. Mas para cenários típicos, as galerias de raiz são suficientes.

Nota: não confunda o bloco «Gallery» com vários blocos «Image» dispostos em colunas. A galeria recorta automaticamente as miniaturas, todas as imagens parecem ter a mesma altura independentemente das proporções originais. As colunas não fazem este ajuste: uma imagem acaba mais alta do que a outra e a linha «flutua». Para uma coleção rápida de fotos, use a galeria, para um layout pixel-perfect, use colunas.

Como sobrepor texto a uma imagem com o bloco «Cover»

O bloco «Cover» é uma imagem de fundo com uma camada de texto. Essencialmente, um banner dentro da publicação. Usado para formatar secções de artigos, citações ou conclusões-chave.

Selecione o bloco «Cover», carregue uma imagem e introduza o texto diretamente sobre ela. Na barra lateral, pode configurar:

• Cor de sobreposição, preenchimento semitransparente sobre a imagem, torna o texto legível em qualquer fundo
• Opacidade, intensidade da sobreposição de quase impercetível a quase sólida
• Fundo fixo, ao fazer scroll na página a imagem permanece no lugar (efeito parallax)
• Repetição do fundo, preencher o bloco com um padrão repetido, para texturas e ornamentos

O fundo fixo é uma técnica popular em landing pages e portfólios WordPress. Parece impressionante, mas em dispositivos móveis é frequentemente desativado pelo navegador por questões de desempenho. Não conte com ele como a técnica principal para telefones.

O bloco «Cover» aninha-se dentro de outros blocos: dentro de colunas, grupos ou linhas. E pode colocar não apenas texto na capa, mas também um botão: adicione um bloco «Buttons» dentro da capa e obtém um banner CTA pronto com fundo. Todas as ferramentas, sem CSS ou plugins adicionais.

Se a capa tornar o carregamento lento no móvel, desative o fundo fixo e comprima a imagem para 200-250 KB. O WordPress a partir da versão 5.8 converte automaticamente PNG e JPEG para WebP durante o upload, mas é melhor preparar a origem com antecedência através do TinyPNG ou conversão para AVIF.

⁉️🤔 Perguntas frequentes

Porque é que o texto «salta» e colide com blocos adjacentes depois de adicionar uma imagem?

Isto acontece quando a imagem está alinhada à esquerda ou à direita e há muito pouco texto à sua volta. O Gutenberg não «escora» automaticamente a altura do bloco sob a imagem, depende do volume de texto circundante. Solução: envolva a imagem e o texto num bloco «Media & Text», ele mantém rigidamente as proporções. Ou adicione mais 2-3 linhas de texto para que o fluxo funcione corretamente.

Como é que o bloco «Gallery» difere de vários blocos «Image» colocados em colunas?

A galeria fornece uma grelha unificada com recorte automático de miniaturas, todas as imagens parecem do mesmo tamanho independentemente das proporções originais. Colunas com imagens separadas não fazem este ajuste: uma imagem pode acabar mais alta do que a outra e a linha «flutua». Para uma coleção rápida de fotos, use a galeria, para um layout pixel-perfect preciso, use colunas.

Posso adicionar texto alternativo para várias imagens numa galeria de uma só vez?

Não, o bloco «Gallery» não suporta edição em massa de textos alternativos. Cada imagem na galeria é um ficheiro de media separado e o alt é definido individualmente: clique numa imagem específica na galeria, vá à barra lateral e preencha o campo «Alternative text». Ou escreva o alt antecipadamente na biblioteca de media do WordPress, assim ele será puxado automaticamente quando inserido.

O bloco «Cover» torna o carregamento da página lento no móvel. Como corrigir?

O fundo fixo (parallax) é o principal culpado. Desative a opção «Fixed background» nas definições do bloco e o navegador deixará de renderizar o efeito pesado durante o scroll. Segundo passo, comprima a imagem da capa para 200-250 KB: serviços como o TinyPNG ou a conversão para WebP/AVIF reduzem o tamanho sem perda visível de qualidade. O WordPress 5.8+ converte automaticamente PNG e JPEG para WebP durante o upload, mas é melhor preparar a origem com antecedência.

O bloco «File» faz sentido se eu só quiser mostrar uma imagem?

Não. O bloco «File» exibe um botão de download e o nome do ficheiro, não a imagem em si. É necessário para instruções em PDF, arquivos ZIP, ficheiros CSV e outros documentos que o utilizador deve guardar no seu dispositivo. Para mostrar uma imagem, use sempre o bloco «Image».

Como é que a lightbox do Gutenberg difere de plugins de lightbox como o FooBox ou Meow Lightbox?

A lightbox integrada (a opção «Enlarge on click» nas definições de link do bloco «Image») funciona sem código adicional e não entra em conflito com temas, apareceu no WordPress 6.4 no final de 2023. Os plugins fornecem mais definições: visualização de galeria com deslize, efeitos de escurecimento, contador de imagens. Se colocar 2-3 imagens por publicação, a integrada é suficiente. Para galerias de fotos e portfólios, instale um plugin.

Qual o bloco a usar para a sua tarefa: resumo curto

O Gutenberg cobre todos os cenários básicos de trabalho com imagens sem um único plugin. Insira uma única imagem com o bloco «Image» e não se esqueça do texto alternativo, esse é o seu principal ativo de SEO para o Google Imagens. Ative a lightbox: a funcionalidade é gratuita e os leitores móveis agradecer-lhe-ão.

Precisa de um conjunto rígido «imagem + texto», use «Media & Text», não se desfaz em nenhum ecrã. Série de imagens, «Gallery» com definições de colunas, o recorte automático alinhará tudo em linha. Texto sobre foto, «Cover» com sobreposição e parallax opcional, e pode adicionar um botão dentro para obter um banner CTA.

Dominar estes quatro blocos é realista em 10-15 minutos numa publicação de teste. Abra um rascunho, arraste os blocos pela tela, a interface do Gutenberg foi projetada para trabalho visual, não código. Se a próxima publicação sair com imagens em vez de uma parede de texto, já está à frente.