CollectionBuilder-gh and IIIF

[dersuchendee]

Hi,

I have such a IIIF link https://bub.unibo.it/iiif/2/manifest/bub/giornaliniscolastici/larana/jpg/1966.json which is a collection of images (here). I tried to include it in my CollectionBuilder template and it doesn't work; would another template be better for this or there's no support of the .json format?

[evanwill]

@dersuchendee CollectionBuilder does not have a IIIF viewer or IIIF manifest parsing built in so that type of link won't work out of the box.

You could check out Wax (a static template similar to CB) which has a viewer already built in, or it is possible to add a IIIF viewer or embed with some customization to CB (for example Mancini collection). It depends on your aim--if you want to display the full book as an item, using an IIIF viewer would be necessary. If you want to use just a single page or set of pages from the IIIF item, you can use the IIIF api to find image links that work as normal items in CB (for example using IIIF from CONTENTdm).

One more note, if you are going to customize CB item pages, it would be easier to use CB-CSV than -GH!

[dersuchendee]

Thank you. To embed a IIIF viewer, like in the Mancini Collection, are there any already made pieces of code you know of?

[evanwill]

@dersuchendee you can see the source code of Mancini to see how the viewer was set up there. However, Mancini is set up where she was doing processing of the images to build an IIIF server into the static site (integrating parts of Wax). In your case you have an external json manifest referencing external image sources, so don't need to do any of that--you just need the IIIF viewer.

I think it wouldn't be too complicated to add a IIIF viewer to a customized CB-CSV item page. You can check the list of IIIF viewers, most of which would work and provide good examples of the code. You would add the viewer using the external CDN style demoed in Universal Viewer, Mirador, or Open Seadragon (do not try to add via their js package manager methods).

For example, this basic template would add Universal Viewer to a page:

<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>
<style>
#uv {
    width: 924px;
    height: 668px;
}
</style>
<div class="uv" id="uv"></div>
<script>
const data = {
    manifest: "https://wellcomelibrary.org/iiif/b18035723/manifest"
};
uv = UV.init("uv", data);
</script>

So you would adapt this template to replace the manifest value with the manifest link in your metadata for each item, and add it into a custom item page layout for iiif items.

However, the a challenge might be the CORS policy on the server where the manifest exists. The viewer might not be able to load the json manifest if the security isn't set correctly. When I tested your example link, https://bub.unibo.it/iiif/2/manifest/bub/giornaliniscolastici/larana/jpg/1966.json the viewer doesn't load, and gives a CORS policy error.

There is probably some work around to get it to work. I am interested to give it a try myself--however, I am going on holiday break next week, so I won't have a chance to work on it for while!

[dersuchendee]

Thank you for your response. I tried Wax and it seems like there's a similar issue--the images don't load. So because I prefer CollectionBuilder for its aesthetics/customization possibilities, I would love to get updated on this! Also, if I can do something to help in this direction let me know.

[evanwill]

@dersuchendee are you still interested is trying this?
One workaround for the CORS issue is to download a copy of the IIIF manifest and use it directly in your project. Do you think that would be okay for your items?

[dersuchendee]

I'm definitely interested, as I notified the organization but nothing happened yet. How is it possible to download the copy of the IIIF manifest? I mean, it's a json file (collection of images), would it be visualized?

[evanwill]

@dersuchendee I quickly implemented it and it seems to work well. Check out the PR I made on your repository.

You download the manifest by following the links you had in the metadata. The manifest is just a json file, basically a list of where all the images are on the actual iiif server. So you aren't downloading any images, just information about the item--the universal viewer can use that information to pull in the images to view.

[dersuchendee]

That's amazing, I cannot thank you enough!!

[evanwill]

@dersuchendee I am going to transfer this Issue to our Discussion forum so that people can reference in the future. Thanks!

[fullerpault]

@evanwill I'm attempting to make this work with some IIIF assets my institution has. Here's the repository - https://github.com/fullerpault/specializedcollections

Unfortunately, the viewer never initializes, I think maybe the issue is the manifest, which seems to include a "" in front of every "/". I also can't get the viewer to work using UV's codebox when I add in the manifest URL, even though I pulled it directly from the IIIF button on the site where it's hosted (which is also using Universal Viewer). That site can be seen here - https://oshermaps.org/map/50535.0001

I tried cleaning up one manifest file and added it directly to the objects folder, but still no luck.

Any ideas? I tried implementing it via the CB-GH version you used here, though I ran into the same problem. Ideally I'd like to use CB-CSV for the other items that will eventually populate this collection, but I'm open to whatever works.

[evanwill]

@fullerpault I am not exactly sure what the issue is--however, I can got it to work using your set up in specializedcollections with one odd caveat--->

if you get the normal manifest link from your repository it looks like https://odyssey.historyit.com/iiif/5f34291499c4a6.60628694-107345/manifest, however, the manifest from this link will not work.

I checked the "embed" option code on the repository UV, and it uses a much more complicated manifest link that looks like https://odyssey.historyit.com/iiif/5f34291499c4a6.60628694-107345/manifest?canvas_mode=assets&c=0&m=0&cv=0&config=&locales=en-GB:English%20(GB),cy-GB:Cymraeg,fr-FR:Fran%C3%A7ais%20(FR),pl-PL:Polski,sv-SE:Svenska&xywh=-5198,-436,21798,8716&r=0
If I use that link for the "object_location" or download the resulting manifest and put it in the "objects" folder, it does work.

There is something missing in the manifest url without all the extra options (some warning about "canvas not found"), but I didn't look too closely to debug that. But I think the only thing that is necessary is to add ?canvas_mode=assets to the end of the normal manifest link.

[fullerpault]

Huh, that's super weird. Thanks for figuring that out! I'll check with the folks hosting the item and try to figure out what's up with the manifest. Appreciate your help and troubleshooting!