v1.7.0

Gallery

<Gallery> renders a responsive matrix of clickable figures. Each <Gallery.Item> defines the preview (thumbnail, caption text, metadata) and ships its children into a fullscreen popup so authors can reuse any existing MDX component—Viewer, Map, ImageStory, prose, or custom markup.

  • Grid columns collapse automatically using CSS grid with sensible spacing.
  • Figures render semantic <figure>/<figcaption> markup so cards keep context in document flow.
  • Modals use pure CSS targeting, so the build stays SSR-safe with no extra runtimes. Keyboard users activate the same links to open, close, or step through items.
  • Accessibility niceties ship inlined: focus stays trapped inside the active popup, Esc closes it, and background scrolling is locked until you exit.
  • The popup header mirrors the thumbnail so users keep visual context before diving into the richer MDX body.
  • Control the overlay footprint with popupSize="full" | "medium"—full overtakes the viewport, while medium keeps page chrome visible and adds rounded/shadowed chrome.
  • Randomize tile layouts per build with order="random", handy when you want a fresh arrangement for every publish.
  • Reference cached manifests (referencedManifests) to auto-populate labels, summaries, and thumbnails when you don't want to repeat metadata by hand.

Examples pull from the same Northwestern fixtures cached under .cache/iiif, so thumbnails and modal content point at manifests you already have locally.

Example: Modal media wall

Seated woman writing
Seated woman writingMounted watercolor on mica.
Open popup for Seated woman writing
Musician with tanpura
Musician with tanpuraStanding figure from the same mica suite.
Open popup for Musician with tanpura
Seated woman sewing
Seated woman sewingCompanion miniature sourced from the cached collection.
Open popup for Seated woman sewing
<Gallery  title="Miniatures on mica"  description="Click a tile to open a popup powered by the Northwestern manifests cached in .cache/iiif.">  <Gallery.Item    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/213f2874-afca-452d-9bf3-ef0fe85a81ae?as=iiif",    ]}    title="Seated woman writing"    summary="Mounted watercolor on mica."    thumbnail="https://api.dc.library.northwestern.edu/api/v2/works/213f2874-afca-452d-9bf3-ef0fe85a81ae/thumbnail"    thumbnailAlt="Miniature painting of a woman writing at a desk"  >    <GalleryContent flex>      <Viewer        iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/213f2874-afca-452d-9bf3-ef0fe85a81ae?as=iiif"        options={{          showTitle: true,          informationPanel: {            open: true,            renderAbout: true,          },        }}      />      <aside>        <dl>          <dt>Date</dt>          <dd>1800</dd>          <dt>Creator</dt>          <dd>Richard Earlom</dd>        </dl>      </aside>    </GalleryContent>  </Gallery.Item>  <Gallery.Item    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/2826e1b9-d38c-413d-b46f-4cd28d916b6d?as=iiif",    ]}    title="Musician with tanpura"    summary="Standing figure from the same mica suite."    thumbnail="https://api.dc.library.northwestern.edu/api/v2/works/2826e1b9-d38c-413d-b46f-4cd28d916b6d/thumbnail"    thumbnailAlt="Miniature painting of a musician holding a long-neck instrument"  >    <Viewer      iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/2826e1b9-d38c-413d-b46f-4cd28d916b6d?as=iiif"      options={{        showTitle: true,        informationPanel: {          open: true,          renderAbout: true,        },      }}    />  </Gallery.Item>  <Gallery.Item    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/cdb547e9-d5c1-4c1a-9ca5-b3fad0da4915?as=iiif",    ]}    title="Seated woman sewing"    summary="Companion miniature sourced from the cached collection."    thumbnail="https://api.dc.library.northwestern.edu/api/v2/works/cdb547e9-d5c1-4c1a-9ca5-b3fad0da4915/thumbnail"    thumbnailAlt="Miniature painting of a seated woman sewing"  >    <Viewer      iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/cdb547e9-d5c1-4c1a-9ca5-b3fad0da4915?as=iiif"      options={{        showTitle: true,        informationPanel: {          open: true,          renderAbout: true,        },      }}    />  </Gallery.Item></Gallery>

API

<Gallery />

PropTypeRequiredNotes
titlestringOptional heading rendered above the grid.
descriptionstringShort intro paragraph under the heading.
popupSize'full' &#124; 'medium'Toggle fullscreen vs. windowed popup layout (default 'full').
order'default' &#124; 'random'Control figure ordering; random shuffles once during the build.
childrennodes✅One or more <Gallery.Item> entries.

<Gallery.Item />

PropTypeRequiredNotes
titlestring✅Primary caption text and popup heading.
summarystringShort description shown under the title (also reused inside the popup).
captionnodeProvide custom figcaption markup. When set, title/summary rendering is skipped.
metastring · string[]Supplemental metadata displayed under the caption and inside the popup header.
thumbnail/srcstringPreview image URL used in the grid. media remains as an alias for string sources.
thumbnailAltstringAlt text for the thumbnail image. Defaults to title.
referencedManifests / manifest(s)string · string[]Resolve manifests into derived labels, summaries, and thumbnails (overridden when props are provided).
slugstringOptional stable identifier for deep-linking popup IDs (hash uses #gallery-modal-*).
triggerLabelstringCustom accessible label for the figure trigger link.
popupTitlestringOverride the popup heading; falls back to title.
popupDescriptionstringOverride the popup description; falls back to summary/description.
childrennodes✅Modal body content. Accepts any MDX component (Viewer, Map, ImageStory, markdown, etc).

Preview tiles now render a standard <img> element sourced from thumbnail/src/media string props to keep the markup predictable.

Popup navigation is fully static: the component uses hash targets (#gallery-modal-*) for open/close/next/prev, so no hydration is required. The close target is scoped per gallery, making multiple galleries on the same page safe.

<GalleryContent />

Wrap popup bodies with <GalleryContent> (or Gallery.Content) to reuse the default gutters and the optional flex layout.

PropTypeRequiredNotes
flexbooleanWhen true, the wrapper switches to a row-based flex layout.
childrennodes✅Modal body markup. Works with any MDX content (Viewers, prose, etc.).