Continue to the content

Workshops

IIIF (International Image Interoperability Framework) facilitates the use of digital images in research, teaching and communication. Follow a step by step workshop which requires no technical knowledge.

Good to know before you start

  • Bookmark this page. We'll often refer to external websites.
  • Every digital object (book, painting, drawing, sculpture...) that is available in IIIF has a manifest URL. The manifest URL is the key to use this object in IIIF tools. IIIF is used by a growing number of institutions, but is not yet used everywhere, so the object of your choice might not yet have a manifest URL.
  • IIIF tools and websites do not depend on the institutions (libraries, museums, archives) that manage collections. They are developed by a community of IT specialists and special collections specialists.
    • Viewers are designed to consult manuscripts. Universal Viewer and Mirador are two of the most widely used IIIF viewers.
    • Guided viewing tools are designed to create virtual tours. Mmmonk works with the Exhibit tool, but there are a number of other tools available.

Finding the manifest URL

Mmmonk: Go to the page of a manuscript (e.g. this breviary) > the link is right below the viewer. For this workshop we have gathered some interesting manifests for you to play with: consult the list on this page.

Specific institution: Look for the words 'IIIF manifest URL' or the IIIF logo in the metadata (descriptions) of an object in the institution's online catalogue. Some examples:

  • Ghent University Library > go to ‘For developers’;
  • KU Leuven > go to ‘View online’ > open the manuscript in Teneo > go to ‘information’ (‘Permalink IIIF manifest’).

World wide: Biblissima IIIF Collections: https://iiif.biblissima.fr/collections/ This website gathers all of the available manifests of manuscripts and rare books (and is an awesome website in general for manuscripts research).


