Images-veld

Het images veld slaat een verzameling beheerde beeldassets op.

Geschikt voor

• galerijen
• logo-wolken
• secties met meerdere afbeeldingen
• slider- of carrouselinvoer

Schemavoorbeeld

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

Gebruik in sjabloon

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

Met lus-bewuste uitvoer:

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

Gebruik het wanneer

Gebruik images wanneer één sectie meerdere gerelateerde visuals nodig heeft die als set worden beheerd.

Gebruik het niet wanneer

Gebruik images niet voor:

• één primair beeld
• downloadbare bestanden
• gestructureerde herhaalbare kaarten waarbij elke rij meer nodig heeft dan alleen een afbeelding

Gebruik in plaats daarvan image, file, of repeater.

Technische notities

• gebruik {{#each}} voor alle multi-image rendering
• houd het veld voor afbeeldingscollecties, niet voor gemengde image-plus-copy rijstructuren
• als elk galerijitem een eigen titel, CTA of beschrijvingsblok nodig heeft, stap over naar repeater
• controleer de uitvoeromvang zodat één component niet verantwoordelijk is voor een te grote mediaset
• binnen {{#each gallery}} exposen afbeeldingsitems helpers zoals {{this.raw}}, {{this.webp}}, {{this.width(N)}}, en {{this.description}}
• deze lus-georiënteerde helpervorm is specifiek voor Component images velden; pagina- of lijstafbeeldingsobjecten zetten de keten meestal voort met .url

Gerelateerd

• Afbeelding
• Repeater
• Facet Sjabloonsyntaxis