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.
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.
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
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.
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.
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.
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
twitter: @miradorviewer
Text Editors (a small sampling)
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:
In addition to the IIIF community (see for more info), there is a robust community associated with the Mirador project:
