Galería de imágenes: Ordenación, leyendas y reglas para móviles

Una galería de imágenes agrupa múltiples imágenes fijas relacionadas en una unidad editorial ordenada. La secuencia forma parte del significado: el lector debe entender por qué estas imágenes pertenecen juntas, qué aporta cada una y si pasar del elemento 1 al 2 representa tiempo, prioridad, punto de vista o un simple orden de navegación.

Este ejemplo usa una cuadrícula editorial porque las tres vistas son igualmente importantes y encajan sin ocultar ningún elemento. El orden pasa de la identificación a dos comprobaciones de estado. Las leyendas indican lo que demuestra cada vista; no se limitan a repetir «imagen del conector».

Por qué es importante este elemento

Las personas inspeccionan un conjunto de manera diferente a un montón. Un límite visible y una secuencia deliberada le indican al lector que las imágenes responden juntas a una pregunta más amplia. La visión general crea orientación, luego las imágenes de detalle reducen la incertidumbre. Esa progresión evita que el lector abra imágenes no relacionadas, recuerde sus posiciones y construya la relación por sí mismo.

La ordenación controla las expectativas. Un conjunto cronológico promete cambio; un conjunto de producto promete visión general, escala, características, variantes y estado. El orden del nombre de archivo o de subida puede hacer que pruebas importantes parezcan secundarias o implicar una narrativa que no existe.

La extraíbilidad automática es la capacidad del software de aislar la galería sin perder la relación entre sus imágenes. Una máquina puede identificar archivos de imagen separados, pero no puede inferir con seguridad si son alternativas, pasos, pruebas o decoración. Un título de galería, una lógica de ordenación declarada, posiciones estables de elementos, texto alternativo individual y leyendas visibles proporcionan esa relación en texto. Los mismos campos pueden alimentar la indexación de búsqueda, los inventarios de contenido, las comprobaciones de accesibilidad y los datos estructurados sin depender de la visión artificial.

Las reglas de redacción de elementos compartidas rigen la precedencia de elementos tipificados, las directivas portátiles y el mapeo del cuerpo. Esta página tiene prioridad para los límites de elementos, ordenación, leyendas y comportamiento móvil específicos de galerías de imágenes. No imites una galería con imágenes sueltas o un control deslizante genérico cuando el propósito de este elemento sea aplicable.

Cuándo usarlo

Usa una galería de imágenes cuando dos o más imágenes sean pares que respondan mejor juntas a una pregunta que por separado. Cada imagen debe aportar una vista, estado, etapa, detalle o ejemplo distinto. Los casos sólidos incluyen vistas de producto, pruebas de antes y después, una secuencia corta de proceso, orientación de ubicación, un portafolio de diseño o varios detalles que respalden una conclusión de reseña.

Aplica la prueba de eliminación a cada elemento. Si eliminar una imagen no cambia nada que el lector pueda decidir, verificar o entender, elimínala del conjunto. Una galería no es una superficie de almacenamiento para todos los recursos disponibles.

Los casos cercanos necesitan elementos diferentes:

• Usa una figura única o imagebox cuando una imagen transmita el punto y el texto lo interprete.
• Usa una captura de pantalla anotada cuando los lectores deban localizar varios controles dentro de una imagen de interfaz. No dividas una pantalla en una galería de recortes sin explicación.
• Usa una tabla comparativa cuando el lector deba comparar atributos repetidos entre muchas opciones. Las imágenes pueden respaldar la decisión, pero no pueden reemplazar los criterios textuales.
• Usa una lista de pasos cuando las acciones sean el contenido principal. Una galería puede mostrar estados resultantes, pero no debe convertir instrucciones necesarias en leyendas.
• Usa un carrusel de productos cuando cada tarjeta tenga precio, disponibilidad, valoración y una acción. Una galería contiene imágenes, no entidades comprables.
• Usa figuras separadas cuando las imágenes respalden secciones diferentes y no compartan una secuencia significativa.

Dónde colocarlo

Coloca la galería inmediatamente después del párrafo que plantea la pregunta que responderá el conjunto. Una galería de estado de producto sigue a la afirmación de estado; una secuencia de caso de estudio sigue a la intervención; una galería de ubicación sigue a la información de llegada.

Mantén el título de la galería, la introducción opcional, todos los elementos, leyendas, créditos y controles en un contenedor semántico. No insertes texto, anuncio, llamada a la acción ni salto de página entre elementos. Sigue la galería con la interpretación o la siguiente decisión cuando las leyendas no la transmitan completamente.