Copy the URL (i.e. the information in your browser's address bar). This is the key you need. If the manifest should open, you will see a page filled with json code. You don't need the code, only the URL.

A manifest URL contains the words IIIF and manifests. For instance: https://adore.ugent.be/IIIF/manifests/archive.ugent.be%3AC98E436C-003C-11E7-AD2E-55C9D43445F2.

Share a detail on an image via Universal Viewer

You have found an interesting detail in a manuscript and wish to share this with someone or to save it for yourself. Instead of downloading the image or taking a screen shot, you can share or bookmark a URL with coordinates.

Detail of an image in Universal Viewer
Detail of an image in Universal Viewer

How to

  1. Select and copy the manifest URL of the object.
  2. Open the website https://universalviewer.io/
  3. Copy the URL to ‘Paste the URL of a IIIF manifest here to see the UV in action!’
  4. Browse the manuscript and zoom in on an interesting detail. (Watch how the coordinates in the URL change as you zoom or move. The coordinates make it possible to share a specific area of an image.)
  5. Copy the URL with the coordinates or use the share button in the viewer. Share the URL in a message, copy it to a document, or bookmark the page.

Assignment

Find the coat of arms of Abbot Raphael de Mercatellis (f. 3r) in Ms. 109 from Ghent University Library. Zoom in on the detail and share or save this detail.

manifest URL Ms. 109: https://adore.ugent.be/IIIF/ma...

Compare manuscripts in Mirador

You have found an interesting manuscript at the British Library and wish to compare it with a manuscript from Bruges Public Library and a painting from the Getty Museum in Los Angeles. Each of these institutions has their own viewers, with specific rules and functionalities. This can be burdensome for researchers, going back and forth between websites. The Mirador viewer allows you to gather these objects (images + descriptions!) in a single uniform viewing environment.

Comparing cyclopes in the Mirador viewer
Comparing cyclopes in the Mirador viewer

How to

  1. Select and copy the manifest URL of your object.
  2. Open the website https://mirador-dev.netlify.app/__tests__/integration/mirador/. (Close the examples by Van Gogh and of Krishna.)
  3. Hit ‘start here’.
  4. Hit ‘add resource’.
  5. Add the manifest URL and hit ‘add’. Your object is now the first in the list of resources.
  6. Click on your object to add it to your collage.
  7. Repeat these steps as often as you wish to add objects to your collage.
  8. Save your collage by clicking on the three dots in the menu on the right. Hit 'export workspace' > ‘view workspace configuration’, select the body of text and save it to a document or notepad for later use. Open a collage by importing the saved text into ‘import workspace’.

Assignment 1

Compare the Liber Floridus manuscripts at Ghent University Library (Ms. 92) and at Chantilly Bibliothèque et archives du château (Ms. 724).

Ms. 0092 manifest URL: https://adore.ugent.be/IIIF/ma...

Ms. 724 manifest URL: https://bvmm.irht.cnrs.fr/iiif...

Assignment 2

Find images of a specific iconographical topic on Biblissima IIIF Collections. Make a collage in Mirador with at least three images.

Tip: Take into account that the website's descriptions are written in French and/or English. Searching for terms like Apocalypse, dragon, Jerusalem… yields the best results for this exercise.

Create a virtual tour with Exhibit

You'd like to create an online exhibition on one or more manuscripts. Instead of collecting, cropping and uploading images, you can collect manifest URLs in the Exhibit tool. You can even alternate the images with YouTube videos for a more dynamic effect. Visitors can zoom in and out on the images and can easily consult the metadata of the images. As a result, the images are not separated from their context!

Creating a virtual tour with Exhibit
Creating a virtual tour with Exhibit

Examples

How to

  1. Go to https://mmmonk.vercel.app/ > ‘Create an Exhibit’
  2. Choose the format (Kiosk plays automatically, Scroll let's visitors scroll through the tour, Slide is a slideshow, Quiz presents multiple choice questions)
  3. Fill in the required fields and ‘create exhibit’. You can always come back to this menu to make changes.
  4. Bookmark the URL or save it in a document. Exhibit does not use accounts and log-ins. The URL is the only way to return to your work.
  5. Click ‘add item’.
  6. Paste a manifest URL in the bar at the bottom and click 'import'.
  7. Select this resource in the list of resources and hit 'add to exhibit'.
  8. Browse through the manuscript to the page of your choice and zoom in on the detail of your choice.
  9. Hit the '+' bar ('add new'). This opens the annotation module. Write your annotation. You can still modify the image at this point.
  10. Hit the 'check' button below the annotation to save the annotation and the image. Would you like to show another page in the same manuscript? Then browse through the manuscript to the detail of your choice, click on '+', and create a new step in your tour.
  11. Add as many items/resources as you wish. This can also be a YouTube video.
  12. Go to 'preview' to preview your tour. Hit 'share' to share or embed your tour.

Troubleshooting

Error report when you import a manifest? Is it possible you've already added this manuscript and that it is already in your list of resources? If not, check the URL for errors.

Assignment

Select a few manuscripts (e.g. from the Mmmonk workshop list) and create a tour or quiz. (Bookmark the URL of your workspace!)

Embed a viewer on your website

You have written a blogpost or have created an online course on manuscripts (or other objects). Instead of uploading static images to your website, you can embed a IIIF-viewer to offer a richer experience to your audiences.

This viewer is embedded on this webpage. You can still zoom in or out, leaf through the book, and you have access to the metadata.

Benefits

Enjoy the functionalities of a viewer (vs. a static, flat image): show a detail but keep the option to zoom out + direct access to metadata descriptions + high resolution + quick + no need to download/save/crop/upload/host images (and pay for server capacity and hosting).

Examples

How to

  1. Retrieve the iframes or div embed code via Universal Viewer (> ‘share’). This functionality is sometimes also available in customized viewers on institutional websites.
  2. Embed the iframes code as an alternative for an uploaded jpg in the CMS of your website. Ask your supplier to provide this option when you design a website.

When you use the iframes code, you (the editor of the webpage) will be able to zoom in on a specific detail (via URL coordinates). This is not an option with div code.

Online course with embedded IIIF viewers (https://spotlight.vatlib.it/latin-paleography)
Online course with embedded IIIF viewers (https://spotlight.vatlib.it/latin-paleography)

Download an image

Although IIIF makes it easy to return to online images (and even details on them), sometimes you just want to download an image. No problem, this is still possible with IIIF!

How to

  1. Go to https://universalviewer.io/
  2. Paste the manifest URL into the bar and hit ‘view’.
  3. Click on the download logo in the lower left corner of the viewer. Select one of the options. 'Source image file (tiff)' will download the image as it was uploaded by the institution.

Next level

Some next level tricks to facilitate your use of IIIF resources. Under construction.

Collect manifest URLs with DetektIIIF

DetektIIIF is a browser extension for Chrome and Firefox that detects IIIF resources in websites. It is possible to collect IIIF manifests in a basket and send them to any compatible IIIF application, for instance Mirador and Universal Viewer.

Live workshops IIIF

This page is used during live workshops by Mmmonk at higher education and GLAM institutions. If you'd like to introduce students and staff at your institution to the benefits of working with IIIF in education, communication and research, we'd be happy to figure out how we can help.