Cannot get Universal Viewer to display images

[WhatTheDickens]

I'm unable to load a IIIF image in Universal Viewer from its manifest url or the downloaded manifest file in CB-Essay. I've created the appropriate display template following the instructions on the Recipes page in the documentation. The page properly displays the viewer from the template, but the image never loads.

I'm able to embed an <iframe> of the viewer without difficulty, pulling the image from a repository I set up previously following the UV instructions. For example, this works fine.

<iframe src="https://cdl-geneseo.github.io/waldenms/uv.html#?manifest=https://cdm16003.contentdm.oclc.org/iiif/info/p16003coll16/23/manifest.json&amp;c=0&amp;m=0&amp;cv=0&amp;config=&amp;locales=en-GB:English (GB),cy-GB:Cymraeg,fr-FR:Français (FR),pl-PL:Polski,sv-SE:Svenska&amp;r=0"
                 width="560"
                 height="600"
                 allowfullscreen="true"
                 frameborder="0">-</iframe>

But there appears to be no way to treat an <iframe> as object_location, so I can't load my images in a UV embed by pulling from my CSV; I'd have to insert these individually for each image.

Again, I've tried entering the individual manifest for the image from URL as object_location:

https://cdm16003.contentdm.oclc.org/iiif/info/p16003coll16/23/manifest.json

And I've gone to that URL and downloaded the json file, put it in objects, and referenced it as /objects/23.json in my CSV. Neither approach works. Here is the json content:

{"@context":"http://iiif.io/api/presentation/2/context.json","@type":"sc:Manifest","@id":"https://cdm16003.contentdm.oclc.org/iiif/p16003coll16:23/manifest.json","label":"p. 16","metadata":[{"label":"Call Number","value":"mssHM 924, Vol. 1"},{"label":"Date Digitized","value":"2019-09-20"},{"label":"Digital Collection","value":"Henry David Thoreau's Walden, Huntington Digital Library"},{"label":"Digital Format","value":"image/jpeg"},{"label":"Digitization Specifications","value":"High resolution"},{"label":"Rights","value":"For information on use of Digital Library materials, please see Library Rights and Permissions: https://www.huntington.org/library-rights-permissions"},{"label":"Title","value":"p. 16"},{"label":"Unique Digital Identifier","value":"559638"},{"label":"Repository","value":"Huntington Digital Library"},{"label":"Source","value":"<span>From: <a href=\"https://hdl.huntington.org/digital/collection/p16003coll16/id/23\">p. 16</a></span>"}],"attribution":["","For information on use of Digital Library materials, please see Library Rights and Permissions: https://www.huntington.org/library-rights-permissions"],"seeAlso":{"@id":"https://cdm16003.contentdm.oclc.org/oai/oai.php?verb=GetRecord&identifier=oai:cdm16003.contentdm.oclc.org:p16003coll16/23&metadataPrefix=oai_qdc","format":"application/xml","profile":"http://www.openarchives.org/OAI/2.0/OAI-PMH.xsd"},"within":"https://cdm16003.contentdm.oclc.org/iiif/p16003coll16/manifest.json","sequences":[{"@id":"https://cdm16003.contentdm.oclc.org/iiif/p16003coll16:23/sequence/s0","@type":"sc:Sequence","label":"p. 16","canvases":[{"@id":"https://cdm16003.contentdm.oclc.org/iiif/p16003coll16:23/canvas/c0","@type":"sc:Canvas","label":"p. 16","images":[{"@id":"https://cdm16003.contentdm.oclc.org/iiif/p16003coll16:23/annotation/a0","@type":"oa:Annotation","motivation":"sc:painting","resource":{"@id":"https://cdm16003.contentdm.oclc.org/iiif/2/p16003coll16:23/full/full/0/default.jpg","@type":"dctypes:Image","service":{"@context":"http://iiif.io/api/image/2/context.json","@id":"https://cdm16003.contentdm.oclc.org/iiif/2/p16003coll16:23","width":8708,"height":11608,"tiles":[{"width":8708,"scaleFactors":[1,2,4,8,16]}],"profile":"http://iiif.io/api/image/2/level1.json","protocol":"http://iiif.io/api/image"},"format":"image/jpeg","width":8708,"height":11608},"on":"https://cdm16003.contentdm.oclc.org/iiif/p16003coll16:23/canvas/c0"}],"width":8708,"height":11608}]}],"structures":[{"@id":"https://cdm16003.contentdm.oclc.org/iiif/p16003coll16:23/range/r0","@type":"sc:Range","label":"p. 16","ranges":[],"canvases":["https://cdm16003.contentdm.oclc.org/iiif/p16003coll16:23/canvas/c0"]}]}

