Skip to Content

Gallery

<Viewer template={Gallery} /><clover-viewer template="gallery">56 kB loaded by a page with the Viewer in Gallery to first view, styles included, gzipped129 kB loaded by a page with a <clover-viewer> in Gallery to first view, styles included, gzipped

A grid framed by what it opens: a Manifest’s views, a Collection’s members, or a page of annotations. Each cell opens in a lightbox, within the gallery’s own bounds.

Resource type
import Viewer from "@nulib/clover";
import { Gallery } from "@nulib/clover/templates";
import "@nulib/clover/styles.css";
import "@nulib/clover/templates.css";
 
<Viewer
  iiifContent="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template={}
  items=
  height="vh"
  size="rem"
  secondary=
/>;
<script type="module">
  import "@nulib/clover/web-components";
</script>
 
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template=
  items=
  height="vh"
  size="rem"
  secondary=>
</clover-viewer>

API reference

Opened on a Manifest, its title and summary head the grid, a cell for each view (a spread is one cell). Opened on a Collection, the Collection’s own title and summary head it, a cell for each member; choosing one shows that Manifest in the lightbox. Opened on an AnnotationPage of tags across Manifests, its label heads the grid, a cell for each tag, its region cut from its view; choosing one shows its Manifest in the lightbox, framed on the tag, and the lightbox’s strip steps through the tags. The grid is inside the gallery’s inset, its cells the inset apart.

The lightbox is a layer over the gallery, filling its bounds: modal within it, the rest of the gallery out of reach while it is open. Its title is the Manifest’s label, with Back before it, a step back out to the grid, named for where it goes (the Collection, or the annotations’ page, where the gallery opened on one), and Close after it. Under its view, the view’s own label, then a short strip of thumbnails that moves on, focus on the view shown, so the arrow keys go on at once; or, with lightboxItems="pager"lightbox-items="pager", Previous and Next, focus on Close. Beside its view is the information panel, as Default’s and Document’s is beside theirs: docked where there is room, its toggle on the bar, and sliding over the view where there is not. Escape, Close or a press outside its panel closes it too, and focus goes back to the cell. Its Body loads as the pointer or focus first reaches the gallery.

PropTypeDefaultDescription
items"grid" | "masonry""grid"The grid, as its Items’ layout: square cells, or each picture at its own proportions, in reading order.
secondary"summary" | "navDate" | "none""summary"The line under each cell’s label, where it has one (a Collection’s members do): its summary, its date, or none.
summarybooleantrueThe resource’s summary under the title, cut to two lines with Read more; false leaves it out.
sizestring10remA cell’s width (sets --clover-items-size).
gapnumber | stringThe insetThe space between cells: pixels, or a CSS length.
height"auto" | number | string"auto"auto grows with the grid; a height (pixels, or a CSS length) holds it, the grid scrolling under the header.
lightboxItems"slider" | "pager""slider"How the lightbox moves on from its view: a short strip of thumbnails, or Previous, the position and Next.
panelbooleantrueThe information panel beside the lightbox’s view, and its toggle, as Default’s and Document’s.
defaultPanelOpenbooleantrueWhether the panel starts open beside the view; over it, closed.
panelLayout"accordion" | "tabs""accordion"The panel’s sections as stacked boxes, or as tabs.
panelSectionsPanelSection[]AllWhich of the panel’s sections it may have; each still shows only where the resource has data for it, and no panel at all where it has none of them.
panelLabelsPanelSectionLabels—What a panel section says, in place of Clover’s own word for it: text, or text by language tag.
downloadbooleantrueThe downloads in the panel’s About, where there is a rendering.
languagesbooleantrueThe languages to read the resource in, beside the panel’s About heading, where it comes in several.
storageKeystring | false"clover-template-gallery"Where the panel’s width is remembered; false forgets it.
headingLevelnumber2The title’s level; the lightbox’s title is one below.
collapseControls"auto" | "always""auto"When the lightbox’s view controls (zoom, rotation, reset, full screen) collapse behind one button: only where its row cannot hold them all, or always, leaving the media more room.