Una galería no puede colocarse directamente junto a otra galería, video, tabla grande, gráfico de ancho completo, imagebox ni llamada a la acción no relacionada. Añade texto explicativo entre unidades visuales densas o combina pares genuinos.

No pongas una galería dentro de un paso, elemento de lista, nota destacada, celda de tabla, acordeón, tarjeta cliqueable ni otra galería. Nunca separes una afirmación de su fuente ni una advertencia de la acción que limita. Reserva el primer viewport para la respuesta directa a menos que las imágenes sean la respuesta.

Anatomía

La anatomía es semántica. Las columnas de cuadrícula, tamaños de miniatura, sombras, radios de esquina y animaciones pertenecen al renderizador, no al modelo de contenido.

1. Contenedor de galería: Agrupa el título, la descripción, los elementos y los controles bajo un nombre accesible.
2. Título de galería: Indica el tema o la pregunta compartida en 3–10 palabras.
3. Introducción: Explica opcionalmente la secuencia o la tarea de inspección en una oración.
4. Elemento ordenado: Conserva el orden de origen estable independientemente de la distribución en escritorio.
5. Imagen: Usa un recurso existente con derechos autorizados, con ancho y alto intrínsecos.
6. Texto alternativo: Describe el propósito de esa imagen en el conjunto en lugar de copiar su leyenda.
7. Leyenda: Identifica la vista y explica su contribución distintiva.
8. Crédito: Proporciona información del creador, fuente o licencia cuando sea necesario.
9. Controles: Para una galería interactiva, botones visibles admiten entrada por puntero, teclado, interruptor y táctil.
10. Indicador de posición: Anuncia «2 de 5» en texto cuando algunos elementos están ocultos a la vista.
11. Orden en móvil: Coincide con el orden del DOM, la numeración, el orden del teclado y la narrativa prevista.

Ejemplos de diseño

Elige la variante menos interactiva que preserve la relación. Cada variante mantiene leyendas completas disponibles en texto y usa el mismo orden de origen en cada punto de interrupción.

Cuadrícula editorial

Usa una cuadrícula para 2–6 imágenes con igual peso que puedan aparecer juntas. El escritorio puede usar dos o tres columnas. El móvil se colapsa a una columna; nunca reduce tres imágenes a miniaturas ilegibles.

Tira secuencial

Usa una tira para 3–8 imágenes con una progresión cronológica o espacial explícita. En pantallas estrechas puede convertirse en una región desplazable horizontalmente solo cuando existan controles visibles, un indicador de posición, operación por teclado y una alternativa apilada sin JavaScript. Nunca hagas del deslizamiento el único medio de navegación.

Par de comparación

Usa exactamente dos imágenes para antes y después, original y revisado, o dos puntos de vista que deban juzgarse juntos. Usa etiquetas de texto persistentes, no solo color o posición. El móvil apila el elemento 1 antes del elemento 2 y repite las etiquetas junto a las imágenes.

Imagen principal con vistas de detalle

Usa esto para 3–12 vistas de producto o artefacto cuando una visión general ancle el conjunto y las imágenes restantes respondan preguntas de inspección distintas. Al seleccionar una miniatura se debe actualizar el texto alternativo, la leyenda, la posición y el estado anunciado de la imagen principal. Cada imagen sigue siendo accesible sin JavaScript.

Apilado predeterminado para móvil

Usa la lista apilada siempre que la interactividad no mejore materialmente la comprensión. Es el valor predeterminado para contenido editorial porque todos los elementos y leyendas permanecen visibles, enlazables, imprimibles y legibles sin gestos.

Parámetros

El contrato almacena el significado editorial y los metadatos de los recursos. Los tokens de diseño, anchos de columna, espacios, iconos de control, duración de transición y puntos de interrupción pertenecen al renderizador.

Las leyendas son obligatorias para evidencia, orden que cambia el significado, etiquetas de comparación e información de derechos visible. Un ángulo de producto puede omitir una solo cuando su texto alternativo y contexto distingan la vista. mobile=scroll es válido solo para strip o primary-details con los controles requeridos.

Sintaxis y ejemplos de código

Todos los mapeos conservan el mismo título, orden, campos de elemento y alternativa. La producción debe rechazar las rutas de ejemplo hasta que los archivos existan.

Directiva Markdown portátil

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Tres vistas que establecen el estado del producto

