🇩🇪 Deutsch 🇺🇸 English 🇪🇸 Español 🇫🇷 Français 🇮🇹 Italiano 🇳🇱 Nederlands 🇵🇹 Português
🇩🇪 Deutsch 🇺🇸 English 🇪🇸 Español 🇫🇷 Français 🇮🇹 Italiano 🇳🇱 Nederlands 🇵🇹 Português

Campo `images`

Campo images

El images field almacena una colección de activos de imagen gestionados.

Ideal para

  • galerías
  • nubes de logotipos
  • secciones con varias imágenes
  • controles deslizantes o entradas de carrusel

Ejemplo de esquema

{ "name": "gallery", "label": "Gallery", "type": "images" }

Uso en plantilla

<div class="gallery">
  {{#each gallery}}
    <img src="{{this.width(800).webp}}" alt="{{this.description}}">
  {{/each}}
</div>

Con salida basada en el bucle:

<div class="gallery-grid">
  {{#each gallery}}
    <figure class="{{#if loop.first}}gallery-item-featured{{else}}gallery-item{{/if}}">
      <img src="{{this.width(1200).webp}}" alt="{{this.description}}">
    </figure>
  {{/each}}
</div>

Úsalo cuando

Usa images cuando una sección necesite varios elementos visuales relacionados gestionados como un conjunto.

No lo uses cuando

No uses images para:

  • un visual principal
  • archivos descargables
  • tarjetas repetibles estructuradas donde cada fila necesita más que solo una imagen

Usa image, file o repeater en su lugar.

Notas técnicas

  • usa {{#each}} para todo el renderizado de múltiples imágenes
  • mantén el campo para colecciones de imágenes, no para estructuras de filas mixtas de imagen más texto
  • si cada elemento de la galería necesita su propio título, CTA o bloque de descripción, pásate a repeater
  • revisa el volumen de salida para que un componente no sea responsable de un conjunto de medios demasiado grande
  • dentro de {{#each gallery}}, los elementos de imagen exponen helpers como {{this.raw}}, {{this.webp}}, {{this.width(N)}} y {{this.description}}
  • esta forma de helpers orientada al bucle es específica de los campos images de Componente; los objetos de imagen de página o lista normalmente continúan la cadena con .url

Relacionado