Mirador demo page for Wax sites

mirador.md

title	layout
Mirador	default

{% assign iiif_collections = site.collections | where_exp: "coll", "coll['images']['source']" %} {% assign default_collection = iiif_collections[0]['label'] %} {% assign default_item = site.data[default_collection][0]['pid'] %}

<script>document.write("<script type='text/javascript' src='https://mirador-dev.netlify.app/dist/mirador.min.js'><\/script>");</script> <script type="text/javascript"> const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); var itemId = urlParams.get('itemId'); var imageId = urlParams.get('imageId');

itemId = itemId || '{{ default_item }}'

var windowConfig = { manifestId: '{{ "/" | absolute_url }}img/derivatives/iiif/' + itemId + '/manifest.json' }

if (imageId) { windowConfig['canvasId'] = '{{ "/" | absolute_url }}img/derivatives/iiif/canvas/' + itemId + '_' + imageId + '.json' }

var miradorInstance = Mirador.viewer({ id: 'mirador', theme: { transitions: window.location.port === '4488' ? { create: () => 'none' } : {}, }, windows: [windowConfig], workspace: { showZoomControls: true }, catalog: [ {% for c in iiif_collections %} {% for m in site.data[c['label']] %} { manifestId: "{{ '/' | absolute_url }}{{ m['manifest'] }}" }, {% endfor %} {% endfor %} ] }); </script>

Drop this file in the root directory of a Wax site. You can then visit it at http://localhost:4000/wax/mirador/ . It builds a catalog of the manifests in the site (click the blue plus at upper left). For a wax themed site with the Qatar demo objects, these links work to open specific manifest and specific canvases:

• http://localhost:4000/wax/mirador/ - first manifest
• http://localhost:4000/wax/mirador/?itemId=obj3 - specified manifest
• http://localhost:4000/wax/mirador/?itemId=obj12&imageId=03 - specified manifest and specified image