Image Gallery

Use the "Gallery" size to display grouped collections of images. This setting generally results in a consistent height for displayed images (even if their aspect ratios differ) so that the group lines up evenly. Very wide images will be shown with a shorter height in order to constrain their overall size.

Specify the thumbnail behavior to allow users to view the images in a slideshow.

screenshot of an image gallery with 19 images

Example Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  a!imageField(
    labelPosition: "COLLAPSED",
    images: a!forEach(
      items: {
        "https://source.unsplash.com/random/800x600",
        "https://source.unsplash.com/random/900x600",
        "https://source.unsplash.com/random/1024x768",
        "https://source.unsplash.com/random/1000x800",
        "https://source.unsplash.com/random/920x650",
        "https://source.unsplash.com/random/810x580",
        "https://source.unsplash.com/random/820x590",
        "https://source.unsplash.com/random/830x600",
        "https://source.unsplash.com/random/840x610",
        "https://source.unsplash.com/random/850x620",
        "https://source.unsplash.com/random/860x630",
        "https://source.unsplash.com/random/870x640",
        "https://source.unsplash.com/random/900x500",
        "https://source.unsplash.com/random/910x510",
        "https://source.unsplash.com/random/920x520",
        "https://source.unsplash.com/random/930x530",
        "https://source.unsplash.com/random/940x600",
        "https://source.unsplash.com/random/940x610",
        "https://source.unsplash.com/random/940x620",
        "https://source.unsplash.com/random/940x630"
      },
      expression: a!webImage(
        source: fv!item
      )
    ),
    size: "GALLERY",
    isThumbnail: true
  )
}
Open in Github

On This Page

FEEDBACK