Mirador 3: setting different configuration options when using build with plug-ins

Question

Mirador 3: setting different configuration options when using build with plug-ins

443 views Asked by Ulrik Lyngs At 26 November 2024 at 16:22

I am using Mirador 3 in the context of a static website built with Hugo.

When I embed Mirador from the unpkg URL, I can easily set different options on different pages (here using Hugo templating syntax to set the manifest):

<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>

<div id="mirador"></div>

<script>
const mirador = Mirador.viewer({
      id: "mirador",
      windows: [
        {
          manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
        }
      ]
});
</script>

However, I need to use a few plugins, including the download plugin.

When I create a Mirador build with plug-ins, I don't have an obvious way to set different configuration options on different pages. The configuration options are stuck with whatever was set when the build was created.

I.e., something like this doesn't work:

<div id="demo"></div>
<script src="dist/main.js"></script>

<script>
const mirador = Mirador.viewer({
      id: "demo",
      windows: [
        {
          manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
        }
      ]
});
</script>

-> What's the best practice for setting Mirador configurations on different pages, when using a build with plug-ins?

Original Q&A

There are 2 answers

**jbaiter** · Answer 1 · 2022-10-15 13:06:31

Instead of hardcoding the parameters at build time, export a function from the bundle to the global namespace that sets up Mirador and that you can then pass your custom options to from outside of the bundle:

window.renderMirador = function (options) {
  return Mirador.viewer({
    // ... your default options
    plugins: [ /* ... */ ],
    ...options
  })
}

And then in your HTML:

<div id="demo"></div>
<script src="dist/main.js"></script>

<script>
const mirador = renderMirador({
      id: "demo",
      windows: [
        {
          manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
        }
      ]
});
</script>

**Ulrik Lyngs** · Answer 2 · 2022-10-17 09:21:04

Here's a full example, using jbaiter's solution to create a build with the image tools and the download plugin:

index.js

import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
import miradorDownloadPlugins from 'mirador-dl-plugin';

window.renderMirador = function (options) {
  return Mirador.viewer({
    // ... your default options
    ...options
  },
  [
    ...miradorImageToolsPlugin,
    ...miradorDownloadPlugins,
  ])
}

This is built with npm run webpack, which creates a bunch of .js files in a directory named dist. We point to main.js in our HTML file, and pass it the options we want:

index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mirador 3 with plug-ins, yay!</title>
  </head>
  <body>
    <div id="mirador"></div>
    <script src="dist/main.js"></script>
    <script>
      const mirador = renderMirador({
        id: 'mirador',
        windows: [{
          imageToolsEnabled: true,
          imageToolsOpen: true, 
          manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
        }]
      });
      </script>

  </body>
</html>

TechQA.

Mirador 3: setting different configuration options when using build with plug-ins

There are 2 answers

Related Questions in MIRADOR

Popular Questions

Popular Tags

Trending Questions