Configuring Viewers

Now that we've spent the day learning about the IIIF Presentation API and creating our own manifests, we thought it would fun to do a deeper dive on the use of IIIF Image Viewers.

Specifically, we want to show you how we can not only add our manifests to existing viewers, but we can actually highly customize these viewers in a way tailored to our specific needs.

For example:

If you're running museum exhibit, you might want a viewer that provides a guided curation of specific images and limits how the user can interact with the collection
If you're building a research environment, you might want to use the viewer different to allow users to control every aspect of their environment.
If you're trying to illustrate a research outcome, you might want to bring the users to a very specific place within a set of images.

There are many options here. We're going to focus on two highly customizable viewers: Mirador and Universal Viewer. First, we're going to look at how to embed a viewer in your own project (to do this, we'll continue to use or "Custom Image Viewers" projects). Then we'll walk through several of the configuration option. Then we'll turn this into a work period, where you can start embedding a viewer into your project and adjust the configuration settings as needed. We'll come around and help you customize your project any way you want.

Viewers not covered

Tify, IIIF Curation Viewer and Diva.js all have videos and demo pages to play with at https://iiif.io/guides/using_iiif_resources/#tools-for-viewing-manifests.

Mirador

Embedding Mirador

Embedding mirador within a webpage (either as the entire web page or a component within the web page) is pretty easy.

As you can see the example below, you just need to reference the Mirador code library and then create a <div> where Mirador can be instantiated.

<html>
  <head>
    <script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
  </head>
  <body>
<div id="mirador"></div>
</body>
</html>

If you're looking to embed mirador as a smaller piece within another website there multiple ways do this.

One of the simplest ways to do this is to embed the mirador page as an <iframe> within your larger page.

Consider how Stanford library employs this method for some of their catalogue pages.

https://exhibits.stanford.edu/black-at-stanford/catalog/vp553qk8514

Here's what such an iframe embed might look like:

<html>
  <head>
  </head>
  <body>
    <div style="width: 1000px; margin: auto;">
      <iframe style="width: 1000px; margin-top: 10vh; height: 80vh" src="https://embed.stanford.edu/iframe?url=https://purl.stanford.edu/vp553qk8514&_v=1716914492&hide_title=true"/>
    </div>
  </body>
</html>

But you'll notice that because they've restricted the window size of the mirador view port, they've also decided to "configure" mirador in some specific ways:

they configured the viewer to take the viewer directly to a specific canvas, rather than to the manifest loading page
they closed by default some of the information panels in order to remove any unnecessary visual clutter

These options can be configured using the Mirador Configuration Options.

Configuring Mirador

A full and very long set of configuration options is available here

Using these settings, you can control

how Mirador opens
the color scheme
institutional branding

Before we break out into a work period, have a look one example of how I've implemented some customizations.

https://codepen.io/jeffreycwitt/pen/vYRGdeL

Let's look closer at some of the configuration options implemented here:

<html>
  <head>
    <script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
  </head>
  <body>
    <div id="mirador"></div>
    <script>

var miradorInstance = Mirador.viewer({
  id: "mirador",
  selectedTheme: 'dark', // i've chosen the light theme, you could try dark
  window: {
    defaultView: "scroll", 
    sideBarOpen: true, // try changing to false
    sideBarPanel: "canvas",
    views: [
      { key: "single", behaviors: ["individuals", "paged"] },
      { key: "book", behaviors: ["individuals"] },
      { key: "scroll", behaviors: ["continuous"] },
      { key: "gallery" }
    ]
  },
  windows: [
    // {
    //   manifestId: "https://scta.info/iiif/plaoulcommentary/sorb/manifest", //add a manifest here that you want to miror to display onload
    //   canvasId: "http://scta.info/iiif/sorb/canvas/S2r" //add a canvas here within the above manifest that you want mirador to open on load
    // },
    {
      manifestId: "https://iiif.harvardartmuseums.org/manifests/object/299843",
      canvasId: "https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-18737483"
    }
    // if you want into open another canvas, add another block here
  ],
  // list any of the manifest you want your mirador instance to load; any manifest listed above must be included below
  catalog: [
    {
      manifestId: "https://iiif.harvardartmuseums.org/manifests/object/299843"
    },
    {
      manifestId: "https://scta.info/iiif/plaoulcommentary/sorb/manifest"
    }
    // add more manifests here if desired
  ]
});
      </script>
</body>
</html>

Here's an involved guide on how to "theme mirador"

And here are two example configuration recipes

Work Period

For this exercise, imagine that your in charge of gallery exhibit kiosk or a library digital catalogue page.

Your job is to create Mirador viewer instance into your myViewer that is in "kiosk" mode

It should open to a specific image/canvas within a manifest
Users should be limited to zooming and exploring this image only
Pop up informational windows should be disabled
The color and font theming should match your institutional branding

If you can get this working, then we can working on serving this page of http, and "embedding" it within your myViewer project via the <iframe> method.

Last modified by dnoneill 2024-06-06 22:24:25

Created by Jeffrey C. Witt 2024-05-22 16:32:14

Using/Embedding/Configuring IIIF Viewers