---
title: "Thumbnail (3.x)"
description: "Thumbnail, a small image, video or sound clip standing for a IIIF resource. Clover 3.x (@samvera/clover-iiif), the earlier version, kept for reference."
url: https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/thumbnail
version: "3.x, the earlier version, superseded by Clover 4"
---

> 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](https://clover.iiif.library.northwestern.edu/docs).

# 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 ↗](https://iiif.io/api/presentation/3.0/#thumbnail)

### Code

```jsx
<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"'] }}
/>
```

### HTML

```html
<img
  alt='Zagna "lunga"'
  src="https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275/thumbnail"
  class="c-eCSSFU c-eCSSFU-ieexNaM-css"
/>
```

## Usage

### React

```jsx
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](https://iiif.io/api/presentation/3.0/#thumbnail)                                             | —       | **Yes**  |
| `altAsLabel` | [InternationalString](https://iiif.io/api/presentation/3.0/#44-language-of-property-values), `undefined` | —       | —        |
| `objectFit`  | `contain`, `cover`                                                                                       | `cover` | —        |
| `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](https://www.w3.org/TR/media-frags/#valid-uri-temporal) 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.

### Code

```jsx
<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,
    },
  ]}
/>
```

### HTML

```html
<video
  disablepictureinpicture=""
  loop=""
  src="blob:https://samvera-labs.github.io/clover-iiif/07f97274-b45a-4bb9-af32-b921cac6868c"
  class="c-eCSSFU c-eCSSFU-ieBvefY-css"
  autoplay=""
></video>
```