kelli babcock, digital initiatives librarian digital ... · 1. understand what iiif is, how it is...

Information Technology Serviceshttp://its.library.utoronto.ca

Building Interoperable Digital Collections with the

International Image Interoperability Framework (IIIF)

Rachel Di Cresce, Digital Projects LibrarianKelli Babcock, Digital Initiatives Librarian

Friday, October 25th from 1-3Room 116, Bissell

OPEN THIS LINK TO FOLLOW ALONG TODAY:https://tinyurl.com/yydaollr

About Us

Kelli is a Digital Initiatives LibrarianRachel is a Digital Project Librarian

We work in the Information Technology Services department at U of T Libraries in Robarts alongside a team of developers and network services staff. Our department does IT stuff for the library.

https://heritage.utoronto.ca/islandora/object/heritageutarms%3A7626

About UsWe work on projects and services that have to do with digital projects and digital collections. Here are a few of those projects.

These projects make use of an important standard called the International Image Interoperability Framework (IIIF).We’re going to teach you about this standard.

Learning Outcomes

Part 1 (~ 1 hour)

1. Understand what IIIF is, how it is used, and why it is important for digital collection interoperability

2. Evaluate when it makes sense to use IIIF for digital collections

Part 2 (~ 1 hour)

3. Edit IIIF Image API URI parameters4. Load IIIF manifests within IIIF viewers5. Explore IIIF manifest Presentation API6. Analyze IIIF-enabled digital collection platforms

Part 1Explaining IIIF

How do you interact with Digital Image Collections?

Digital Collections

● Unique UI● Separate● No single point of access

By Leaflet - Own work, CC BY-SA 3.0

What is IIIF

● Standards/guidelines○ serving or viewing images and portions of images reliably,

uniformly, across multiple repositories○ Separation of storage and access

● APIs○ Application Programming Interface○ Instructions for how to ask for things○ Integrated into technology

● Community○ community and technical groups

Why does this matter?

• Uniform and rich access to image-based resources hosted around the world

• Support interoperability between image repositories (platform agnostic)

• Lighten the load on image servers when serving extremely high resolution images over the web

• To develop, cultivate and document shared technologies, such as image servers and web clients, that provide a world-class user experience in viewing, comparing, manipulating and annotating images (iiif.io)

Examples of IIIFLet’s explore an example of

IIIF in action.

Using a IIIF image viewer

called, Mirador, and IIIF, we

can compare images from

different institutions in one

From: https://projectmirador.org/demo/

Technical Underpinnings

Technical Stack Specifications

Content Repo.

IIIF Image Server

IIIF Image Client

(Viewer)Image API

Pres. API

Auth. API

Search API

Image Delivery

Structure/Layout

Access Control

Search within IIIF content

IIIF Image API

● Call an image, and pieces of images from servers

IIIF Image API continued

Example Object:

https://iiif.library.utoronto.ca/image/v2/anatomia:RBAI035_0001/full/full/0/default.jpg

Leaflet Cropping Tool:

https://bl.ocks.org/mejackreed/6936585f435b60aa9451ae2bc1c199f2

IIIF Presentation API

● Information on how the object should be presented

● Metadata about the object

● Standardized view across IIIF viewers

IIIF Presentation API BasicsManifest● Structure and properties of the digital representation of

the object

Sequence● Order of the views of the object - can be many

Canvas● Virtual container providing frame of reference for

layout and view of a digital object

Content● Resources associated with a canvas (images/text)

https://iiif.io/api/presentation/2.1

IIIF Presentation API: The Manifest An example manifest (or two):

UofT https://iiif.library.utoronto.ca/presentation/v2//anatomia:RBAI035/manifest

E-Codices https://www.e-codices.unifr.ch/metadata/iiif/saa-0428/manifest.json

The Image and Presentation API Together

Image courtesy of Rob Sanderson, The J. Paul Getty Trust.

What else can it do?

Fun Examples● Reconstructing Objects and Collections:

○ Biblissima: https://demos.biblissima.fr/chateauroux/demo

○ Otto Ege: https://projectmirador.org

● Teaching Aid

○ Harvard: https://bit.ly/2pT3lHC

● Storytelling with Annotation and IIIF

○ http://storiiies.cogapp.com/

