图像字段
图像字段
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:
- 单个主视觉
- 可下载文件
- 需要每一行包含不止图像的结构化可重复卡片
请改用 image、file 或 repeater。
技术说明
- 对所有多图渲染都使用
{{#each}} - 将此字段用于图像集合,而非图像与文案混合的行结构
- 如果每个画廊项需要自己的标题、CTA 或描述块,请改用
repeater - 审查输出量,避免单个组件负责过大的媒体集合
- 在
{{#each gallery}}内,图像项会暴露诸如{{this.raw}}、{{this.webp}}、{{this.width(N)}}和{{this.description}}等帮助器 - 这种面向循环的帮助器形式是组件
images字段特有的;页面或列表的图像对象通常继续使用链式调用.url