Champ Images

Le champ images stocke une collection d'actifs image geres.

Ideal pour

• galeries
• nuages de logos
• sections multi-images
• entrees de slider ou carrousel

Exemple de schema

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

Usage dans le template

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

Avec sortie sensible a la boucle :

<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>

Quand l'utiliser

Utilisez images lorsqu'une section a besoin de plusieurs visuels lies geres comme un ensemble.

Quand ne pas l'utiliser

N'utilisez pas images pour :

• un visuel principal unique
• des fichiers telechargeables
• des cartes repetees structurees ou chaque ligne a besoin de plus qu'une image

Utilisez plutot image, file ou repeater.

Notes techniques

• utilisez {{#each}} pour tout rendu multi-images
• gardez ce champ pour des collections d'images, pas pour des structures mixtes image plus copy
• si chaque element de galerie a besoin de son propre titre, CTA ou bloc descriptif, passez a repeater
• revoyez le volume de sortie afin qu'un seul component ne porte pas un ensemble media surdimensionne
• a l'interieur de {{#each gallery}}, les elements image exposent des helpers comme {{this.raw}}, {{this.webp}}, {{this.width(N)}} et {{this.description}}
• cette forme de helper orientee boucle est specifique aux champs images de Component ; les objets image de page ou list continuent generalement la chaine avec .url

Related

• Image
• Repeater
• Facet Template Syntax