IIIF Examples

These examples demonstrate new DSpace support for the International Image Interoperability Framework, abbreviated IIIF and pronounced triple-eye-eff.

These examples will work with images from any IIIF compliant data source. Some of the examples below use images from other archives, museums and libraries.

List of Examples

  1. Embed Viewer in a Page
  2. Link to an Image Viewer
  3. Scaled and Cropped Images
  4. Annotating Images
  5. Comparing Images
  6. Layering Images
  7. Book View
  8. Search

Note that the embedded Mirador viewers below are live demos; they are not screenshots. Use the hamburger icons in the upper left to see the navigation panels. The viewers can be expanded to full screen.

Embed Viewer in a Page

Using an IIIF viewer, it's easy embed a DSpace item into an external webpage, Libguide, or LMS page by using the DSpace Mirador viewer's "Share" option (image below).

In the "Embed" section, select the size of the iframe you want to embed, copy the code into your clipboard using the "Copy" button, then paste the code snippet into the web page. When you open the web page you should see a viewer like one shown below. This is the Diary of Chloe Clarke Willson from the University Archives. You can navigate page by page and view metadata. Handwriting transcriptions haven't been added to the DSpace record, so you won't see them (yet).

Link to an Image Viewer

You or a friendly co-worker can create web content like this.

Pilgrim's Flask with Saint Menas

This flask from the Hallie Ford Museum of Art collection honors Saint Menas, an Early Christian martyr from Egypt. Gift of Mark and Janeth Hogue Sponenburgh

View Online

The "View Online" link opens an image viewer. The image viewer offers functionality like pan-zoom and a panel with descriptive metadata. It also provides attribution, in this case for HFMA and Willamette, as well as rights information.

Steps to Create the Link

This example uses a pre-configured Mirador image viewer that's found on our main DSpace server. The library provides this as a service, but remember, the image viewer could be located anywhere.

The link must include a query parameter named "manifest". See bold text after the "?".

The text in bold provides the URL for the IIIF Manifest that DSpace generates for the item. You can easily get the manifest URL from the DSpace record. Perhaps the easiest way is to copy it from the DSpace viewer's "Share Link" option, as shown below.

Here's a working sample link:

https://digitalcollections.willamette.edu/mirador/viewer/index.html?manifest=https://digitalcollections.willamette.edu/server/iiif/5afa4ff2-38b0-498c-920a-6707cac59f08/manifest

Scaled and Cropped Images

You can use the IIIF Image API to retrieve scaled images that can be added directly into a Web publication. Some organizations, like the Getty Museum, use IIIF throughout their Web presence.

The image below is from the HFMA Asian Art collection (see DSpace record).

This is a rendering of the image, scaled to a width dimension of 467 pixels.


https://digitalcollections.willamette.edu/image-server/iiif/2/feeb86ba-be97-48bd-aff0-25c0ad9e01dc/full/467,/0/default.jpg

Here's the same image, scaled to a width dimension of 180 pixels.


https://digitalcollections.willamette.edu/image-server/iiif/2/feeb86ba-be97-48bd-aff0-25c0ad9e01dc/full/180,/0/default.jpg

This is an image detail selected from the entire image.


https://digitalcollections.willamette.edu/image-server/iiif/2/feeb86ba-be97-48bd-aff0-25c0ad9e01dc/350,800,360,380/max/0/default.jpg

If you like, copy the URLs shown into your browser and play with the parameters.

Annotating Images

This is a simple example of image annotations rendered in the Mirador viewer.

The navigation panel is closed by default and the annotation highlights appear only when selected. So to see the text annotations and image highlights you'll need to open the navigation panel using the hamburger icon at the upper left. You'll notice that the panel includes a text or message icon. The icon has an orange dot that tells you there's something to see. Click on the icon icon to see the annotations for "Waller Hall" and "Oregon State Capitol." You can toggle between these annotations. The colors of the bounding boxes on the image will change to indicate each building.

The viewer above shows an actual record in DSpace. Here's a video showing how I made it using an annotation plugin for Mirador. After creating the annotations I added them to the image's metadata in DSpace. Mirador then uses the IIIF protocol to retrieve the image annotations and render them in the viewer. (The DSpace annotation server feature is under review and scheduled for the 7.5 release.)

Comparing Images

Side by side image or manuscript comparisons are supported by IIIF viewers like Mirador. This example compares single images from the Halllie Ford Musuem of Art Asian Collection and the Art Institute of Chicgo. The metadata for each tells you more about what each image represents. Zoom in for detailed comparison.

Just for fun, here's an image comparison of a related bodhisattva from the Getty.

Layering Images

I'm not providing a local example of this for now, but see this example of a manuscript in France from which illustrations were cut. In time, the stolen images found their way to another library. Both libraries support IIIF. This project reunites the images and the original manuscript inside the IIIF viewer. To see the restoration, click on "Afficher les miniatures."

Manuscript reconstruction seems to be one of the classic IIIF applications. I don't know how many examples exist today. But obviously there are lots of other ways to use image layering (and not all of them are pranks).

Book View

DSpace is configured to always start with the individual page view while allowing you to switch to the book view in the Mirador display panel. This example is different. It shows a scrapbook from the Pacific Northwest Artists Archive, created by the artist and photographer Myra Albert Wiggins, in a special embedded viewer that uses the book view by default.

Try paging forward through the scrapbook. You will see pages opened side by side. Each pagination step jumps to the next two pages.

In the past, several rare books in the library collection were scanned as page images only and copied to a Web location that provides a simple page turner. See Heures de Simon Vostre a l'usage de Langres for one example. This was a quick and easy solution at the time. But like any web page, it's fairly transient solution. DSpace provides a new way to preserve and provide access to these documents.

Search

When we digitize documents, either in-house or using a vendor, we generate ALTO files for each page image. The ALTO files are later indexed by DSpace to support search and word highlighting. Not every historical document in DSpace is searchable, but most are.

Because the search feature is native to IIIF and part of the DSpace IIIF integration, it is also available in the embedded viewer.

In the example below, open the navigation menu and try a search in the Suffrage Era Scrapbook. If your term is found, you can navigate to pages where the word appears. Words will be highlighted. Since the text is small, you may want to go full screen for easier viewing.

One current limitation of search when using the Mirador viewer is inaccurate word highlighting when viewing documents in book mode.

Interesting Tools

Starting a list of interesting tools:

November 1, 2022