Skip to Content
This page documents Clover 3.x, @samvera/clover-iiif, the earlier version of Clover, kept here for reference. These docs lead with Clover 4: Get started.

Thumbnail

The Thumbnail component is used to display a thumbnail for a IIIF resource. This generally is an Image, however, could be a short Video or Sound clip.

thumbnail ↗ 
<Thumbnail
  thumbnail={[
    {
      id: "https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275/thumbnail",
      type: "Image",
      format: "image/jpeg",
      height: 200,
      width: 200,
    },
  ]}
  altAsLabel={{ none: ['Zagna "lunga"'] }}
/>

Usage

React

import { Thumbnail } from "@samvera/clover-iiif/primitives";
 
const CustomThumbnail = ({ thumbnail }) => {
  return <Thumbnail label={thumbnail} />;
};
 
export default CustomThumbnail;

API Reference

Thumbnails are rendered to a relative HTML <img> or <video> element depenpdent on the type of the resource in the thumbnail entry. Currently, only type Image and Video are supported.

PropTypeDefaultRequired
asimg, videoimg—
thumbnailthumbnail —Yes
altAsLabelInternationalString , undefined——
objectFitcontain, covercover—
classNamestring, undefined——
styleCSSProperties, undefined——
langstring, undefined——
titlestring, undefined——
data-*string, undefined——
aria-*AriaAttributes, undefined——

Video Thumbnail

Using the Thumbnail component, you can render a video thumbnail. This is useful for displaying a short clip of a video resource. To do so, a W3C media fragment  using temporal dimension should be appended to the id of the external Video resource, ex: #t=200,230. Additionally, a duration property should be used to account for time in seconds.

<Thumbnail
  thumbnail={[
    {
      id: "https://meadow-streaming.rdc.library.northwestern.edu/5a/cc/f7/5f/-a/56/1-/4b/3c/-9/b4/5-/7d/cc/f7/03/90/e3/74-110-2.m3u8#t=200,230",
      type: "Video",
      format: "application/x-mpegurl",
      width: 300,
      height: 300,
      duration: 30,
    },
  ]}
/>