Gallery

The Gallery block displays a set of images together as a grid or a masonry wall. Use it for production photos, a venue tour, a sponsor wall, or any page where several pictures belong side by side rather than one at a time.

Adding images

Choose where the pictures come from with Upload By:

• Manual (default): build the set yourself, adding each picture one at a time. For each one, pick or upload the Image, then set its Image Fit: Cover (default) fills the frame and crops the edges, while Contain shows the whole picture inside the frame.
• Folder: point the gallery at a folder in your media library and show everything in it. Pick the Folder to display every image in that folder in upload order, up to 60 images. Add or remove pictures by changing the folder's contents. You do not edit the gallery again.

Captions and credits

Two toggles control the text shown under each picture, both off by default:

• Show Caption: display the caption saved with each image.
• Show Credit: display the photographer or source credit saved with each image.

Captions and credits come from the image itself, so set them once in your media library and they carry across every gallery that uses the picture.

Layout styles

Switch between two styles at the top of the block:

• Grid (default): even rows and columns, with every picture in the same shape.
• Masonry: a staggered wall that keeps each picture's natural proportions, like a pinboard.

The Layout tab carries these layout options, shared by both styles:

• Columns: how many pictures sit across each row: 2, 3 (default), or 4.
• Gap: the space between pictures, from 0 to 64 px in steps of 4, defaulting to 16 px.
• Caption Size: the text size for captions and credits: Small (default) or P (paragraph / body text size).

Grid adds one more option on the same tab:

• Aspect Ratio: the crop shape for every picture: Portrait, Square (default), or Landscape. Masonry has no aspect ratio, since it preserves each picture's own shape.

Shared controls

The Gallery block uses the standard block controls for spacing and color.

• Layout controls: set the container width.
• Spacing and padding: adjust the padding (including horizontal spacing) and margin around the gallery.
• Colour scheme in blocks: set the color scheme for the caption and credit text.
• Analytics keys: tag the gallery for reporting.

Example

To build a self-updating photo grid for a Past productions page, keep the style on Grid, set Upload By to Folder, and choose a media-library folder named for the season. Set Columns to 4, leave Aspect Ratio on Square, and turn on Show Credit so each photographer is named. From then on, dropping new photos into that folder adds them to the page without touching the block again.

Where to go next