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={[
{
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,
},
]}
/>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.
| Prop | Type | Default | Required |
|---|---|---|---|
as | img, video | img | -- |
thumbnail | thumbnail (opens in a new tab) | -- | Yes |
className | string, undefined | -- | -- |
style | CSSProperties, undefined | -- | -- |
lang | string, undefined | -- | -- |
title | string, 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 (opens in a new tab) 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,
},
]}
/>