Galeria de Imagens: Ordem, Legendas e Regras para Dispositivos Móveis

Uma galeria de imagens agrupa múltiplas imagens estáticas relacionadas em uma unidade editorial ordenada. A sequência faz parte do significado: o leitor deve entender por que essas imagens pertencem umas às outras, o que cada uma contribui e se mover do item 1 ao item 2 representa tempo, prioridade, ponto de vista ou simples ordem de navegação.

Este exemplo usa uma grade editorial porque as três vistas são igualmente importantes e cabem sem ocultar nenhum item. A ordem vai da identificação para duas verificações de condição. As legendas indicam o que cada vista prova; elas não repetem meramente “imagem do conector”.

Por que este elemento é importante

As pessoas inspecionam um conjunto de forma diferente de uma pilha. Um limite visível e uma sequência deliberada dizem ao leitor que as imagens respondem juntas a uma pergunta maior. A visão geral cria orientação, e as imagens de detalhe reduzem a incerteza. Essa progressão evita que o leitor abra imagens não relacionadas, memorize suas posições e construa a relação sozinho.

A ordenação controla expectativas. Um conjunto cronológico promete mudança; um conjunto de produto promete visão geral, escala, características, variantes e condição. A ordem do nome do arquivo ou do upload pode fazer evidências importantes parecerem secundárias ou sugerir uma narrativa que não existe.

A extraibilidade por máquina é a capacidade do software de isolar a galeria sem perder a relação entre suas imagens. Uma máquina pode identificar arquivos de imagem separados, mas não pode inferir com segurança se são alternativas, etapas, evidências ou decoração. Um título de galeria, lógica de ordenação declarada, posições estáveis dos itens, texto alternativo individual e legendas visíveis fornecem essa relação em texto. Os mesmos campos podem alimentar indexação de busca, inventários de conteúdo, verificações de acessibilidade e dados estruturados sem depender de visão computacional.

As regras de escrita de elementos compartilhadas regem a precedência de elementos tipificados, diretivas portáteis e mapeamento de corpo. Esta página tem precedência para limites de itens, ordenação, legendas e comportamento móvel específicos de galeria de imagens. Não imite uma galeria com imagens soltas ou um slider genérico quando o propósito deste elemento se aplicar.

Quando usar

Use uma galeria de imagens quando duas ou mais imagens forem equivalentes que respondam a uma pergunta melhor juntas do que separadamente. Cada imagem deve adicionar uma vista, estado, estágio, detalhe ou exemplo distinto. Casos fortes incluem vistas de produto, evidências de antes e depois, uma sequência curta de processo, orientação de localização, portfólio de design ou vários detalhes apoiando uma conclusão de avaliação.

Aplique o teste de remoção a cada item. Se remover uma imagem não mudar nada que o leitor possa decidir, verificar ou entender, remova-a do conjunto. Uma galeria não é uma superfície de armazenamento para todo e qualquer recurso disponível.

Casos próximos precisam de elementos diferentes:

• Use uma figura única ou imagebox quando uma imagem carrega o ponto principal e o texto o interpreta.
• Use uma captura de tela anotada quando os leitores precisarem localizar vários controles dentro de uma imagem de interface. Não divida uma tela em uma galeria de recortes não explicados.
• Use uma tabela de comparação quando o leitor precisar comparar atributos repetidos entre muitas opções. Imagens podem apoiar a decisão, mas não podem substituir critérios textuais.
• Use uma lista de etapas quando ações forem o conteúdo principal. Uma galeria pode mostrar estados resultantes, mas não deve transformar instruções necessárias em legendas.
• Use um slider de produtos quando cada cartão tiver preço, disponibilidade, avaliação e uma ação. Uma galeria contém imagens, não entidades compráveis.
• Use figuras separadas quando as imagens apoiarem seções diferentes e não compartilharem uma sequência significativa.

Onde posicionar

Posicione a galeria imediatamente após o parágrafo que declara a pergunta que o conjunto responderá. Uma galeria de condição de produto segue a declaração de condição; uma sequência de estudo de caso segue a intervenção; uma galeria de localização segue as informações de chegada.

Mantenha o título da galeria, introdução opcional, todos os itens, legendas, créditos e controles em um único contêiner semântico. Não insira texto, anúncio, chamada para ação ou quebra de página entre os itens. Siga a galeria com a interpretação ou próxima decisão quando as legendas não a transportarem completamente.

