Using existing/external IIIF images in v1 project

[zsofiaj]

Hi everyone! I’d like to be able to include external IIIF images in my Quire project, but I think the process has changed with v1. Would anyone be able to help with this? I have a list of urls for the IIIF manifest for each image. Those look like this:

https://manifests.collections.yale.edu/yuag/obj/45046

I tried pasting those into my figures.yaml file, but that didn't seem to do anything. The old IIIF instructions on the Quire documentation pages said to add /info.json to the end of the url above, and that would give me the complete json document. But that didn't seem to work. I'm new to working with IIIF Images, so I'm a little lost. I would be grateful for any help.

This is somewhat unrelated, but for some reason, the zoom function has not been working for my catalogued objects since I migrated to v1. I believe Erin and Greg are looking into this. In this example of a catalogue entry, you can see that the plus and minus buttons are gone at the top left of the image:

https://italian-paintings-march2023-updates.netlify.app/catalogue/volume-1/the-florentine-school/4/

[geealbers]

In v1, you can add external IIIF images by providing a manifest ID as well as the ID of a specific canvas within that manifest. IIIF IDs are typically URLs. For your example above, the YAML would look like this:

  - id: "cat-4"
    manifestId: https://manifests.collections.yale.edu/yuag/obj/45046
    canvasId: https://manifests.collections.yale.edu/canvas/yuag/fb687417-fa46-4811-8f2e-d5955f5b3895
    caption: "Master of Varlungo, *Virgin and Child Enthroned with Two Angels*, ca. 1285–90"    

While the manifest is usually easy to identify as it's the top-level source for any IIIF image, finding the canvas requires looking inside the manifest. Start by opening the manifest URL in a browser. Depending on the browser and the formatting of the source manifest, you may be able to see the structure of the data in the file fairly easily. If it's all in a big blob, you can run it through any online JSON formatter to be able to read it better.

Once formatted, look for a grouping called items or sequences. Inside that there will be a list of one or more canvases and/or items with type: Canvas, and each of those should have an id that is a URL. Typically you'll use the id of the first canvas in the list (if there are more than one listed) as this is likely the main image. Other canvases listed could be things like the back or sides of the object, a special view, a single page within a multipage object, etc..

One large caveat to all this: Currently, Quire is not set up properly to be able to include a static version of an external IIIF resource like this for the PDF and EPUB output. This is something we still need to look at.

[zsofiaj]

Thanks so much, Greg! This is super helpful. I searched for the canvas id on a few of the manifests, and they seem easy enough to find. I went ahead and added the manifestId and canvasId for my cat. 4 in the figures.yaml file, but I still cannot tell if this will work since the zoom is not currently working in our project. Here is that catalogue entry:

https://italian-paintings-march2023-updates.netlify.app/catalogue/volume-1/the-florentine-school/4/

Should I go ahead and add the manifestId and canvasId for all of my plate images? Or should I wait until we are sure this is working? And I was supposed to use "manifestId:" instead of the "iiif:" for that entry in the figures.yaml file, correct? Nothing is currently entered for iiif:

I already have a fallback jpeg in place for all of these, so perhaps it doesn't matter that the static version of the IIIF image cannot be displayed in the pdf or pub?

[geealbers]

Glad to hear we're getting somewhere!

The zoom on the link above is actually working. The old +/- buttons are missing, but if you put your cursor over the image and scroll with your mouse or trackpad, you should see the image zoom. (The buttons aren't part of the new image viewer we started using in Quire v1, but we're hoping to bring them back.)

And yes, for external IIIF you just need values for manifestId and canvasId. And Quire-generated IIIF images, you use zoom: true in the yaml. There's no long any use for iiif or for media_type: iiif in the new version.

When you say you have a "fallback jpeg in place", currently I don't think that will be shown in the PDF or EPUB when you're using manifestId and canvasId. But let me know if you find differently.

[zsofiaj]

Thanks, Greg. I see now that the zoom is working in Chrome, but it is not working in my older version of Safari (v 14.1.2). I will update my Safari, and hopefully the zoom will work there as well. Do you have a sense of when the +/- buttons will be brought back? I think that would really help our users (and the author of the book).

And thank you for confirming that I no longer need to use "iiif:" or for "media_type:" in the new version. I'll delete those throughout the figures.yaml file.

I'm going to add the values for manifestId and canvasId throughout, and will let you know if I encounter any problems.

How can I tell what image is pulling to the pdf—the iiif image or the fallback jpeg? I'll create a new pdf once all of the iiif values are in place.

[junedtan]

@geealbers Your answer is suuper helpful! I've been pulling my hair making the zoom function works, turns out the v1 doc is not updated yet to reflect your answer here. Any chance it will be integrated to the doc?

[zsofiaj]

Yes, thank you @geealbers ! This was super helpful. I added canvasId for all, and now all of the IIIF images are working fine. Just hoping the +/- buttons might be added back soon, as some of our test users are having a hard time figuring out how to work the zoom.

[Erin-Cecele]

@zsofiaj were you ever able to get zooming images to work in Safari? Curiously zooming images work in Safari in the starter project, but @bjhewitt is having a similar issue with his project, and I can't quite pinpoint the root cause. Thank you!

[Erin-Cecele]

Well, I have good news. I can see the image in Safari, and I can zoom. The only thing I can't do is open the image in the figure modal. All the other images, which don't appear to be zooming, open fine in the modal.

[zsofiaj]

@Erin-Cecele Oh, well that's better than nothing! I can't get it to zoom at all in Safari. Some users might not figure out that the image is zoomable on the page, even if that is working, since there is no plus/minus symbol, and since nothing happens when they click on the image. I had somehow of forgotten that this is not working in Safari. It would be great if we could get to the bottom of it, as I'm sure many readers are using Safari, even though we included this note on the About page:

"For the best experience, the catalogue should be viewed in the most recent versions of Mozilla Firefox or Google Chrome."

[Erin-Cecele]

Hi @zsofiaj, we've definitely heard the community feedback about the +/- symbols and are working on reintegrating them with v1, as mentioned in both the newly added IIIF documentation: https://quire.getty.edu/docs-v1/zooming-images/ and this issue: #815 . As for what's going on with Safari, I've gathered information from you and @bjhewitt that I will take to the rest of the team. @bjhewitt had an interesting theory related to "some kind of privacy addition to webkit that's blocking something." I will keep updating issue #896 as I learn more. Thank you both for your patience as I try to get this resolved ASAP!

[zsofiaj]

Thanks so much, @Erin-Cecele! Could it be an issue with our IIIF images not working properly in Safari? The starter project is zooming on jpegs, right? In our project, the main image for each catalogued object points to the Yale University Art Gallery's IIIF repository for the image. I wonder if @bjhewitt is using external IIIIF images as well.

[Erin-Cecele]

Hi @zsofiaj, You are correct. This definitely appears to be an issue with IIIF. The default starter does include an image created with IIIF (by adding zoom: true), which is the same method that @bjhewitt uses in his project. So I'm a bit befuddled. We will keep you updated via issue #896.

[Erin-Cecele]

@bjhewitt Have you tested deploying your site at all with Netlify or GitHub pages? If so, can you send me the links so I can test them? I'd also be curious to see if any errors surface when running quire build.