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, using the isThumbnail parameter, to allow users to view the images in a slideshow.

screenshot of an image gallery with 20 images

Pattern 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/?architecture",
        "https://source.unsplash.com/random/900x600/?architecture",
        "https://source.unsplash.com/random/1024x768/?architecture",
        "https://source.unsplash.com/random/1000x800/?architecture",
        "https://source.unsplash.com/random/920x650/?architecture",
        "https://source.unsplash.com/random/810x580/?architecture",
        "https://source.unsplash.com/random/820x590/?architecture",
        "https://source.unsplash.com/random/830x600/?architecture",
        "https://source.unsplash.com/random/840x610/?architecture",
        "https://source.unsplash.com/random/850x620/?architecture",
        "https://source.unsplash.com/random/860x630/?architecture",
        "https://source.unsplash.com/random/870x640/?architecture",
        "https://source.unsplash.com/random/900x500/?architecture",
        "https://source.unsplash.com/random/910x510/?architecture",
        "https://source.unsplash.com/random/920x520/?architecture",
        "https://source.unsplash.com/random/930x530/?architecture",
        "https://source.unsplash.com/random/940x600/?architecture",
        "https://source.unsplash.com/random/940x610/?architecture",
        "https://source.unsplash.com/random/940x620/?architecture",
        "https://source.unsplash.com/random/940x630/?architecture"
      },
      expression: a!webImage(
        source: fv!item
      )
    ),
    size: "GALLERY",
    isThumbnail: true
  )
}
Open in Github

On This Page

FEEDBACK