Uma galeria não pode ficar diretamente ao lado de outra galeria, vídeo, tabela grande, gráfico de largura total, imagebox ou chamada para ação não relacionada. Adicione texto explicativo entre unidades visuais densas ou combine equivalentes genuínos.

Não coloque uma galeria dentro de uma etapa, item de lista, callout, célula de tabela, acordeão, cartão clicável ou outra galeria. Nunca separe uma afirmação de sua fonte ou um aviso da ação que ele limita. Reserve a primeira viewport para a resposta direta, a menos que as imagens sejam a resposta.

Anatomia

A anatomia é semântica. Colunas de grade, tamanhos de miniatura, sombras, raios de canto e animação pertencem ao renderizador, não ao modelo de conteúdo.

1. Contêiner da galeria: Agrupa o título, descrição, itens e controles sob um nome acessível.
2. Título da galeria: Declara o assunto ou pergunta compartilhada em 3 a 10 palavras.
3. Introdução: Opcionalmente explica a sequência ou tarefa de inspeção em uma frase.
4. Item ordenado: Preserva a ordem de origem estável independentemente do layout do desktop.
5. Imagem: Usa um recurso existente com direitos autorais liberados, com largura e altura intrínsecas.
6. Texto alternativo: Descreve o propósito daquela imagem no conjunto, em vez de copiar sua legenda.
7. Legenda: Identifica a vista e explica sua contribuição distinta.
8. Crédito: Fornece informações sobre criador, fonte ou licença quando necessário.
9. Controles: Para uma galeria interativa, botões visíveis suportam entrada por ponteiro, teclado, interruptor e toque.
10. Indicador de posição: Anuncia “2 de 5” em texto quando alguns itens estão ocultos da vista.
11. Ordem móvel: Corresponde à ordem DOM, numeração, ordem do teclado e à narrativa pretendida.

Exemplos de design

Escolha a variante menos interativa que preserve a relação. Cada variante mantém legendas completas disponíveis em texto e usa a mesma ordem de origem em todos os pontos de quebra.

Grade editorial

Use uma grade para 2 a 6 imagens de peso igual que podem aparecer juntas. O desktop pode usar duas ou três colunas. O celular é recolhido para uma coluna; nunca reduz três imagens a miniaturas ilegíveis.

Faixa sequencial

Use uma faixa para 3 a 8 imagens com uma progressão cronológica ou espacial explícita. Em telas estreitas, pode se tornar uma região de rolagem horizontal apenas quando existirem controles visíveis, um indicador de posição, operação por teclado e uma alternativa empilhada sem JavaScript. Nunca torne o deslize o único meio de navegação.

Par de comparação

Use exatamente duas imagens para antes e depois, original e revisado, ou dois pontos de vista que devem ser julgados juntos. Use rótulos de texto persistentes, não apenas cor ou posição. No celular, o item 1 é empilhado antes do item 2 e os rótulos são repetidos ao lado das imagens.

Imagem principal com vistas de detalhe

Use esta para 3 a 12 vistas de produto ou artefato quando uma visão geral ancora o conjunto e as imagens restantes respondem a perguntas de inspeção distintas. Selecionar uma miniatura deve atualizar o texto alternativo, legenda, posição e estado anunciado da imagem principal. Toda imagem permanece acessível sem JavaScript.

Padrão empilhado para celular

Use a lista empilhada sempre que a interatividade não melhorar materialmente a compreensão. É o padrão para conteúdo editorial porque todos os itens e legendas permanecem visíveis, linkáveis, imprimíveis e legíveis sem gestos.

Parâmetros

O contrato armazena significado editorial e metadados de ativos. Tokens de layout, larguras de coluna, espaçamentos, ícones de controle, duração de transição e pontos de quebra pertencem ao renderizador.

Legendas são obrigatórias para evidências, ordem que altera o significado, rótulos de comparação e informações de direitos visíveis. Um ângulo de produto pode omitir uma apenas quando seu texto alternativo e contexto distinguirem a vista. mobile=scroll é válido apenas para strip ou primary-details com os controles necessários.

Sintaxe e exemplos de código

Todos os mapeamentos preservam o mesmo título, ordem, campos de item e fallback. A produção deve rejeitar caminhos de exemplo até que os arquivos existam.

