Share and Reuse Content
Works in a Canopy IIIF site can be shared with others via IIIF Content State (opens in a new tab). This allows content to be opened to specific views and allows content to be easily reopened in other viewers.
The Share component is compliant with IIIF Content State 1.0. For more information, see the IIIF Content State (opens in a new tab) API specification.
This guide assumes you have a Canopy IIIF project. See the Create a Project guide to get started.
Use Case
You are a digital humanist who wants to link to a specific page of a book in a social media post and point at that page in the book in custom component.
Implementation
Navigate to the Book and Page You Want to Share from Canopy IIIF
In your web browser, open a link to The North American Indian (opens in a new tab) and click on page 3. With page 3 active, Click the Share button and the checkbox next to page 3. Clicking the checkbox signifies you want the link to open to that specific view.
Share the Link in a Social Media Post
Using your social media platform of choice, create a new post using the link in the Share components box. As readers click the link, they will open the work in Canopy IIIF at the page you specified.
Discuss the View in Custom Content Using the Viewer
Component
Now let's create a new page within About
with a link to the view in the Viewer
component.
Create a new page called content-state.mdx
at /content/about
.
Since Canopy IIIF uses the IIIF Content State API specification for creating a portable, sharable representation
of what a user is looking at , we can copy the string following ?iiif-content=
and paste it into the value of
iiif-content
in Viewer
and it will load that view in an interoperable way.
---
title: "Content State Example"
navigation: "about"
---
# Content State Example
This is an example of a Content State request with the Viewer Component.
<Viewer iiifContent="JTdCJTIyJTQwY29udGV4dCUyMiUzQSUyMmh0dHAlM0ElMkYlMkZpaWlmLmlvJTJGYXBpJTJGcHJlc2VudGF0aW9uJTJGMyUyRmNvbnRleHQuanNvbiUyMiUyQyUyMmlkJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZjYW5vcHktaWlpZi5naXRodWIuaW8lMkZjYW5vcHktaWlpZiUyRndvcmtzJTJGdGhlLW5vcnRoLWFtZXJpY2FuLWluZGlhbi1iZWluZy1hLXNlcmllcy1vZi12b2x1bWVzLXBpY3R1cmluZy1hbmQtZGVzY3JpYmluZy10aGUtaW5kaWFucy1vZi10aGUtdW5pdCUyRmNvbnRlbnQtc3RhdGUlMjIlMkMlMjJ0eXBlJTIyJTNBJTIyQW5ub3RhdGlvbiUyMiUyQyUyMm1vdGl2YXRpb24lMjIlM0ElNUIlMjJjb250ZW50U3RhdGUlMjIlNUQlMkMlMjJ0YXJnZXQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGYXBpLmRjLmxpYnJhcnkubm9ydGh3ZXN0ZXJuLmVkdSUyRmFwaSUyRnYyJTJGd29ya3MlMkY1ZDA3NTQxNS01MmQ1LTQ1MzAtOWQ1MC1lNmY0ODhkNjM0YzYlM0ZhcyUzRGlpaWYlMkZjYW52YXMlMkYxNiUyMiUyQyUyMnR5cGUlMjIlM0ElMjJDYW52YXMlMjIlMkMlMjJwYXJ0T2YlMjIlM0ElNUIlN0IlMjJpZCUyMiUzQSUyMmh0dHBzJTNBJTJGJTJGYXBpLmRjLmxpYnJhcnkubm9ydGh3ZXN0ZXJuLmVkdSUyRmFwaSUyRnYyJTJGd29ya3MlMkY1ZDA3NTQxNS01MmQ1LTQ1MzAtOWQ1MC1lNmY0ODhkNjM0YzYlM0ZhcyUzRGlpaWYlMjIlMkMlMjJ0eXBlJTIyJTNBJTIyTWFuaWZlc3QlMjIlN0QlNUQlN0QlN0Q" />
The IIIF Content State API specification uses Base 64 encoding to create a compact and URL-safe way to include complex state information. For more information about this, see the Content State Encoding Section (opens in a new tab) of the API specification.
Add New Route to About
Navigation
Open /content/about/_meta.json
and add the link to your content to the array:
[
{
"path": "/about",
"text": "About"
},
{
"path": "/about/example",
"text": "Markdown Example"
},
{
"path": "/about/content-state",
"text": "Content State Example"
}
]