<clover-viewer>

Clover's Viewer, in one of its templates: Default (the title over the Body, the thumbnails under it, the information panel beside them), Document (a PDF reader's pages, thumbnails beside them) or Gallery (a grid, each item opening in a lightbox). Each template loads when used, its styles with it.

NameTypeDefaultDescription
template"default" | "document" | "gallery"defaultThe layout: default, document or gallery. Default's comes with the element; another loads the first time one is shown.
iiif-contentstring—What to show: a URL, or a content state.
canvas-idstring—The Canvas to open on.
manifest-idstring—In a Collection, the Manifest to open first. The others stay reachable from it.
languagestring—The language to read IIIF text in.
high-contrastbooleanfalseClover's higher-contrast mode, for what is inside: the accent kept to rings, outlines and marks, never under words or a glyph, where the controls' dark fill takes its place, edged in the accent. On wherever the system asks for more contrast, too.
search-querystring—A Content Search to run as the Manifest opens.
annotationsstring (a URL or JSON)—Annotations to show beside the Manifest's own: a URL, or JSON (a list of URLs, or an AnnotationPage).
heading-levelnumber2The title's level, 2 or more, to fit the page's outline. The panel's sections are a level below.
items"slider" | "list" | "grid" | "masonry" | "false"sliderDefault and Gallery: Default's thumbnails, as a slider, list or grid, or "false" for none; Gallery's grid, as grid (its default) or masonry.
single-itembooleanfalseDefault and Document: the thumbnails even where the resource has one view, which has nothing to choose between. Gallery's grid always shows them.
headerbooleantrueDefault: "false" leaves out the title and provider over the Body.
panelbooleantrueDefault and Gallery: "false" leaves out the information panel, Default's beside its Body, the Gallery's beside its lightbox's view.
downloadbooleantrueDefault, Document and Gallery: "false" leaves out the downloads: Default's and the Gallery's from a Download button beside its panel's About heading, Document's in its toolbar (its panel's About offers none).
languagesbooleantrueDefault, Document and Gallery: where what the resource says of itself comes in several languages, the panel's About heading offers them, and the whole Viewer reads in the one chosen. "false" leaves the choice out.
panel-openboolean—Default, Document and Gallery: whether the information panel starts open beside the page (the Gallery's, beside its lightbox's view). Default's and the Gallery's do, by default; Document's starts shut. Where it would slide over the page (a phone), it starts shut.
panel-layout"accordion" | "tabs"accordionDefault, Document and Gallery: the panel's sections as stacked boxes, each opened by its heading, or as tabs.
panel-sectionsstring (a URL or JSON)every sectionDefault, Document and Gallery: which of the panel's sections it may have, as a JSON array: ["contents","search","transcript","annotations"] leaves out About and the rest. Each still shows only where the resource has data for it, and there is no panel where none of them does.
panel-labelsstring (a URL or JSON)—Default, Document and Gallery: what a panel section's tab or heading says, in place of Clover's own word for it, as JSON by the section's value: {"annotations": "Chapters"}, or a word by language tag to say it in several (clover-panel's labels).
sidebar-openboolean—Document: whether the page thumbnails start shown beside the page, as they do by default. Where they would float over the page (a phone), they start put away.
storage-keystring—Default, Document and Gallery: where the width chosen for a pane is remembered (localStorage); "false" forgets it.
fillbooleanfalseDefault: as tall as the box it is in, the Body taking what the header and the thumbnails leave.
collapse-controls"auto" | "always"autoDefault, Document and Gallery: when the Body's view controls (zoom, the turns, reset, full screen) collapse behind one button, the Gallery's in its lightbox: auto, only where the row cannot hold them all; always, wherever there are any, leaving the media more room.
sizestring10remGallery: the size of a cell in the grid.
heightstringautoGallery: its height, auto (growing with its grid) or a CSS length, the grid scrolling under the header.
gapstring—Gallery: the space between the grid's cells, a CSS length. Its inset unless set.
secondary"summary" | "navDate" | "none"summaryGallery: the line under each cell's label, where it has one: summary, navDate or none.
summarybooleantrueGallery: the resource's summary under the title, cut to two lines with Read more under it where it runs longer; "false" leaves it out.
lightbox-items"slider" | "pager"sliderGallery: how its lightbox moves on from the view it shows: a short strip of thumbnails (slider), or a pager, Previous, the position and Next.
.iiifContentstring | Record<string, unknown> | null—As a property: What to show, as the attribute takes it, or a IIIF resource as an object.
.annotationsstring | Record<string, unknown> | Array<string | Record<string, unknown>> | null—As a property: Annotations to show beside the Manifest's own, as URLs or objects.
.request{ credentials?: RequestCredentials; headers?: Record<string, string>; fetch?: typeof fetch } | null—Credentials, headers and a fetch of your own, for every request.
.renderersCloverRenderer[] | null—Renderers of yours, for its Body: each claims views (canvasId, format or match) and draws one into a box of its own (render), returning what undoes it.
clover-canvas-change{ canvasId: string }—An event. The current Canvas changed.
clover-manifest-change{ manifestId: string }—An event. In a Collection, another Manifest opened.
clover-status-change{ status: "loading" | "ready" | "error"; error: Error | null }—An event. What it was given is loading, has loaded, or failed to.
clover-content-state-change{ json: Record<string, unknown>; encoded: string }—An event. The current view, as a IIIF content state, as it changes: at most every 100ms while it moves, and always its last place.