Diretiva Markdown portátil

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Three views that establish product condition

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width=1600 height=1200}
**1. Overview.** The complete connector establishes shape, scale, and orientation.
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width=1600 height=1200}
**2. Locking tab.** The close view confirms that the retention clip is intact.
:::
:::

O primeiro título torna-se title; o corpo de cada item torna-se sua legenda. A ordem de origem é canônica, portanto o masonry não pode reordenar itens para preencher lacunas.

Mapeamento de shortcode Hugo

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Three views that establish product condition

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width="1600" height="1200" >}}
**1. Overview.** The complete connector establishes shape, scale, and orientation.
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width="1600" height="1200" >}}
**2. Locking tab.** The close view confirms that the retention clip is intact.
{{< /gallery-item >}}
{{< /image-gallery >}}

Esta especificação de adaptador não é um shortcode registrado. Até a aprovação, use figuras semânticas na ordem de origem e não referencie ativos ausentes.

Bloco WordPress

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Three views that establish product condition</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward"><figcaption><strong>Overview.</strong> The complete connector establishes shape, scale, and orientation.</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Close view of the connector showing an intact raised locking tab with no visible crack"><figcaption><strong>Locking tab.</strong> The close view confirms that the retention clip is intact.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

Uma implementação WordPress pode usar um bloco Galeria nativo apenas se preservar o texto alternativo por item, legendas, dimensões intrínsecas, ordem de origem e o nome de grupo acessível. Estilizar uma sequência de imagens de fundo não atende ao contrato.

Exemplos

Bom: cada vista resolve uma incerteza diferente

Condição de equipamento usado — ordem de inspeção

1. Unidade completa: Estabelece identidade e mostra que o invólucro está intacto.
2. Placa de série: Confirma o modelo exato e a tensão nominal em foco legível.
3. Conector de alimentação: Mostra pinos retos e uma trava de retenção intacta.
4. Superfície de desgaste: Mostra o arranhão mais profundo visível ao lado de uma régua para escala.

Isso segue a lógica de inspeção do comprador. Cada legenda é verificável, a régua evita que um close-up exagere o dano, e a pilha móvel preserva a ordem.

Ruim: um carrossel usado como depósito de ativos

Nosso último evento Doze fotografias de palco quase idênticas, sem legendas, avançando automaticamente a cada quatro segundos. A navegação aparece apenas ao passar o mouse. A versão móvel mostra uma fatia central recortada e aceita apenas gestos de deslizar.

Nem o agrupamento nem a ordem têm uma razão. Doze nomes de arquivo não transmitem nada a um leitor de tela; o avanço automático impede a inspeção; controles visíveis apenas ao passar o mouse excluem usuários de teclado e toque; navegação apenas por deslize oculta o acesso; e o recorte pode remover o assunto. Selecione os poucos quadros que contam uma história definida, escreva alternativas e legendas distintas, pare o movimento automático e use o padrão de pilha móvel.

Marcação de esquema e acessibilidade

Uma galeria não ganha automaticamente tratamento especial de busca. Marque apenas relações que a página visível e os ativos suportem. Imagens significativas podem mapear para ImageObject com contentUrl estável, legenda, texto do criador ou crédito, informação de licença e status representativo quando esses fatos forem conhecidos. Uma galeria explicitamente ordenada pode mapear para ItemList, usando valores de position que correspondem à ordem de origem. Vistas de produto podem preencher a propriedade Product.image do pai. Não crie entidades para imagens decorativas, invente licenças ou afirme que toda imagem é representativa.

Use elementos <img> nativos dentro de elementos <figure> com <figcaption> visível quando necessário. Nomeie a seção através de seu título. Preserve relações ordenadas com <ol> ou semântica de posição equivalente; o posicionamento visual nunca substitui a ordem DOM.

O texto alternativo descreve o propósito de cada imagem neste conjunto. Não deve começar com “imagem de”, repetir a legenda literalmente ou descrever detalhes irrelevantes para a decisão. Duas fotografias do mesmo objeto exigem texto alternativo diferente porque cada uma tem um propósito diferente. Use alt="" apenas quando uma imagem é verdadeiramente redundante e removê-la não removeria evidência.

Variantes interativas precisam de botões nomeados de anterior e próximo, ativação por teclado, um indicador de posição em texto e um anúncio de estado após mudanças. O avanço automático é proibido. Mantenha o foco no controle ativado e preserve o conteúdo sem JavaScript, com zoom de 200% e com movimento reduzido.

