图像字段

图像字段

The images field stores a collection of managed image assets.

最适合

  • 画廊
  • 徽标云
  • 多图部分
  • 滑动或轮播输入

架构示例

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

模板用法

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

支持循环的输出:

<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 images when one section needs several related visuals managed as a set.

何时不使用

以下情况不使用 images

  • 单个主视觉
  • 可下载文件
  • 需要每一行包含不止图像的结构化可重复卡片

请改用 imagefilerepeater

技术说明

  • 对所有多图渲染都使用 {{#each}}
  • 将此字段用于图像集合,而非图像与文案混合的行结构
  • 如果每个画廊项需要自己的标题、CTA 或描述块,请改用 repeater
  • 审查输出量,避免单个组件负责过大的媒体集合
  • {{#each gallery}} 内,图像项会暴露诸如 {{this.raw}}{{this.webp}}{{this.width(N)}}{{this.description}} 等帮助器
  • 这种面向循环的帮助器形式是组件 images 字段特有的;页面或列表的图像对象通常继续使用链式调用 .url

相关