Galleries

Image gallery with masonry support, configurable columns, gap control, and optional lightbox. It is shown in the block inserter as Canvas Gallery and registered as canvas-core/gallery.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Images

• ImagesDefaultEmpty

  The pictures in the gallery. Each row can override the gallery-wide settings for that one tile.

  Each row of Images takes:

  • ImageDefault0

    The picture this tile shows, and the one the lightbox opens.

  • Image URL (fallback when no attachment is set)DefaultEmpty

    Address of the picture, used when no image is chosen above.

  • Alt textDefaultEmpty

    Description of the picture for screen readers and for when it fails to load. It overrides the description stored in the media library.

  • Thumbnail Image (grid tile; defaults to the image itself)Default0

    A separate, usually smaller picture for the grid tile, so the lightbox can open a larger one.

  • Thumbnail URL (fallback when no thumbnail attachment is set)DefaultEmpty

    Address of the tile picture, used when no thumbnail image is chosen above.

  • Lightbox CaptionDefaultEmpty

    Caption shown with the picture in the lightbox.

  • Zoom EffectDefaultOff

    Grow this picture out of its tile as it opens. It applies to a tile that opens on its own, so set Lightbox Type below as well; a tile left on Gallery default follows the Zoom Effect in the Lightbox panel with the rest of the gallery.

  • Lightbox TypeDefaultEmpty

    How this tile opens. Gallery default keeps it part of the gallery; the other choices open it on its own, which is what a video or map tile needs.

    ChoicesGallery default (empty)Single ImageGallery ItemIframe (video / map)AJAXInline

  • Link URL (overrides the lightbox target)DefaultEmpty

    Send this tile to a page or file of your own instead of opening the picture.

  • Extra Tile ClassesDefaultEmpty

    Extra classes on this tile.

  • Extra Inner ClassesDefaultEmpty

    Classes on the inner wrapper of this tile, used instead of the gallery-wide value.

  • Image ClassesDefaultEmpty

    Extra classes on this picture.

  • Overlay Icon (overrides the gallery icon)DefaultEmpty

    Icon for the hover panel on this tile, used instead of the gallery-wide icon.

  • Overlay Icon Chip ClassesDefaultEmpty

    Classes on the chip around this tile icon, used instead of the gallery-wide value.

  • Chip Hover AnimationDefaultEmpty

    Animation this tile icon chip plays as the pointer enters, for example fadeIn.

  • Chip Hover Animation (out)DefaultEmpty

    Animation this tile icon chip plays as the pointer leaves, for example fadeOut.

  • Overlay CaptionDefaultEmpty

    Caption for the hover panel on this tile, used instead of the gallery-wide caption.

Layout

• ColumnsDefault4

  How many tiles sit side by side on a wide screen.

• Big Items (comma-separated indices)DefaultEmpty

  Numbers of the tiles that should span two columns, counting from 1 and separated by commas.

• GapDefaultDefault

  Space between tiles. Choose Custom to set your own value.

  ChoicesDefaultLargeExtra LargeCustom

• Custom GapDefaultEmpty

  Space between tiles, as a length such as 20px or 1rem.

  Shown when Gap is "Custom"

• Horizontal Gutter (px)Default0

  Space between tiles across a row, in pixels. 0 leaves the Gap setting in charge.

• Vertical Gutter (px)Default0

  Space between rows of tiles, in pixels. 0 leaves the Gap setting in charge.

• Lazy Load ImagesDefaultOff

  Defer tile images until they scroll into view.

• Placeholder WidthDefault800

  Width of the placeholder that holds each tile shape until the picture loads. Give it the proportions of your pictures rather than their exact size.

  Shown when Lazy Load Images is on

• Placeholder HeightDefault600

  Height of the placeholder that holds each tile shape until the picture loads. Give it the proportions of your pictures rather than their exact size.

  Shown when Lazy Load Images is on

• Tile ClassDefaultgrid-item

  Class on each tile link. Default grid-item; use col for a plain Bootstrap column grid.

• Inner WrapperDefaultOff

  Wrap each tile in .grid-inner: required for the hover overlay.

• Inner Wrapper ClassesDefaultEmpty

  Classes on the inner wrapper inside every tile.

  Shown when Inner Wrapper is on

Overlay

• Hover OverlayDefaultOff

  Reveal a panel over a tile while the pointer is on it.

• Overlay Icon ClassDefaultEmpty

  Icon shown in the middle of the hover panel.

  Shown when Hover Overlay is on

• Overlay Icon Extra ClassesDefaultEmpty

  Extra classes on the overlay icon. Ignored once the icon sits in a chip.

  Shown when Hover Overlay is on

• Overlay Icon Chip ClassesDefaultEmpty

  When set, the icon is wrapped in a chip span (e.g. overlay-trigger-icon size-lg).

  Shown when Hover Overlay is on

• Chip Hover AnimationDefaultEmpty

  Animation the icon chip plays as the pointer enters a tile, for example fadeIn.

  Shown when Hover Overlay is on

• Chip Hover Animation (out)DefaultEmpty

  Animation the icon chip plays as the pointer leaves a tile, for example fadeOut.

  Shown when Hover Overlay is on

• Overlay Content ClassesDefaultdark

  Classes on the box holding the overlay icon and caption.

  Shown when Hover Overlay is on

• Overlay CaptionDefaultEmpty

  Wording shown in the hover panel beneath the icon.

  Shown when Hover Overlay is on

• Overlay Caption ClassesDefaultEmpty

  Classes on the overlay caption.

  Shown when Hover Overlay is on

• Overlay BackdropDefaultOff

  Add a tinted layer behind the overlay content so the caption stays readable over a busy picture.

  Shown when Hover Overlay is on

• Backdrop ClassesDefaultdark

  Classes on the tinted layer.

  Shown when Overlay Backdrop is on

• Backdrop Inline StyleDefaultEmpty

  Inline style on the tinted layer, for a colour or gradient the classes do not cover.

  Shown when Overlay Backdrop is on

• Reveal AnimationDefaultEmpty

  Animation the overlay plays as the pointer enters a tile, for example fadeIn.

  Shown when Hover Overlay is on

• Reveal Speed (ms)Default0

  How long the reveal runs, in milliseconds. 0 leaves the timing to the animation itself.

  Shown when Hover Overlay is on

• Reveal TargetDefaultOverlay content box

  Whether the reveal animation runs on the whole overlay panel or on the icon alone.

  ChoicesOverlay content boxIcon onlyShown when Hover Overlay is on

Lightbox

• Enable LightboxDefaultOn

  Open the full-size picture in a lightbox when a tile is clicked.

• Zoom EffectDefaultOff

  Grow the picture out of its tile as the lightbox opens, instead of fading it in.

  Shown when Enable Lightbox is on

• Close Button PositionDefaultOutside

  Where the close button sits: in the corner of the screen, or in the corner of the picture itself.

  ChoicesOutsideInsideShown when Enable Lightbox is on

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.