If you’re a developer wishing to use Europeana content with International Image Interoperability Framework (IIIF) services, this post guides you through this process. From first querying the API, to presenting images on a web page using a rich media viewer, find out how simple it is to make the most of IIIF.
Last month saw the introduction of a set of new metadata fields into the Europeana Data Model (EDM), designed to give our data providers a way to supply explicit instruction about where to find their IIIF service and how to use it for their images. This gives us, and other developers using our API, a standardized way of detecting when an item in Europeana is accessible over a IIIF service.
When a data provider supplies this IIIF-related metadata for relevant items ingested into Europeana, those items will be presented on our portal with a feature-rich IIIF viewer, with no further intervention required on our part.
Let’s take a look at an example of an item from the University of Fribour: “St. Gallen, Kantonsbibliothek, Vadianische Sammlung, VadSlg Ms. 342 : Vaticinia de pontificibus (Prophecies about the Papacy)”.
This item is a manuscript of an “illustrated work of anti-papal propaganda” with 31 images used to present its pages. Before this item was presented through IIIF, we were only able to display a single thumbnail for it.
Courtesy of the new IIIF metadata in the EDM representation of this item, we are now able to present the full collection of 31 images representing this manuscript, all together in one browsable viewer.
This provides a far richer viewing experience for our users, and a more useful representation of this manuscript.
So, how did we do that?
The first step was to request the item’s metadata in JSON from the Europeana REST API, for which you will need an API key. To get this item, issue a GET request to the Record API:
Here’s an extract of what we get back from the API:
At this point you may wish to refer to the formal specification for the metadata fields added to EDM (PDF) to support IIIF to get the full story, but for our purposes all we needed was the web resource properties named “svcsHasService” and “dctermsIsReferencedBy”. When both of those are present, then we know that the latter is a URI to the IIIF manifest, which is all that is needed by the IIIF viewer that we use.
For a viewer, we chose Leaflet.js with the Leaflet-IIIF plugin. As we already used Leaflet for maps, Leaflet-IIIF was a natural choice to accommodate the display of high-resolution, zoomable IIIF images.
Requesting the manifest gets us a JSON-LD description of this collection of images using the IIIF Presentation API. However, as Leaflet-IIIF only implements the IIIF Image API for the description of individual images, not the Presentation API for manifests of more than one image, we added in a little JavaScript of our own to fetch the manifest and parse it for canvases to show in the viewer.
We pass the manifest URI to the viewer, et voilà!
In full, the bare minimum HTML and JavaScript needed to display this manifest would look like:
In summary, if you want to start providing a richer viewing experience for images where a IIIF service is advertised in the EDM, all you need to do is choose a IIIF-compliant viewer, pass it these new data fields extracted from the API response, perhaps with a little pre-parsing if the viewer does not natively handle manifests, and you’re done. It really is that simple.
We hope that many of you using Europeana’s REST API to reuse our wealth of cultural heritage will join us in taking advantage of the images that already have IIIF metadata, and those that we look forward to being enriched with it in future.
Further reading and resources