● Image tour tool

○ Digrati: https://bit.ly/32L1cfY

A few notes on Access

IIIF Community

● 50+ Consortium members● Librarians, administrators,

developers, designers● Interest and Working

Groups● Conferences, Calls

IIIF at University of Toronto

Collections U of T - https://collections.library.utoronto.ca/…

Since 2015, UTL has been incorporating IIIF with the Collections U of T repository:

As a IIIF-enabled repository, Collections U of T images are ready to be shared and used for collaboration across the world. For example, manifest URLs can be plugged into any IIIF viewer in any repository for research, analysis and image comparison: a Book of Hours manuscript from UTL can now be compared alongside one from Stanford.

Mirador viewerintegration

Publication of Collections

U of T IIIF manifests

Collections U of T IIIF manifests are available at https://iiif.library.utoronto.ca/presentation/v2/collections

Image: Left - a page view of a Walters Art Museum manuscript (IIIF manifest URL: https://purl.stanford.edu/qm670kv1873/iiif/manifest / Walters Art Museum, W.582, fol 14r, © 2011 Walters Art Museum, used under a Creative Commons Attribution-ShareAlike 3.0 license: http://creativecommons.org/licenses/by-sa/3.0/). Right - a Thomas Fisher Rare Book Library manuscript (IIIF manifest URL: https://iiif.library.utoronto.ca/presentation/v2/fisher2:137/manifest.json / The Thomas Fisher Rare Book Library, University of Toronto, MSS 03024. http://go.utlib.ca/cat/4719898.)

IIIF server (Loris)

integration

● Began in 2014● UTL digital

collections● ~200,000

images● ~5TB of data● tiff / jp2 images● MODS xml

metadata

IIIF at University of Torontohttps://drive.google.com/open?id=1ESaRkgyKONfPFwPZ3Xi8DDrF0RCxV9h9

IIIF server (Loris)

integration

● Islandora ○ Fedora (repository)○ Drupal (front end)○ Solr (search)

● MongoDB (stores the manifests)

● Loris (IIIF image server)

IIIF server (Loris)

integration

IIIF viewer

integration

https://anatomia.library.utoronto.ca/islandora/object/anatomia%3ARBAI077_0031

IIIF server (Loris)

integration

Click “change layout”

and add a new slot

https://anatomia.library.utoronto.ca/islandora/object/anatomia%3ARBAI077_0031

IIIF server (Loris)

integration

Click “change layout”

and add a new slot

IIIF server (Loris)

integration

https://iiif.archivelab.org/iiif/mma_right_profile_of_the_skull_360712/manifest.json

Enter IIIF manifest URL

IIIF server (Loris)

integration

Click on the object

IIIF server (Loris)

integration

Publishing our IIIF

manifests

https://iiif.library.utoronto.ca/presentation/v2/anatomia:RBAI077/manifest

IIIF server (Loris)

integration

Collaborating with

other IIIF libraries

https://italian-paleography.library.utoronto.ca

IIIF: a recap

IIIF server (Loris)

integration

● What are the two main IIIF APIs called?

IIIF: a recap

IIIF server (Loris)

integration

● What are some advantages of using IIIF?

IIIF: a recap

IIIF server (Loris)

integration

● Do you have any questions about what IIIF is and why you might use it?

Note: A JSON viewer might be helpful

The IIIF APIs provide many of their responses using the JSON format so it is useful to have a viewer which will format this response to make it easier to read. There is a similar plugin for Firefox but as this workshop also uses other Chrome plugins it is recommended to use Chrome.

You can download a JSON Viewer extension for Chrome: http://tiny.cc/on0bez

Full link: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc

Next up: Part 2Interacting with IIIF

Let’s do some IIIF things!

You will:

1. Edit IIIF images with the IIIF Image API URI parameters

2. Discover IIIF digital collections and learn how to compile images of interest in IIIF

viewers: https://projectmirador.org/demo/ & http://universalviewer.io/

3. Explore IIIF Presentation API manifests with the Bodleian Libraries IIIF Manifest Editor -

https://digital.bodleian.ox.ac.uk/manifest-editor/#/?_k=qhhwxa

Note! We are not going to teach you how to build a local IIIF server because that would take

longer than 2 hours BUT there is documentation online on how to do that if you are interested

+ feel comfortable working in command line:

https://iiif.github.io/training/iiif-1-day-workshop/image-api/setting-up-cantaloupe.html

IIIF Image API

Remember: The Image API provides for a standardized way to request

and deliver images. Having this standardization allows both browser and

server applications to reuse software and provide a consistent experience

for requesting images.

IIIF Image API

What does this mean for a user?

IIIF Image API

What does this mean for a user? You can edit images by modifying the

Image API URI!

IIIF Image API - Image Request URI Syntax

2.1 The IIIF Image API URI for requesting an image must conform to the following URI Template:{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

https://iiif.io/api/image/2.1/#uri-syntax

IIIF Image API - Image Request URI Syntax

2.1 The IIIF Image API URI for requesting an image must conform to the following URI Template:{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

https://iiif.io/api/image/2.1/#uri-syntax

This means that users can manipulate images with the following URI parameters:{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

IIIF Image API - try it out

You can use these Image API tools to explore modifying the Image API URI parameters:

1. https://tomcrane.github.io/the-long-iiif/image-api.html

2. https://www.learniiif.org/image-api/playground

1. https://tomcrane.github.io/the-long-iiif/image-api.html

● Go to this URL ○ (tool by Tom Crane)

● Click through the buttons○ You will see the URL

parameters change along with the image display

● Next, go to this URL (tool by Jack Reed, Stanford)

● Similar to the previous tool, except now you can enter your own values

● In the “Region” field, delete the text and enter “full”

● By entering “full” in the “Region” field, you can now view the whole picture

● You may wonder, outside of the tools we just explored, how to remember what values you can enter into the Image API’s URI parameters?

IIIF Image API - Cheat Sheet?

https://iiif.io/api/image/2.1/#image-request-parameters

IIIF Image API - things to remember...

The sequence of parameters in the URI must be in the order described below:{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

The order of the parameters is also intended as a mnemonic for the order of the operations by which the service should manipulate the image content. Thus, the requested image content is first extracted as a region of the complete image, then scaled to the requested size, mirrored and/or rotated, and finally transformed into the color quality and format. This resulting image content is returned as the representation for the URI. Image and region dimensions in pixels are always given as an integer numbers. Intermediate calculations may use floating point numbers and the rounding method is implementation specific. Some parameters, notably percentages, may be specified with floating point numbers. These should have at most 10 decimal digits and consist only of decimal digits and “.” with a leading zero if less than 1.0.

https://iiif.io/api/image/2.1/#image-request-parameters

IIIF Image API - try editing an image

Let’s use an image from Collections U of T: https://iiif.library.utoronto.ca/image/v2/chamberlin:Chamberlin_k_0228/full/full/0/default.jpg

^Open this URL in your browser (it may take some time to load)

Let’s use an image from Collections U of T: https://iiif.library.utoronto.ca/image/v2/chamberlin:Chamberlin_k_0228/full/full/0/default.jpg

Remember the URI parameters:

{scheme}:// https://

{server}/ iiif.library.utoronto.ca/

{prefix}/image/v2/

{identifier}/ chamberlin:Chamberlin_k_0228/

{region}/ full/

{size}/ full/

{rotation}/0/

{quality}. default.

{format} jpg

1. How would you modify the URL in your browser to reduce the size of the image by 50%

(tip: https://iiif.io/api/image/2.1/#size)

2. How would you modify the URL in your browser to flip the image upside down?

(tip: https://iiif.io/api/image/2.1/#rotation)

2. How would you modify the URL in your browser to make the image bitonal?

(tip: https://iiif.io/api/image/2.1/#quality)

IIIF Image API - in summary

● When in doubt, refer to the IIIF spec● Why would anyone need to do these things?- batch manipulate images- batch create thumbnails● primary purpose = common way of serving images:

○ consistent way to access image derivatives○ publish once, reuse often○ standard URL structure for accessing images○ standard package for information about an image○ supports rights○ supports tiling

Discover IIIF digital collections

Now that you’ve explored the Image API firsthand, let’s take a closer look at the Presentation API - starting with how to go about finding IIIF manifests.

It takes time to find IIIF manifests from across repositories. Improving this process is something the IIIF community is actively working on.

Single manifests:● Most digital collections that are IIIF-enabled will make their manifest

URLs publicly available - look for the button

Discover IIIF digital collections - examples

Internet Archive - https://archive.org/

● DOES NOT currently publicly display their IIIF manifests... but you can plug in any identifier into the

following URL path:

● https://iiif.archivelab.org/iiif/{identifier}/manifest.json

Wellcome Trust - https://wellcomelibrary.org/collections/digital-collections/

● Somewhat easier to find the manifest links - you can search collection, click “View Online”:

https://wellcomelibrary.org/item/b19643111#?c=0&m=0&s=0&cv=0&z=-0.4707%2C-0.0663%2C1.941

3%2C1.325

● Beneath the image viewer you will see a link for “IIIF Manifest”

● Sample manifest:

https://wellcomelibrary.org/iiif/b14658197/manifest?manifest=https://wellcomelibrary.org/iiif/b1465819

7/manifest

Harvard Digital Collections - https://library.harvard.edu/digital-collections

● User-friendly display of IIIF:

https://digitalcollections.library.harvard.edu/catalog/990098478110203941_FHCL.HOUGH:874143?utm_

source=HLWebsite&utm_medium=website&utm_campaign=HLwebsite

● Provides multiple IIIF-related links and tells user what you can do with them

● Sample manifest: https://iiif.lib.harvard.edu/manifests/drs:4074277

Aggregated manifests:● https://iiif.biblissima.fr/collections/

○ allows you to search across IIIF-compliant manuscripts and rare books dated before 1800 coming from many digital libraries in the world. It is a work in progress, the platform is updated and enriched on a regular basis

● https://docs.google.com/spreadsheets/d/1apQKFkfBV89BvycaBPN6v-LjeaKaVVMaMUsY6L4KRJo/edit#gid=0○ adhoc spreadsheet of top-level collections submitted manually by

institutions

Let’s take a closer look at● https://iiif.biblissima.fr/collections/

https://iiif.biblissima.fr/collections/search?q=rabbit

Discover IIIF digital collectionshttp://universalviewer.io

Explore IIIF Presentation manifest● Open this handy IIIF Manifest Editor tool:

https://digital.bodleian.ox.ac.uk/manifest-editor○ tool created by the University of Oxford’s Bodleian Library:

https://github.com/bodleian/iiif-manifest-editor

Explore IIIF Presentation manifest● Click “Open Manifest”....

Explore IIIF Presentation manifest● Copy this manifest into the “From URL” field:

https://iiif.library.utoronto.ca/presentation/v2/hollar:Hollar_k_2005/manifest

Explore IIIF Presentation manifestYour manifest will load in the Manifest editor

Explore IIIF Presentation manifest

IIIF-enabled digital collection platforms

Open Source IIIF Digital Collection Platforms

● https://samvera.org/● https://islandora.ca/islandora8● https://www.resourcespace.com/● https://omeka.org/s/● https://minicomp.github.io/wax/about/

Open Source IIIF Viewers

● http://universalviewer.io/● https://projectmirador.org/demo/

Examples of platforms that haven’t adopted IIIF yet (as of Oct. 24, 2019):

● http://www.collectionspace.org/ ● https://invenio-software.org/products/framework/● https://www.collectiveaccess.org/

Thank you

Questions?

Kelli - kelli.babcock@utoronto.ca

Rachel - rachel.dicresce@utoronto.ca

kelli babcock, digital initiatives librarian digital ... · 1. understand what iiif is, how it is...

Documents

the iiif image api

iiif in support of research

iiif, annotations, & discourse

iiif use case - archives: the indigenous digital archive

iiif presentation - europeanatech 2015

newspapers & iiif

digital marketing overview - kelli...

library of america iiif & the digital public · dpla hubs...

iiif at europeana, iiif conference, vatican, 2017

introduction à iiif

iiif oct 2016 - rijksmuseum

2015.08.03 - extending islandora for french renaissance...

paper iiif transfer pricing option - taxmann iiif...

newspapers, iiif, and alto

iiif annotation and discovery

dspace and iiif: effective use of iiif with dspace

iiif presentation api

iiif 2017 report

iiif: archival use cases

twitter for job seekers kelli staley digital librarian...