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.

An Image of the Share Component in Use in Canopy

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.

content/about/history.mdx

---
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"
  }
]

Screenshot of Content State Example in Viewer

Setup a Collection with Tropiiify Stackblitz Playground