08 Galleries

Add multiple images in one section using a gallery. The gallery object sets the layout, and images[] contains the image list.

Galleries can be used in any section type (about, publications, research, education, contact). You can only use one gallery per section. To add multiple galleries or mix galleries with other media, use Groups.

You can't add images directly without the gallery wrapper.

Wrong — images outside gallery:

{
    "image": "img1.jpg",
    "images": [
        { "src": "img2.jpg" },
        { "src": "img3.jpg" }
    ]
}

Right — proper gallery structure:

{
    "gallery": {
        "layout": "grid",
        "ratio": "3x2",
        "cols": 3
    },
    "images": [
        { "src": "img1.jpg", "alt": "1" },
        { "src": "img2.jpg", "alt": "2" },
        { "src": "img3.jpg", "alt": "3" }
    ]
}

Grid Gallery

These are the available options for galleries:

FieldDescription
layout"grid" for uniform tiles, "masonry" for column flow
ratioAspect ratio like "3x2", "1x1", "16x9"
available ratios"1x1", "3x2", "2x3", "4x3", "3x4", "16x9", "9x16", "21x9", or any "WxH"
colsNumber of columns (max 3)
srcImage path (inside images[])
altAlt text (inside images[])
captionText below image (inside images[])
creditTop-right overlay label (inside images[])

Grid Gallery Use Cases

2 column grid

If no ratio is specified, the default is 16x9.

1
2
{
    "gallery": { "layout": "grid", "cols": 2 },
    "images": [
        { "src": "img1.jpg", "alt": "1" },
        { "src": "img2.jpg", "alt": "2" }
    ]
}

3 column grid

1
2
3
{
    "gallery": { "layout": "grid", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1" },
        { "src": "img2.jpg", "alt": "2" },
        { "src": "img3.jpg", "alt": "3" }
    ]
}

3 column grid with credits

Photo A
1
Photo B
2
Photo C
3
{
    "gallery": { "layout": "grid", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1", "credit": "Photo A" },
        { "src": "img2.jpg", "alt": "2", "credit": "Photo B" },
        { "src": "img3.jpg", "alt": "3", "credit": "Photo C" }
    ]
}

3 column grid with captions

1

Caption 1

2

Caption 2

3

Caption 3

{
    "gallery": { "layout": "grid", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1", "caption": "Caption 1" },
        { "src": "img2.jpg", "alt": "2", "caption": "Caption 2" },
        { "src": "img3.jpg", "alt": "3", "caption": "Caption 3" }
    ]
}

3 column grid with captions and credits

Credit 1
1

Caption 1

Credit 2
2

Caption 2

Credit 3
3

Caption 3

{
    "gallery": { "layout": "grid", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1", "caption": "Caption 1", "credit": "Credit 1" },
        { "src": "img2.jpg", "alt": "2", "caption": "Caption 2", "credit": "Credit 2" },
        { "src": "img3.jpg", "alt": "3", "caption": "Caption 3", "credit": "Credit 3" }
    ]
}

3 column 1x1 aspect ratio grid

1
2
3
{
    "gallery": { "layout": "grid", "ratio": "1x1", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1" },
        { "src": "img2.jpg", "alt": "2" },
        { "src": "img3.jpg", "alt": "3" }
    ]
}

3 column 16x9 aspect ratio grid

1
2
3
{
    "gallery": { "layout": "grid", "ratio": "16x9", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1" },
        { "src": "img2.jpg", "alt": "2" },
        { "src": "img3.jpg", "alt": "3" }
    ]
}

3 column 9x16 aspect ratio grid

1
2
3
{
    "gallery": { "layout": "grid", "ratio": "9x16", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1" },
        { "src": "img2.jpg", "alt": "2" },
        { "src": "img3.jpg", "alt": "3" }
    ]
}

Masonry Gallery Use Cases

3 column masonry grid

1 2 3 4 5 6 
{
    "gallery": { "layout": "masonry", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1" },
        { "src": "img2.jpg", "alt": "2" },
        { "src": "img3.jpg", "alt": "3" },
        { "src": "img4.jpg", "alt": "4" },
        { "src": "img5.jpg", "alt": "5" },
        { "src": "img6.jpg", "alt": "6" }
    ]
}

3 column masonry grid with captions

1

Caption 1

2

Caption 2

3

Caption 3

4

Caption 4

5

Caption 5

6

Caption 6

{
    "gallery": { "layout": "masonry", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1", "caption": "Caption 1" },
        { "src": "img2.jpg", "alt": "2", "caption": "Caption 2" },
        { "src": "img3.jpg", "alt": "3", "caption": "Caption 3" },
        { "src": "img4.jpg", "alt": "4", "caption": "Caption 4" },
        { "src": "img5.jpg", "alt": "5", "caption": "Caption 5" },
        { "src": "img6.jpg", "alt": "6", "caption": "Caption 6" }
    ]
}

3 column masonry grid with credits

Credit 11
Credit 22
Credit 33
Credit 44
Credit 55
Credit 66
{
    "gallery": { "layout": "masonry", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1", "credit": "Credit 1" },
        { "src": "img2.jpg", "alt": "2", "credit": "Credit 2" },
        { "src": "img3.jpg", "alt": "3", "credit": "Credit 3" },
        { "src": "img4.jpg", "alt": "4", "credit": "Credit 4" },
        { "src": "img5.jpg", "alt": "5", "credit": "Credit 5" },
        { "src": "img6.jpg", "alt": "6", "credit": "Credit 6" }
    ]
}

3 column masonry grid with captions and credits

Credit 11

Caption 1

Credit 22

Caption 2

Credit 33

Caption 3

Credit 44

Caption 4

Credit 55

Caption 5

Credit 66

Caption 6

{
    "gallery": { "layout": "masonry", "cols": 3 },
    "images": [
        { "src": "img1.jpg", "alt": "1", "caption": "Caption 1", "credit": "Credit 1" },
        { "src": "img2.jpg", "alt": "2", "caption": "Caption 2", "credit": "Credit 2" },
        { "src": "img3.jpg", "alt": "3", "caption": "Caption 3", "credit": "Credit 3" },
        { "src": "img4.jpg", "alt": "4", "caption": "Caption 4", "credit": "Credit 4" },
        { "src": "img5.jpg", "alt": "5", "caption": "Caption 5", "credit": "Credit 5" },
        { "src": "img6.jpg", "alt": "6", "caption": "Caption 6", "credit": "Credit 6" }
    ]
}
← BackNext →