Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Statamic 3 field for displaying multiple images
<div class="size-{{ grid_size }} gap-4 grid | md:grid-cols-12 | xl:gap-6">
{{ assets:images }}
<figure class="| md:{{ grid_columns }}">
{{ responsive:url glide:width="1200" :ratio="image_ratio" }}
{{ if alt }}
<figcaption>{{ alt }}</figcaption>
{{ /if }}
</figure>
{{ /assets:images }}
</div>
title: Figures
fields:
-
handle: images
field:
mode: grid
container: assets
restrict: false
allow_uploads: true
max_files: 12
type: assets
localizable: false
listable: hidden
display: Images
-
handle: image_ratio
field:
placeholder: 'Select the image ratio'
options:
2/1: 'Landscape (2:1)'
3/2: 'Landscape (3:2)'
4/3: 'Landscape (4:3)'
16/9: 'Landscape (16:9)'
1/2: 'Portrait (1:2)'
2/3: 'Portrait (2:3)'
3/4: 'Portrait (3:4)'
9/16: 'Portrait (9:16)'
1/1: 'Square (1:1)'
clearable: true
multiple: false
searchable: false
taggable: false
push_tags: false
cast_booleans: false
type: select
localizable: false
listable: hidden
display: 'Image Ratio'
validate: required
-
handle: grid_columns
field:
placeholder: 'Images per row'
options:
col-span-12: '1 Column'
col-span-6: '2 Columns'
col-span-4: '3 Columns'
col-span-3: '4 Columns'
col-span-2: '6 Columns'
clearable: true
multiple: false
searchable: false
taggable: false
push_tags: false
cast_booleans: false
type: select
localizable: false
width: 50
listable: hidden
display: 'Grid Columns'
validate: required
-
handle: grid_size
field:
placeholder: 'Row size'
options:
sm: Tiny
md: Small
lg: Medium
xl: Large
full: Full
clearable: true
multiple: false
searchable: false
taggable: false
push_tags: false
cast_booleans: false
type: select
localizable: false
width: 50
listable: hidden
display: 'Grid Size'
validate: required
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment