Campo `images`
Campo images
O campo images armazena uma coleção de ativos de imagem gerenciados.
Ideal para
- galerias
- nuvens de logos
- seções com múltiplas imagens
- sliders ou carrosséis
Exemplo de Esquema
{ "name": "gallery", "label": "Gallery", "type": "images" }Uso do Template
<div class="gallery">
{{#each gallery}}
<img src="{{this.width(800).webp}}" alt="{{this.description}}">
{{/each}}
</div>Com saída ciente do loop:
<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>Quando Usar
Use images quando uma seção precisar de vários visuais relacionados gerenciados como um conjunto.
Quando Não Usar
Não use images para:
- um único visual principal
- arquivos para download
- cartões estruturados e repetíveis onde cada linha precisa de mais do que apenas uma imagem
Use image, file ou repeater em vez disso.
Notas Técnicas
- Use
{{#each}}para toda renderização de múltiplas imagens - mantenha o campo para coleções de imagens, não para estruturas de linha mistas de imagem e texto
- se cada item da galeria precisar do seu próprio título, CTA ou bloco de descrição, migre para
repeater - revise o volume de saída para que um componente não seja responsável por um conjunto de mídia excessivamente grande
- dentro de
{{#each gallery}}, os itens de imagem expõem helpers como{{this.raw}},{{this.webp}},{{this.width(N)}}, e{{this.description}} - esta forma de helper orientada ao loop é específica para campos Component
images; objetos de imagem de página ou de lista geralmente continuam a cadeia com.url