Skip to main content
The ImageGallery block renders a responsive masonry-style or uniform grid of images with optional captions. It uses urlFor with LQIP placeholders for optimized lazy loading.

​
Props

​
heading
string
Optional section heading rendered as <h2>.
​
description
string
Supporting text below the heading.
​
images
GalleryImage[]
Array of image objects. Each item has:
  • image (SanityImageObject, required) — the image with hotspot/crop and LQIP metadata
  • caption (string) — optional caption displayed below the image
​
columns
2 | 3 | 4
Number of columns in the grid. Defaults to 3.

​
Usage in Sanity Studio

  1. Add an Image Gallery block to a page.
  2. Set an optional Heading and Description.
  3. Add images to the Images array — each requires an image upload and alt text.
  4. Set the Columns value in Layout Options.

​
Example

{
  _type: 'imageGallery',
  heading: 'Program Photos',
  columns: 3,
  images: [
    { image: { asset: { _ref: 'image-abc' }, alt: 'Students at showcase' }, caption: 'Spring 2025 Showcase' }
  ]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us