Tutorial 2: Mirador as a personal research tool

Participants will learn how to complete your own Mirador install, the benefits of doing so, and how to customize common configuration options that researchers use.

Installing Mirador

From the Mirador website (https://projectmirador.org) you could click the "Code" link in the upper right-hand corner

This would take you to a Github project, which might seem a little confusing at first - particularly if you're not used to navigating code repositories.
For the purposes of this tutorial, we're going to use the last production release (Mirador 2.7.0), so the direct link to use is: https://github.com/ProjectMirador/mirador/releases/tag/v2.7.0

Mirador continues to be updated regularly. The project is currently in Beta for Mirador version 3. While there are some great improvements to the project in version 3, not all of the version 2 features have been moved over. We hope to see a production release of version 3 in the year ahead.

From the Mirador 2.7.0 download page, download the "build.zip" file.
Unzip and you should have a folder entitled "build" containing an "example.html" file and a folder entitled "mirador"

The "mirador" folder contains all of the code and additional material that makes Mirador work under the hood. If you're interested in that code, by all means dig in. For our purposes today, though, we are only going to work with the "example.html" file.
At this point, though, you have Mirador installed. Let's open the "example.html" file in a browser and you'll see something that looks like this:

For the rest of this tutorial, we are going to be editing HTML in a text editor. NB: This is different from a word processor, like Microsoft Word, and allows us to edit and save code without any additional formatting. A list of common, free, text editors can be found at the bottom of this tutorial.

Configuring Mirador

First, make a copy of the "example.html" file - maybe naming it "test.html" - and save in the same "build" folder. We'll use this "test.html" file to see how small changes in the code impact Mirador - but we won't worry about messing up our main "example.html" file in the process.

For this part of the tutorial, we'll walk through how small changes in the HTML file impact the layout and content in our local Mirador instance. We will explore:

how to specify the number of workspace windows that are open by default
how to change what pre-loaded content is saved and available

Basic configuration options we will cover:

layout: number of windows in the Mirador workspace
data: the list of manifests that populate the load window
windowObjects: how to add content to windows in the workspace so that they open pre-populated

Layout

layout: "1x1",

This option specifies the number of rows, and windows per row, that Mirador has open by default.
- "1 x 1" is a single window
- "2 x 3" would give you two rows, each with three windows - as an example

Data

data: [
           { manifestUri: "https://purl.stanford.edu/bz689hb4817/iiif/manifest", location: "Stanford University"},
           { manifestUri: "https://iiif.lib.harvard.edu/manifests/ids:20245835", location: "Harvard University"}
       ],

Here, we list the manifests for each object we want available in our load window. The most important part is the manifestUri (the URL of the IIIF manifest for the object), with location being a text string that you can determine for your own context.

WindowObjects

windowObjects: [
	 		{
	 			        	"loadedManifest": "https://purl.stanford.edu/bz689hb4817/iiif/manifest",
	 			        	"viewType" : "ImageView", 
	 			        	"canvasID": "https://purl.stanford.edu/bz689hb4817/iiif/canvas/image_1",
	 			        	"bottomPanel" : false
	 			        	//"sidePanel" : false,
	 			        	//"availableViews" : ['ThumbnailsView', 'ImageView', 'BookView']
	 			        	//"overlay" : false
	 			          }
	],

This specifies the content that will appear in the workspace window (or windows) when Mirador is first opened. The main elements are:
- which manifest to load
- which canvas (or page, or image) within that manifest to display
- which kind of view to start with

Once we have mastered these three elements, we can build fairly complicated displays pulling in content from around the world.

Within our "build" folder, it is possible to have many .html files for various projects, examples, teaching tools, etc.

Creating your own Replayable Collection

Add the manifests you want from a variety of sources
Configure how you want Mirador to open
In the example below, I have added manifests from five different repositories for manuscripts containing Dante's Divine Comedy. I have also used the "openManifestsPage" property to force the load window to appear first, instead of a viewing window.

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="mirador/css/mirador-combined.css">
    <title>Mirador Viewer</title>
    <style type="text/css">
     #viewer {
       width: 100%;
       height: 100%;
       position: fixed;
     }
    </style>
  </head>
  <body>
    <div id="viewer"></div>

    <script src="mirador/mirador.min.js"></script>
    <script type="text/javascript">

     $(function() {
       myMiradorInstance = Mirador({
         id: "viewer",
         layout: "1x1",
         openManifestsPage: true,
         buildPath: "mirador/",
         data: [
           { manifestUri: "https://purl.stanford.edu/bz689hb4817/iiif/manifest", location: "Stanford University"},
           { manifestUri: "https://iiif.lib.harvard.edu/manifests/ids:20245835", location: "Harvard University"},
           { manifestUri: "https://iiif.lib.harvard.edu/manifests/ids:20245836", location: "Harvard University"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b10500687r/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b84268074/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52507492w/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52507451s/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52507439j/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b525074561/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52000462v/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b55013333r/manifest.json", location: "BNF"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Ross.487/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Urb.lat.365/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Urb.lat.367/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Borg.lat.338/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Borgh.365/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Cappon.263/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Cappon.266/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Urb.lat.378/manifest.json", location: "BAV"},
		   { manifestUri: "https://www.e-codices.unifr.ch/metadata/iiif/fmb-cb-0057/manifest.json", location: "e-codices"},
		   { manifestUri: "https://www.e-codices.unifr.ch/metadata/iiif/fmb-cb-0056/manifest.json", location: "e-codices"},
		   { manifestUri: "https://www.e-codices.unifr.ch/metadata/iiif/fmb-cb-0055/manifest.json", location: "e-codices"}
         ],
         windowObjects: [],
         annotationEndpoint: {
           name:"Local Storage",
           module: "LocalStorageEndpoint" }
       });
     });
    </script>
  </body>
