Thumbnail

<Clover.Thumbnail /><clover-thumbnail>2 kB added to a page with a Root, gzipped7 kB added to a page with a <clover-root>, styles included, gzipped

A small picture of the resource, or of the current Canvas, named by its label.

<Clover.Root iiifContent={url}>
  <Clover.Thumbnail size={} of= />
</Clover.Root>

<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-thumbnail size="" of=></clover-thumbnail>
</clover-root>

API reference

Reads thumbnail from the Root’s resource and renders an img, its alt the resource’s label. It renders nothing while there is no picture. Its other props go to the img.

Prop	Type	Default	Description
`of`	`"manifest" \| "canvas"`	`"manifest"`	Whose thumbnail: the resource’s, or the Canvas the reader is on.
`value`	IIIF resource	—	A Manifest, Canvas or Collection to picture instead of the Root’s.
`size`	`number`	`400`	Pixels asked for on the longer side, and the `img`’s `width`.
`alt`	`string`	The resource’s label	The picture’s text alternative.
`className`	`string`	—	Added to `clover-thumbnail`.

`<clover-thumbnail>`

The thumbnail (for a Canvas, its first image), its alt text the resource's label.

Name	Type	Default	Description
`of`	`"manifest" \| "canvas"`	`manifest`	Whose property: the Manifest's, or the Canvas in view's.
`value`	`string (a URL or JSON)`	—	A resource to picture (a Manifest, Canvas or Collection), instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
`size`	`number`	`400`	Pixels to ask for on its longer side.
`alt`	`string`	—	Its alt text instead of the label: "" for a picture beside its label, which says it already.
`.value`	`Record<string, unknown> \| null`	—	As a property: A resource to picture (a Manifest, Canvas or Collection), instead of the root's.

Examples

The current Canvas

Use of="canvas" for the Canvas in view. This newspaper’s pages have no thumbnail, so each is pictured by the image it paints.


<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <Clover.Body />
  <Clover.Thumbnail of="canvas" size={200} />
</Clover.Root>


<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <clover-body></clover-body>
  <clover-thumbnail of="canvas" size="200"></clover-thumbnail>
</clover-root>

Beside its title

Beside a Label<clover-label> that says the same, use alt="", so assistive technology does not read the title twice.


<Clover.Thumbnail alt="" size={200} />
<Clover.Label as="h4" />


<clover-thumbnail alt="" size="200"></clover-thumbnail>
<clover-label as="h4"></clover-label>

Size and crop

Size it, and crop it, with your CSS: Clover’s stylesheet leaves .clover-thumbnail alone.


<Clover.Thumbnail
  style={{ width: "16rem", aspectRatio: "16 / 9", objectFit: "cover" }}
/>


<clover-thumbnail
  style="
    width: 16rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  "></clover-thumbnail>

Previous versions

Clover 3.x › Thumbnail

Inside a Root<clover-root>, leave out thumbnail: it reads the resource’s own.
Its alt is the resource’s label: no altAsLabel.
objectFit is object-fit, in your CSS.
It is always an img: no video thumbnails.