Image

Use the <Image> component to insert a pan-zoom capable Image into your content. The component can reference a static image URL such as a .jpg or a IIIF Image API endpoint.

Properties

Property	Type	Required	Description
`height`	CSS `height` (opens in a new tab)	`true`	Height of the Image canvas
`isTiledImage`	`boolean`	`false`	Default as `false`. If `true`, the image using tiles served from a IIIF Image API endpoint
`label`	`string`	`false`	Label of image for captioning and accessibility purposes
`src`	`string`	`true`	URL reference for image `.jpg` or IIIF Image API endpoint, ex: `*.info.json`

This resource may OR may not be part of the IIIF Collection used in your Canopy project.
Width of the image will be 100% of the containing element.

Usage

Image component is rendered as a figure element with a figcaption element for the label. The figure is an OpenSeadragon viewer that allows for pan-zoom capabilities.

Pan-zoom using a simple image (`.jpg`, `.png`, etc.)

<Image
  height="500px"
  label="Emiliano Zapata, 1914 by Agustín Casasola. Public Domain."
  src="https://upload.wikimedia.org/wikipedia/commons/9/99/Emiliano_Zapata4.jpg"
/>

Emiliano Zapata, 1914 by Agustín Casasola. Public Domain.

Pan-zoom using tiles from a IIIF Image API endpoint

This method is useful for large images that are served as tiles from a IIIF Image API endpoint. Note that the src property is the IIIF Image API endpoint URL and the isTiledImage property is set to true.

<Image
  isTiledImage={true}
  height="500px"
  label="The Summons, 1856 by Emanuel Leutze. Harvard Art Museums."
  src="https://ids.lib.harvard.edu/ids/iiif/9013118"
/>

The Summons, 1856 by Emanuel Leutze. Harvard Art Museums.

Pan-zoom using a specific region of a IIIF Image API endpoint

In some cases, you may want to display a specific region of a IIIF Image API endpoint. This can be done by adding the region property to the src URL. The region property is formatted as x,y,w,h, where x and y are the coordinates of the top-left corner of the region, and w and h are the width and height of the region.

To find the region coordinates:

Navigate to the IIIF Crop tool (opens in a new tab) created by NC State University Libraries.
Input the IIIF Image API endpoint URL in the Image URL field, for example: https://ids.lib.harvard.edu/ids/iiif/9013118.
Draw a rectangle around the region you want to display.
Copy the generated URL and use this as the src value.

In this example, the region of 188,650,914,712 is generated for the URL https://ids.lib.harvard.edu/ids/iiif/9013118/188,650,914,712/full/0/default.jpg (opens in a new tab).

<Image
  height="500px"
  label="In the foreground of The Summons by Emanuel Leutze, a black-clad, masked figure emerges from behind a decorative screen to present a coin to a startled man in a red tunic, whose defensive posture and alarmed expression underscore the dramatic tension of the unexpected encounter."
  src="https://ids.lib.harvard.edu/ids/iiif/9013118/188,650,914,712/full/0/default.jpg"
/>

In the foreground of The Summons by Emanuel Leutze, a black-clad, masked figure emerges from behind a decorative screen to present a coin to a startled man in a red tunic, whose defensive posture and alarmed expression underscore the dramatic tension of the unexpected encounter.

Card Referenced Items