:::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. Vista general.** El conector completo establece forma, escala y orientación.
:::

:::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. Lengüeta de bloqueo.** La vista cercana confirma que el clip de retención está intacto.
:::
:::

El primer encabezado se convierte en title; el cuerpo de cada elemento se convierte en su leyenda. El orden de origen es canónico, por lo que el diseño de mampostería no puede reordenar elementos para llenar espacios.

Mapeo de shortcode de Hugo

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Tres vistas que establecen el estado del producto

{{< 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. Vista general.** El conector completo establece forma, escala y orientación.
{{< /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. Lengüeta de bloqueo.** La vista cercana confirma que el clip de retención está intacto.
{{< /gallery-item >}}
{{< /image-gallery >}}

Esta especificación de adaptador no es un shortcode registrado. Hasta su aprobación, usa figuras semánticas en orden de origen y no hagas referencia a recursos inexistentes.

Bloque de WordPress

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Tres vistas que establecen el estado del producto</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>Vista general.</strong> El conector completo establece forma, escala y orientación.</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>Lengüeta de bloqueo.</strong> La vista cercana confirma que el clip de retención está intacto.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

Una implementación de WordPress puede usar un bloque de Galería nativo solo si conserva el texto alternativo por elemento, las leyendas, las dimensiones intrínsecas, el orden de origen y el nombre de grupo accesible. Estilizar una secuencia de imágenes de fondo no cumple el contrato.

Ejemplos

Bueno: cada vista resuelve una incertidumbre diferente

Estado de equipo usado — orden de inspección

1. Unidad completa: Establece la identidad y muestra que la carcasa está completa.
2. Placa de serie: Confirma el modelo exacto y el voltaje nominal con enfoque legible.
3. Conector de alimentación: Muestra pines rectos y una lengüeta de bloqueo intacta.
4. Superficie de desgaste: Muestra el rayón visible más profundo junto a una regla para escala.

Esto sigue la lógica de inspección del comprador. Cada leyenda es verificable, la regla evita que un primer plano exagere el daño y la pila móvil preserva el orden.

Malo: un carrusel usado como vertedero de recursos

Nuestro último evento Doce fotografías de escenario casi idénticas, sin leyendas, avanzando automáticamente cada cuatro segundos. La navegación aparece solo al pasar el ratón. La versión móvil muestra un recorte central y solo acepta gestos de deslizamiento.

Ni la agrupación ni el orden tienen una razón. Doce nombres de archivo no transmiten nada a un lector de pantalla; el avance automático impide la inspección; los controles solo al pasar el ratón excluyen a usuarios de teclado y táctiles; la navegación solo por deslizamiento oculta el acceso; y el recorte puede eliminar el sujeto. Selecciona los pocos fotogramas que cuenten una historia definida, escribe alternativas y leyendas distintas, detén el movimiento automático y usa por defecto una pila móvil.

Marcado de esquema y accesibilidad

Una galería no obtiene automáticamente un tratamiento especial en la búsqueda. Marca solo las relaciones que la página visible y los recursos respalden. Las imágenes significativas pueden mapearse a ImageObject con contentUrl estable, leyenda, texto del creador o crédito, información de licencia y estado representativo cuando esos datos se conozcan. Una galería explícitamente ordenada puede mapearse a ItemList, usando valores de position que coincidan con el orden de origen. Las vistas de producto pueden poblar la propiedad Product.image del padre. No crees entidades para imágenes decorativas, inventes licencias ni afirmes que cada imagen es representativa.

Usa elementos <img> nativos dentro de elementos <figure> con <figcaption> visible cuando sea necesario. Nombra la sección a través de su encabezado. Preserva las relaciones ordenadas con <ol> o semántica de posición equivalente; la ubicación visual nunca anula el orden del DOM.

El texto alternativo describe el propósito de cada imagen en este conjunto. No debe comenzar con «imagen de», repetir la leyenda textualmente ni describir detalles irrelevantes para la decisión. Dos fotografías del mismo objeto requieren texto alternativo diferente porque cada una tiene un propósito distinto. Usa alt="" solo cuando una imagen sea verdaderamente redundante y eliminarla no eliminaría evidencia.

Las variantes interactivas necesitan botones nombrados de anterior y siguiente, activación por teclado, un indicador de posición textual y un anuncio de estado después de los cambios. El avance automático está prohibido. Mantén el foco en el control activado y preserva el contenido sin JavaScript, con zoom al 200 % y con movimiento reducido.

Reglas de redacción

Cada galería responde a una pregunta compartida. Indica por qué existe y luego ordena por narrativa, cronología, prioridad, punto de vista o comparación — nunca por orden de subida.

• Usa de 2 a 8 elementos para una galería normal; usa exactamente 2 para una comparación y de 3 a 12 para un conjunto principal de producto o detalle.
• Escribe títulos de 3 a 10 palabras e introducciones opcionales en una oración de 8 a 30 palabras.
• Mantén las leyendas entre 5 y 30 palabras. Comienza con la vista, estado o etiqueta del elemento cuando eso mejore el escaneo, luego explica su contribución.
• Usa estructura de leyenda paralela en todo el conjunto. Si la primera comienza con una etiqueta de estado, las demás también deberían hacerlo.
• Mantén el texto alternativo centrado en lo que un lector no vidente necesita de ese fotograma específico; apunta a 40–180 caracteres y nunca superes los 250.
• Mantén un tono fáctico y observacional. Di «el sello está al ras» en lugar de «el sello increíble se ve perfecto».
• Identifica tiempo, escala, recorte, estado y fuente siempre que limiten la interpretación.
• Usa las mismas condiciones de comparación cuando la apariencia sea evidencia: recorte, ángulo, escala, iluminación y tratamiento de color equivalentes.

Nunca pongas un encabezado, párrafo, tabla, lista de instrucciones, llamada a la acción, formulario, precio, valoración, testimonio, divulgación expandible, video, reproductor de audio ni tarjeta de producto dentro de una leyenda de elemento. Nunca conviertas leyendas en píxeles, hagas del color la única etiqueta, ocultes defectos materiales mediante recortes, expongas datos del cliente ni publiques una imagen sin derechos de uso confirmados.

Tipos de publicación que lo usan

Las filas siguientes reflejan el frontmatter de postTypes. La inclusión significa que el tipo de publicación puede usar una galería cuando las imágenes formen un conjunto real; no hace que el elemento sea obligatorio en cada página.

Lista de verificación de control de calidad

• El título plantea una pregunta o tema compartido, y cada imagen aporta una respuesta distinta.
• El número de elementos coincide con la variante seleccionada y no contiene fotogramas redundantes.
• orderedBy registra un orden defendible de narrativa, cronología, prioridad, punto de vista o comparación.
• El orden de origen, visual, teclado, lector de pantalla, numeración y móvil coinciden todos.
• Cada src resuelve a una imagen fija existente con derechos autorizados antes de la publicación.
• Cada imagen tiene ancho y alto intrínsecos, un valor alt intencionado y un recorte significativo.
• Las pruebas, comparaciones y elementos ordenados tienen leyendas visibles concisas con estructura paralela.
• Los créditos y enlaces de licencia son visibles y precisos donde se requieran.
• Las imágenes de comparación usan escala, ángulo, recorte, iluminación y etiquetas equivalentes a menos que se divulgue una diferencia.
• El móvil usa una alternativa apilada legible o controles accesibles completos; el deslizamiento nunca es la única entrada.
• Las variantes interactivas tienen botones visibles de anterior y siguiente, indicador de posición textual, soporte de teclado y sin avance automático.
• La galería funciona sin JavaScript y con zoom al 200 %, respeta el movimiento reducido y no crea desbordamiento horizontal de página.
• La primera imagen importante no se difiere, los estados de carga posteriores se anuncian y el espacio reservado evita el cambio de diseño.
• Ninguna instrucción, número, advertencia, etiqueta o conclusión esencial existe solo en píxeles.
• La galería no contiene video, tarjeta de producto, formulario, precio, valoración, testimonio ni llamada a la acción.
• Los datos estructurados coinciden con el orden visible, las leyendas, los derechos y las relaciones de entidad sin tratar la decoración como contenido.
• Los mapeos de Markdown portátil, Hugo y WordPress preservan los mismos campos, orden de elementos y significado.

Preguntas frecuentes

La plantilla de academia renderiza las cinco preguntas revisadas almacenadas en el frontmatter [[faq]] de esta página. Cubren el número de elementos, carruseles móviles, texto alternativo y leyendas, contenido mixto prohibido y datos estructurados.

El éxito significa que un lector puede explicar la relación entre las imágenes y la contribución de cada elemento. Sin un orden significativo, leyendas distintivas y una ruta accesible para móvil, el conjunto es una lista de recursos en lugar de una galería.