I'm missing a step somewhere, I imagine. But where?

[evanwill]

@WhatTheDickens can you share a link to the example in a repository?
To be clear: UV is in the template as an include option, but it is not set up in any display_template in the default repository, so using it requires some customization. So to use UV is two steps, 1. add the manifest link to "object_location", 2. set up a display_template to use it or modify the "image" display_template to use it.

[WhatTheDickens]

@evanwill Right now all my files are local, but I'll push them so you can see what I have. I did set up a new display_template by following these instructions:

To set up a custom display_template, create a new file such as “_layouts/item/iiif_image.html” by copying “_layouts/item/image.html” (or if all your “image” items are set up with a manifest.json, edit “_layouts/item/image.html”). In the file, change the line:

{% include item/image-gallery.html %}

to to use the iiif-manifest-universal-viewer include instead:

{% include item/iiif-manifest-universal-viewer.html %}

I assume this is why the empty viewer shows up with the spinning arrow when I load the page. But this is what I mean when I ask if I've missed a step somewhere. Do I need to do more to create the new template?

Also: I assume that the value of display_template in the csv should still be image when the object_location is a link to a manifest. Is that right? Creating a new template doesn't require creating a new template type, does it?

Thanks for your help!

[WhatTheDickens]

@evanwill Okay, I've pushed the files to https://github.com/WhatTheDickens/following-higher-laws

My attempted include is in _essay/04-manuscript-version-a.md

The first object in my metadata references as object_location a downloaded json file that I added to objects. The rest of the objects reference manifests for the IIIF images.

