Images Field

The images field stores a collection of managed image assets.

Best For

• galleries
• logo clouds
• multi-image sections
• slider or carousel inputs

Schema Example

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

Template Usage

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

With loop-aware output:

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

Use It When

Use images when one section needs several related visuals managed as a set.

Do Not Use It When

Do not use images for:

• one primary visual
• downloadable files
• structured repeatable cards where each row needs more than just an image

Use image, file, or repeater instead.

Technical Notes

• use {{#each}} for all multi-image rendering
• keep the field for image collections, not mixed image-plus-copy row structures
• if each gallery item needs its own title, CTA, or description block, move to repeater
• review output volume so one component is not responsible for an oversized media set
• inside {{#each gallery}}, image items expose helpers such as {{this.raw}}, {{this.webp}}, {{this.width(N)}}, and {{this.description}}
• this loop-oriented helper form is specific to Component images fields; page or list image objects usually continue the chain with .url

Related

• Image
• Repeater
• Facet Template Syntax