IIIF Linking HTML

Part of IIIF Pages

Linking HTML Page to IIIF Manifest

Humans are most likely to consume metadata as web pages in collection catalogues. In these situations IIIF data will usually be presented using an embedded IIIF viewer such as Mirador or Universal Viewer. If a zoomable image is all that is required then the OpenSeadragon viewer can be used on its own to present just the Image API, the metadata being presented in the rest of the catalogue page.

When viewers are used to embed resources in pages the user may not be aware that there is a IIIF resource associated with this specimen at all and therefore not aware that the image data could be used in other applications. It is therefore recommended to include a draggable IIIF icon as part of the metadata for the specimen. Clicking on the icon will open the IIIF resource in a new window or tab. Dragging the icon onto a suitable IIIF viewer adds it to that viewer. Figure 3 and Figure 4 give examples of the use of such an icons in the RBGE herbarium catalogue and JACQ systems.

From the coding perspective such icons are simple to add. An example of the HTML code used is a follows

<a target="_blank" href="mirador/?manifest=https://iiif.rbge.org.uk/herb/iiif/E00008781/manifest">
  <img 
      src="logo-iiif.png" 
      alt="IIIF Manifest"
      title="Click to use IIIF viewer or drag'n'drop to add to open viewer"
      draggable="true"
   >
</a>

Note that the HTTP URI in the href of the link must be a link to a viewer page that accepts the ?manifest= parameter. This means the host institution needs to provide a IIIF Viewer instance or access a publicly available instance.

Recommendation: If an institution has implemented IIIF and has an online catalogue it should include draggable IIIF icons of this form on its catalogue web pages.

Linking IIIF Manifest to HTML Page

The seeAlso property in the IIIF Manifest is used to link to human readable data for the specimen. The CETAF ID makes a good link to the catalogue page for the specimen.

 "seeAlso": [
    {
      "id": "https://data.rbge.org.uk/herb/E00588402#html",
      "type": "Text",
      "label": {
        "en": [
          "Catalogue page for this specimen."
        ]
      },
      "format": "text/html"
    },
   ...    
  ],

Recommendation: Include a seeAlso resource in the Manifest resource object for the specimen with the id set to the CETAF ID for the specimen. Set the type property to “Text” and the format to “text/html”. Append the anchor #html to the end of the URI.

Recommendation: Include an English language label for the link plus labels in as many other languages as appropriate for the collections location.

Back to IIIF Home