</html>

Getting Fancy

If you want to guide a viewer into your content, the example below might be of some help. It is basically the same file as above, used for the Dante Collection example, but with a few configuration tweaks:

I have removed the "openManifestsPage" configuration, and set "layout" to be "1x3". This forces Mirador to open with three windows.
I have also added three "windowObjects" so that the instance is populated by three objects: the front and back of one of the Harvard Dante leaves, and the Stanford Dante leaf.

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="mirador/css/mirador-combined.css">
    <title>Mirador Viewer</title>
    <style type="text/css">
     #viewer {
       width: 100%;
       height: 100%;
       position: fixed;
     }
    </style>
  </head>
  <body>
    <div id="viewer"></div>

    <script src="mirador/mirador.min.js"></script>
    <script type="text/javascript">

     $(function() {
       myMiradorInstance = Mirador({
         id: "viewer",
         layout: "1x3",
         buildPath: "mirador/",
         data: [
           { manifestUri: "https://purl.stanford.edu/bz689hb4817/iiif/manifest", location: "Stanford University"},
           { manifestUri: "https://iiif.lib.harvard.edu/manifests/ids:20245835", location: "Harvard University"},
           { manifestUri: "https://iiif.lib.harvard.edu/manifests/ids:20245836", location: "Harvard University"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b10500687r/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b84268074/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52507492w/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52507451s/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52507439j/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b525074561/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b52000462v/manifest.json", location: "BNF"},
		   { manifestUri: "https://gallica.bnf.fr/iiif/ark:/12148/btv1b55013333r/manifest.json", location: "BNF"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Ross.487/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Urb.lat.365/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Urb.lat.367/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Borg.lat.338/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Borgh.365/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Cappon.263/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Cappon.266/manifest.json", location: "BAV"},
		   { manifestUri: "https://digi.vatlib.it/iiif/MSS_Urb.lat.378/manifest.json", location: "BAV"},
		   { manifestUri: "https://www.e-codices.unifr.ch/metadata/iiif/fmb-cb-0057/manifest.json", location: "e-codices"},
		   { manifestUri: "https://www.e-codices.unifr.ch/metadata/iiif/fmb-cb-0056/manifest.json", location: "e-codices"},
		   { manifestUri: "https://www.e-codices.unifr.ch/metadata/iiif/fmb-cb-0055/manifest.json", location: "e-codices"}
         ],
         windowObjects: [
	 		{
	 			        	"loadedManifest": "https://purl.stanford.edu/bz689hb4817/iiif/manifest",
	 			        	"viewType" : "ImageView", 
	 			        	"canvasID": "https://purl.stanford.edu/bz689hb4817/iiif/canvas/image_1",
	 			        	"bottomPanel" : false
	 			        	//"sidePanel" : false,
	 			        	//"availableViews" : ['ThumbnailsView', 'ImageView', 'BookView']
	 			        	//"overlay" : false
	 			          },
	 		  	{
	 		  	        	"loadedManifest": "https://iiif.lib.harvard.edu/manifests/ids:20245835",
	 		  	        	"viewType" : "ImageView", 
	 		  	        	"canvasID": "https://iiif.lib.harvard.edu/manifests/ids:20245835/canvas/canvas-20245835.json",
	 		  	        	"bottomPanel" : false
	 		  	        	//"sidePanel" : false,
	 		  	        	//"availableViews" : ['ThumbnailsView', 'ImageView', 'BookView']
	 		  	        	//"overlay" : false
	 		  	          },
  	 		  	{
  	 		  	        	"loadedManifest": "https://iiif.lib.harvard.edu/manifests/ids:20245836",
  	 		  	        	"viewType" : "ImageView", 
  	 		  	        	"canvasID": "https://iiif.lib.harvard.edu/manifests/ids:20245836/canvas/canvas-20245836.json",
  	 		  	        	"bottomPanel" : false
  	 		  	        	//"sidePanel" : false,
  	 		  	        	//"availableViews" : ['ThumbnailsView', 'ImageView', 'BookView']
  	 		  	        	//"overlay" : false
  	 		  	          }
         ],
         annotationEndpoint: {
           name:"Local Storage",
           module: "LocalStorageEndpoint" }
       });
     });
    </script>
  </body>
</html>

Next Steps

You can continue to build out your own collections and displays locally, for your own research purposes. If you want to share these with a broader audience, you'll need to install Mirador on a web server. That is beyond the scope of today's tutorial, but if you want to pursue this you can reach out to the IIIF and Mirador communities for tips and pointers.

Resources

For more information

In addition to the IIIF community (see Tutorial 1 for more info), there is a robust community associated with the Mirador project:
- website: https://projectmirador.org/
- mailing list: https://groups.google.com/forum/#!forum/mirador-tech
- twitter: @miradorviewer

Text Editors (a small sampling)

Atom: https://atom.io/
Sublime Text: https://www.sublimetext.com/
TextMate: https://macromates.com/

PreviousTutorial 1: IIIF, Mirador, and Book History Content NextTutorial 3: Teaching with IIIF and Mirador

Last updated 5 years ago

Was this helpful?