[I haven't yet published the site.] Strike that. Site is now published and the page in question is at

https://paulschacht.net/following-higher-laws/essay/04-manuscript-version-a.html

Thanks again!

[evanwill]

@WhatTheDickens oh okay I understand better--the issue is that the includes in "_includes/item/" are set up as if they are used on an Item page, so all the variables it pulls in are like page.object_location (because on Item pages, the page object has the full metadata for one row of your metadata at build time).
So you are trying to use the include like:

{% include item/iiif-manifest-universal-viewer.html objectid="hm924v1n194" %}

Which makes sense--that is how the includes in "_includes/feature/" work--but won't work with the Item includes.

I just opened a PR in your project that adds a Feature include version of the UV include. This will allow you to use it like:

{% include feature/iiif-manifest-uv.html objectid="hm924v1n194" %}

[evanwill]

For others, you can add this by creating a file "_include/feature/iiif-manifest-uv.html" with the content:

{% comment %}

    Embed Universal Viewer to load item from an IIIF manifest file, https://github.com/UniversalViewer/universalviewer 
    This include assumes that Item's object_location field is a relative link or direct url to a IIIF manifest json file. e.g. https://wellcomelibrary.org/iiif/b18035723/manifest 
    If you are using an external manifest url, you may encounter CORS policy error if the server hosting the manifest is not set up correctly--one workaround is to download the json file, add to your "objects" folder, and use a relative link, e.g. "objects/book-manifest1.json". You do not need the images, just the manifest file!

    E.G. --> {% include feature/iiif-manifest-uv.html objectid="demo_001" %}

    Options:
    - "objectid" = one objectid from this collection, a full URL to an external manifest.json file, or a relative link to a manifest.json file in this repository.


{% endcomment %}
{% capture manifest %}{% if include.objectid contains "/" %}{{ include.objectid | relative_url }}{% else %}{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}{{ item.object_location | relative_url }}{% endif %}{% endcapture %}
<!-- add IIIF Universal Viewer assets from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/universalviewer@4.0.0/dist/uv.css"/>
<script src="https://cdn.jsdelivr.net/npm/universalviewer@4.0.0/dist/umd/UV.js"></script>
<!-- add div for viewer -->
<div class="uv" id="uv" style="width: 100%; height: 668px;"></div>
<script>
    // initialize Universal Viewer
    var uvOptions = {
        manifest: {{ manifest | jsonify }}
        // add options here!
    };
    var iiif_viewer = UV.init("uv", uvOptions);
</script>

[WhatTheDickens]

PR merged, all good. Thanks so much, @evanwill!

[WhatTheDickens]

Thanks again, @evanwill! The viewer now shows up exactly as it should. However, because the value of object_location in the metadata is a manifest rather than an image file, the item page for each item in the metadata links to that manifest rather than an image. For example, locally, in _site/items/hm924v1n194.html I see

<a id="hm924v1n194" class="spotlight gallery-img" data-download="true" title="HM 924 Volume 1, p. 191" href="/objects/194.json">
    <img src="https://cdm16003.contentdm.oclc.org/digital/iiif/p16003coll16/194/full/800,/0/default.jpg" alt="Manuscript page from Version A of the &quot;Walden&quot; manuscript with material found in &quot;The Village,&quot; paragraph 1 and &quot;The Ponds,&quot; paragraphs 1 and 2, in &quot;Walden&quot; as published (1854)." class="img-fluid">
    <div><small class="text-dark">Click to view full screen</small></div>
</a>

and on the site as deployed I see, in source,

<a id="hm924v1n194" class="spotlight gallery-img" data-download="true" title="HM 924 Volume 1, p. 191" href="/following-higher-laws/objects/194.json">
--
<img src="https://cdm16003.contentdm.oclc.org/digital/iiif/p16003coll16/194/full/800,/0/default.jpg" alt="Manuscript page from Version A of the &quot;Walden&quot; manuscript with material found in &quot;The Village,&quot; paragraph 1 and &quot;The Ponds,&quot; paragraphs 1 and 2, in &quot;Walden&quot; as published (1854)." class="img-fluid">
<div><small class="text-dark">Click to view full screen</small></div>
</a>

Clicking the link brings up https://paulschacht.net/following-higher-laws/items/hm924v1n194.html with a "prohibited" (slash-in-circle) symbol.

It would be great if either the page loaded the universal viewer or if the link pointed to the full-size IIIF image (while object_location continued to be the manifest, so that I could continue to use the feature include). Is either option possible?

For this small project, I can work around the issue by putting the full-size IIIF image locations for my small collection of images in object_location in the CSV and using <iframe> wherever I want to provide a viewer. But for larger projects it would be great to have a solution to this.

[evanwill]

@WhatTheDickens yeah, that is what I was describing originally in creating a custom display_template for your IIIF manifest items--the default image template doesn't support it out of the box, so usually the best approach is to set up a new display_template for them (by copying the existing _layouts/item/image.html template and swapping out the item/image-gallery.html include with the item/iiif-manifest-universal-viewer.html include. Generally you would also tweak the download-buttons.html). We regularly do this for projects, but haven't built it into the template due to a lot of variation in what sort of iiif objects you might want to support--generally better to just create a custom version to display how you want. Eventually, we will probably just have it out of the box option--but all the parts are there now!

[WhatTheDickens]

Ah! Got it. This is what I was getting at earlier when I asked, "Also: I assume that the value of display_template in the csv should still be image when the object_location is a link to a manifest. Is that right? Creating a new template doesn't require creating a new template type, does it?" I now understand that it does.

I had already done the copy/swap-out you describe, but my CSV still had image as the value of display_template for each object. I changed that value to iiif-image (since I named my copy of image.html iiif-image.html) and now the each image in my gallery points to a viewer for that image. Lovely! Thanks, too, for the tip about the download button; I was able to tweak download-buttons.html to remove the Download JPEG button.

Really appreciate the help.