Regras de escrita

Toda galeria responde a uma pergunta compartilhada. Declare por que ela existe, depois ordene por narrativa, cronologia, prioridade, ponto de vista ou comparação — nunca por ordem de upload.

• Use 2 a 8 itens para uma galeria normal; use exatamente 2 para uma comparação e 3 a 12 para um conjunto principal de produto/detalhe.
• Escreva títulos em 3 a 10 palavras e introduções opcionais em uma frase de 8 a 30 palavras.
• Mantenha as legendas entre 5 e 30 palavras. Comece com a vista, estado ou rótulo do item quando isso melhorar a leitura dinâmica, depois explique sua contribuição.
• Use estrutura de legenda paralela em todo o conjunto. Se a primeira começar com um rótulo de estado, as outras também devem.
• Mantenha o texto alternativo focado no que um leitor não visual precisa daquela imagem específica; mire em 40 a 180 caracteres e nunca exceda 250.
• Mantenha um tom factual e observacional. Diga “a vedação está rente” em vez de “a vedação incrível parece perfeita”.
• Identifique tempo, escala, recorte, estado e origem sempre que eles limitarem a interpretação.
• Use as mesmas condições de comparação quando a aparência for evidência: recorte, ângulo, escala, iluminação e tratamento de cor equivalentes.

Nunca coloque um título, parágrafo, tabela, lista de instruções, chamada para ação, formulário, preço, avaliação, depoimento, divulgação expansível, vídeo, player de áudio ou cartão de produto dentro de uma legenda de item. Nunca transforme legendas em pixels, torne a cor o único rótulo, oculte defeitos materiais através de recorte, exponha dados do cliente ou publique uma imagem sem direitos de uso confirmados.

Tipos de post que a utilizam

As linhas abaixo espelham o frontmatter postTypes. Inclusão significa que o tipo de post pode usar uma galeria quando as imagens formam um conjunto real; não torna o elemento obrigatório em toda página.

Checklist de QA

• O título declara uma pergunta ou assunto compartilhado, e cada imagem contribui com uma resposta distinta.
• A contagem de itens corresponde à variante selecionada e não contém quadro redundante.
• orderedBy registra uma ordem defensável de narrativa, cronologia, prioridade, ponto de vista ou comparação.
• As ordens de origem, visual, teclado, leitor de tela, numeração e móvel são todas correspondentes.
• Cada src resolve para uma imagem estática existente com direitos liberados antes da publicação.
• Cada imagem tem largura e altura intrínsecas, um valor alt intencional e um recorte significativo.
• Evidências, comparações e itens ordenados têm legendas visíveis concisas com estrutura paralela.
• Créditos e links de licença estão visíveis e precisos quando necessário.
• Imagens de comparação usam escala, ângulo, recorte, iluminação e rótulos equivalentes, a menos que uma diferença seja divulgada.
• O celular usa um fallback empilhado legível ou controles acessíveis completos; deslizar nunca é a única entrada.
• Variantes interativas têm botões visíveis de anterior e próximo, um indicador de posição em texto, suporte a teclado e nenhum avanço automático.
• A galeria funciona sem JavaScript e com zoom de 200%, respeita movimento reduzido e não cria estouro horizontal da página.
• A primeira imagem importante não é adiada, estados de carregamento posteriores são anunciados e espaço reservado evita mudança de layout.
• Nenhuma instrução, número, aviso, rótulo ou conclusão essencial existe apenas em pixels.
• A galeria não contém vídeo, cartão de produto, formulário, preço, avaliação, depoimento ou chamada para ação.
• Dados estruturados correspondem à ordem visível, legendas, direitos e relações de entidade sem tratar decoração como conteúdo.
• Mapeamentos Markdown portátil, Hugo e WordPress preservam os mesmos campos, ordem de itens e significado.

FAQ

O template da academia renderiza as cinco perguntas revisadas armazenadas no frontmatter [[faq]] desta página. Elas cobrem contagem de itens, carrosséis móveis, texto alternativo e legendas, conteúdo misto proibido e dados estruturados.

Sucesso significa que um leitor pode explicar a relação entre as imagens e a contribuição de cada item. Sem ordem significativa, legendas distintas e um caminho móvel acessível, o conjunto é uma lista de ativos, não uma galeria.