Slowly
The builderBlocks

Gallery

Show a set of images in a masonry or grid layout.

The Gallery block lays out a set of images together, as a tidy grid or a masonry layout that fits pictures of different heights. Reach for it on portfolio pages, project showcases, or anywhere a collection of images benefits from a considered arrangement rather than a plain list.

Adding one

  1. Select the section or container to hold it.
  2. Open the inserter and search "gallery".
  3. Pick the Gallery block, then add your images in the settings panel.

Settings

In the gallery's own panel. Appearance lives in the shared design panel.

SettingWhat it doesReach for it when
SourceChooses between a static hand-picked set or a dynamic source (WordPress field, ACF group and field)Static for a curated set; dynamic when images come from post meta or a repeater
LayoutSwitches between grid (uniform cells) and masonry (variable heights that pack together)Masonry for photos of mixed proportions; grid for a consistent, structured look
ColumnsNumber of columns, set per breakpoint; defaults to 3 on large screensAdjust for narrow viewports or when images need more breathing room
HeightRow height for grid layout; defaults to 300pxTaller for landscape-heavy sets, shorter for thumbnails
Horizontal gutterGap between columns; defaults to 10Match the surrounding layout rhythm
Vertical gutterGap between rows; defaults to 10Match the surrounding layout rhythm
Thumbnail sizeWordPress image size to load (thumbnail, medium, large, full)Smaller sizes load faster; use full only when the gallery is the main content
Lazy loadDefers offscreen images until they scroll into viewAlmost always worth enabling on longer pages
FilterShows a row of category buttons above the gallery so visitors can narrow the setPortfolio pages, project archives, any gallery with multiple categories
Show "All" buttonAdds an "All" option to the filter barLeave on unless you want visitors to start with one category already selected
"All" labelCustom text for the "All" filter buttonWhen "All" needs a language-specific or brand-specific label
OverlayAdds a colour or gradient layer over each imageUseful when you show a title or description on top of the image
TitleShows a per-image title from the gallery dataPortfolio piece names, project titles
DescriptionShows a per-image description from the gallery dataA line of context below each title

Styling

The Gallery block uses the shared design panel for spacing, colour, borders, and effects. Image-level styling (radius, border, overlay colour, per-image opacity and filters) is also in the gallery panel rather than the design tab. For hover states on the images themselves, see states.

Accessibility

Each image in the gallery takes its own alt text, set when you add images to the gallery data. Fill it in for every image; a gallery full of empty alt attributes is invisible to screen readers and unhelpful to search. If an image is purely decorative and carries no meaning of its own, an empty alt is acceptable, but that is rarely true for a portfolio or project gallery where each image is the content.

If you enable the filter bar, the category buttons are interactive controls. Give each category a clear, descriptive label so visitors using a keyboard or assistive technology know what they are filtering to before they activate it.

On this page