ImageStory

<ImageStory> wraps Storiiies by Cogapp, an open-source tool for guiding users through a sequence of annotations on an image. <ImageStory> accepts IIIF Manifest URIs with annotations targeting rectangles or points on images, and renders them as a guided tour with built-in navigation and annotation text.

This tour uses An Indian woman burning herself on the death of her husband from the British India art demo. It draws its image from Northwestern University Libraries' source Manifest. The Storiiies Manifest adds an authored tour; its annotations are separate from the provider's catalog record.

<ImageStory  iiifContent="https://manifest.storiiies-editor.cogapp.com/v3/c083t"  height="900"/>

Authoring with Storiiies Editor

Use the Storiiies Editor to write a tour and choose the image regions it describes. Pass the resulting Manifest URL to <ImageStory> to embed it in MDX.

Determine Manifest URL

Click Links in the editor and copy the bookmark URL.
Find the tour identifier in that URL. This example uses c083t.
Use the identifier at the end of the Manifest URL: https://manifest.storiiies-editor.cogapp.com/v3/c083t.

API

Prop	Type	Required	Notes
`iiifContent`	string	✅	Storiiies manifest URL. Relative paths are prefixed with the site base path.
`disablePanAndZoom`	boolean		Disables mouse navigation when `true`.
`height`	string\|number		CSS height for the container. Defaults to `600`.
`className`	string		Adds classes to the wrapper div.