---
title: "Thumbnail"
description: "A small picture of the resource, or of the current Canvas, as an image named by its label."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/thumbnail
version: "4"
---

# Thumbnail

\<Clover.Thumbnail /> (web components: \<clover-thumbnail>)2 kB added to a page with a Root, gzipped (web components: 7 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.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Thumbnail size={200} of="manifest" />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-thumbnail size="200" of="manifest"></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`.

**React**

| 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`.                                       |

**Web components**

### `<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.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

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

**Web components**

```html
<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` (web components: `<clover-label>`) that says the same, use `alt=""`, so assistive technology does not read the title twice.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

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

**Web components**

```html
<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.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

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

**Web components**

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

## Previous versions

[Clover 3.x › Thumbnail](https://clover.iiif.library.northwestern.edu/docs/3.x/thumbnail)

- Inside a `Root` (web components: `<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.