The lightbox fills the gallery’s bounds by default. Give it room, a backdrop and corners with three properties, set on the gallery or any element around it: --clover-template-lightbox-inset (default 0), --clover-template-lightbox-backdrop (transparent) and --clover-template-lightbox-radius (0).

Examples

Masonry

Use items="masonry" for pictures at their own proportions, each packed up under the one above it, still read left to right.

<Viewer iiifContent={url} template={Gallery} items="masonry" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="gallery"
  items="masonry"></clover-viewer>

A Collection

Opened on a Collection, the gallery is the Collection’s: its title and summary, and a cell for each member, its summary under its label.

<Viewer iiifContent={collection} template={Gallery} />

Size

Use size to set the width of the cells.

<Viewer iiifContent={url} template={Gallery} size="8rem" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="gallery"
  size="8rem"></clover-viewer>

The lightbox’s pager

Use lightboxItems="pager"lightbox-items="pager" for Previous, the position and Next under the lightbox’s view, in place of its strip of thumbnails.

<Viewer iiifContent={url} template={Gallery} lightboxItems="pager" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="gallery"
  lightbox-items="pager"></clover-viewer>

A height of its own

Use height to hold the gallery to a height: its header stays, and the grid scrolls under it. The lightbox fills that height.

<Viewer iiifContent={url} template={Gallery} height="28rem" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="gallery"
  height="28rem"></clover-viewer>

Gap

Use gap to set the space between cells, the gallery’s inset unless set.

<Viewer iiifContent={url} template={Gallery} gap="0.5rem" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="gallery"
  gap="0.5rem"></clover-viewer>

The lightbox with a backdrop

Give the lightbox room around its panel and a backdrop, so the gallery shows dimmed around it.

<Viewer
  iiifContent={url}
  template={Gallery}
  style={{
    "--clover-template-lightbox-inset": "var(--clover-inset)",
    "--clover-template-lightbox-backdrop": "rgb(0 0 0 / 0.6)",
    "--clover-template-lightbox-radius": "var(--clover-radius)",
  }}
/>
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  template="gallery"
  style="
    --clover-template-lightbox-inset: var(--clover-inset);
    --clover-template-lightbox-backdrop: rgb(0 0 0 / 0.6);
    --clover-template-lightbox-radius: var(--clover-radius);
  "></clover-viewer>