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

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

space

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

http://projectmirador.org


Technical Underpinnings

Technical Stack Specifications

Content Repo.

Content Repo.

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

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

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




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

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

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

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

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

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

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

https://projectmirador.org

https://bit.ly/2pT3lHC

http://storiiies.cogapp.com/

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

https://collections.library.utoronto.ca/

https://purl.stanford.edu/qm670kv1873/iiif/manifest

http://creativecommons.org/licenses/by-sa/3.0/

https://iiif.library.utoronto.ca/presentation/v2/fisher2:137/manifest.json

http://go.utlib.ca/cat/4719898


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)

https://drive.google.com/open?id=1ESaRkgyKONfPFwPZ3Xi8DDrF0RCxV9h9














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

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





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





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

http://tiny.cc/on0bez

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

https://projectmirador.org/demo/

http://universalviewer.io/

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

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}


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

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

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

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




● 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.




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)

https://iiif.library.utoronto.ca/image/v2/chamberlin:Chamberlin_k_0228/full/full/0/default.jpg



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

https://iiif.library.utoronto.ca/image/v2/chamberlin:Chamberlin_k_0228/full/full/0/default.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)

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)

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)

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

https://archive.org/




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

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

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

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

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

https://wellcomelibrary.org/iiif/b14658197/manifest?manifest=https://wellcomelibrary.org/iiif/b14658197/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

https://library.harvard.edu/digital-collections

https://digitalcollections.library.harvard.edu/catalog/990098478110203941_FHCL.HOUGH:874143?utm_source=HLWebsite&utm_medium=website&utm_campaign=HLwebsite

https://digitalcollections.library.harvard.edu/catalog/990098478110203941_FHCL.HOUGH:874143?utm_source=HLWebsite&utm_medium=website&utm_campaign=HLwebsite

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

https://iiif.biblissima.fr/collections/

https://docs.google.com/spreadsheets/d/1apQKFkfBV89BvycaBPN6v-LjeaKaVVMaMUsY6L4KRJo/edit#gid=0

https://docs.google.com/spreadsheets/d/1apQKFkfBV89BvycaBPN6v-LjeaKaVVMaMUsY6L4KRJo/edit#gid=0



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

https://iiif.biblissima.fr/collections/



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

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

https://digital.bodleian.ox.ac.uk/manifest-editor

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

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/

https://samvera.org/

https://islandora.ca/islandora8

https://www.resourcespace.com/

https://omeka.org/s/

https://minicomp.github.io/wax/about/


https://projectmirador.org/demo/

http://www.collectionspace.org/

https://invenio-software.org/products/framework/

https://www.collectiveaccess.org/


Thank you

Questions?

Kelli - [email protected]

Rachel - [email protected]

mailto:[email protected]

mailto:[email protected]

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

Documents