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!