v1.7.0
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.
The component is ideal for embedding interactive image stories in content pages, making it easy to highlight visual details and provide contextual narratives in an engaging way. The example below is an embedded instance of https://storiiies.cogapp.com/view/3683j/Embassy-of-Hyderbeck-to-Calcutta-1800.
<ImageStory iiifContent="https://manifest.storiiies-editor.cogapp.com/v3/3683j" height="900"/>Authoring with Storiiies Editor
Individuals of any technical skill level can easily create and export Storiiies manifests using the Storiiies Editor, which provides a user-friendly interface for defining stories and contextual descriptions. Once created, simply pass the manifest URL to <ImageStory> to embed the interactive experience directly in your MDX content.
Determine Manifest URL
- Click Links and copy the bookmark URL
- Note the identifier 3683j in this bookmark: https://storiiies.cogapp.com/view/3683j/Embassy-of-Hyderbeck-to-Calcutta-1800
- This identifier can be used to construct a manifest URL: https://manifest.storiiies-editor.cogapp.com/v3/3683j
Example
- Bookmark link:
https://storiiies.cogapp.com/view/3683j/Embassy-of-Hyderbeck-to-Calcutta-1800 - Manifest URL:
https://manifest.storiiies-editor.cogapp.com/v3/3683j
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. |