Gallery

Displays an images gallery with accessible lightbox.

Frontmatter

blocks:
  - type: gallery
    heading: {} # (optional)
      surtitle: '' # string (optional)
      title: '' # string (optional)
      text: '' # markdown (optional)
    gallery: []
      src: '' # url
      filter: '' # [Box, Lanczos, CatmullRom, Linear] (optional)
      alt: '' # string (optional)
      legend: '' # string (optional)
      credit: '' # markdown (optional)
    ui: {} # (optional)
      theme: '' # [accent, black, dark, highlight, light, neutral, white] (optional)
      grid: '' # [xsmall, small, medium, large, container, full] (optional)
      offset: '' # [start, center, end] (optional)
      align: '' # [start, center, end] (optional)
      column: 3 # number, columns per row on desktop, grid layout only (optional)
      ratio: 1 # number, thumbnail aspect ratio (optional)
      scrollsnap: '' # [none, sm, md, lg, xl, all] or object (optional)
      layout: '' # [grid, carousel] (optional)
      carousel: {} # only with layout: carousel (optional)

Thumbnails are cropped to ratio and sized from ui.grid divided by ui.column, so the widths stay right whatever the block’s grid. Clicking one opens the accessible lightbox.

See Common keys for heading, footing, scrollsnap, carousel and the full ui reference.

Params

/config/_default/params.yaml

Default ratio, and the column count on mobile.

params:
  blocks:
    gallery:
      image:
        ratio: 1 # number
      column:
        mobile: 2 # number

Demo visual renderer

Files

CMS availability

CMS	Hugolify Admin v2
CloudCannon	Available
Decap CMS	Available
Netlify CMS	Available
Pages CMS	Available
Static CMS	Available
Sveltia CMS	Available
Tina CMS	Available