Loading IIIF Manifests with Universal Viewer

Hello,

I am trying to get Omeka S going at our university, together with IIIF. We have an image server (cantaloupe) and just recently set up a manifest server. They are all behind our VPN so I can’t send links.

When I have loaded images as IIIF media from our image server (ie http://www.showcaseifs1.uct.ac.za:8182/iiif/2/2020-07-16_Ibali-Omeka-S_Quickguide.png/info.json) , the images have worked fine in the standard viewer, but now I need to make it work as manifests so they can work with the Universal Viewer. I set up within the global properties of Omeka S that schema:image is what contains the link to the manifest and started creating items where the URI to the manifest is placed there.

{
@context: "http://iiif.io/api/presentation/2/context.json",
@id: "http://41bb2f10-b9ec-4e6a-b55b-08af8cb7e139",
@type: "sc:Manifest",
label: "BVF 41 ǂKhomani San Sample Collection",
metadata: [ ],
description: [
{
@value: "A collection of images from the BVF 41 Collection",
@language: "en",
}
],
license: "https://creativecommons.org/licenses/by/3.0/",
attribution: "University of Cape Town Libraries",
sequences: [
{
@id: "http://33da6017-7806-425d-a822-523c1b8e9418",
@type: "sc:Sequence",
label: [
{
@value: "Normal Sequence",
@language: "en",
}
],
canvases: [
{
@id: "http://439fac6e-64ff-4265-b9d9-5d9eea277074",
@type: "sc:Canvas",
label: "mss_bvf41_G_37",
height: 20961,
width: 15619,
images: [
{
@context: "http://iiif.io/api/presentation/2/context.json",
@id: "http://e62b24ba-37f6-4989-b69a-f74939262ec9",
@type: "oa:Annotation",
motivation: "sc:painting",
resource: {
@id: "http://137.158.159.31:8182/iiif/2/batch3%2Fmss_bvf41_G_37.tif/full/full/0/default.jpg",
@type: "dctypes:Image",
format: "image/jpeg",
service: {
@context: "http://iiif.io/api/image/2/context.json",
@id: "http://137.158.159.31:8182/iiif/2/batch3%2Fmss_bvf41_G_37.tif",
profile: [
"http://iiif.io/api/image/2/level2.json",
{
formats: [
"jpg",
"tif",
"gif",
"png",
],
maxArea: 100000000,
qualities: [
"bitonal",
"default",
"gray",
"color",
],
supports: [
"regionByPx",
"sizeByW",
"sizeByWhListed",
"cors",
"regionSquare",
"sizeByDistortedWh",
"canonicalLinkHeader",
"sizeByConfinedWh",
"sizeByPct",
"jsonldMediaType",
"regionByPct",
"rotationArbitrary",
"sizeByH",
"baseUriRedirect",
"rotationBy90s",
"profileLinkHeader",
"sizeByForcedWh",
"sizeByWh",
"mirroring",
],
},
],
},
height: 20961,
width: 15619,
},
on: "http://439fac6e-64ff-4265-b9d9-5d9eea277074",
}
],
related: "",
},
{
@id: "http://7f504b62-ec32-4aa8-82e8-76a0e0441974",
@type: "sc:Canvas",
label: "H_Film-06_Frame-05",
height: 5315,
width: 3579,
images: [
{
@context: "http://iiif.io/api/presentation/2/context.json",
@id: "http://1a6ffed5-5b6b-4f86-8d59-426caa6f7ab3",
@type: "oa:Annotation",
motivation: "sc:painting",
resource: {
@id: "http://137.158.159.31:8182/iiif/2/batch3%2Fmss_bvf41_H_Film-06_Frame-05.tif/full/full/0/default.jpg",
@type: "dctypes:Image",
format: "image/jpeg",
service: {
@context: "http://iiif.io/api/image/2/context.json",
@id: "http://137.158.159.31:8182/iiif/2/batch3%2Fmss_bvf41_H_Film-06_Frame-05.tif",
profile: [
"http://iiif.io/api/image/2/level2.json",
{
formats: [
"jpg",
"tif",
"gif",
"png",
],
maxArea: 19022385,
qualities: [
"bitonal",
"default",
"gray",
"color",
],
supports: [
"regionByPx",
"sizeByW",
"sizeByWhListed",
"cors",
"regionSquare",
"sizeByDistortedWh",
"canonicalLinkHeader",
"sizeByConfinedWh",
"sizeByPct",
"jsonldMediaType",
"regionByPct",
"rotationArbitrary",
"sizeByH",
"baseUriRedirect",
"rotationBy90s",
"profileLinkHeader",
"sizeByForcedWh",
"sizeByWh",
"mirroring",
],
},
],
},
height: 5315,
width: 3579,
},
on: "http://7f504b62-ec32-4aa8-82e8-76a0e0441974",
}
],
related: "",
},
{
@id: "http://4c2a3c7c-e604-49f0-a606-5581f0793460",
@type: "sc:Canvas",
label: "mss_bvf41_family_D",
height: 4952,
width: 3750,
images: [
{
@context: "http://iiif.io/api/presentation/2/context.json",
@id: "http://e6cfbd56-b428-4739-b039-8a64b388617c",
@type: "oa:Annotation",
motivation: "sc:painting",
resource: {
@id: "http://free.iiifhosting.com/iiif/da8f28f6b69fa0d90e10f21ba90a5d9d0cd717a126b07fe3e99efb99eac005c6/full/full/0/default.jpg",
@type: "dctypes:Image",
format: "image/jpeg",
service: {
@context: "http://iiif.io/api/image/2/context.json",
@id: "http://free.iiifhosting.com/iiif/da8f28f6b69fa0d90e10f21ba90a5d9d0cd717a126b07fe3e99efb99eac005c6",
profile: [
"http://iiif.io/api/image/2/level1.json",
{
formats: [
"jpg"
],
qualities: [
"native",
"color",
"gray",
],
supports: [
"regionByPct",
"regionSquare",
"sizeByForcedWh",
"sizeByWh",
"sizeAboveFull",
"rotationBy90s",
"mirroring",
],
},
],
},
height: 4952,
width: 3750,
},
on: "http://4c2a3c7c-e604-49f0-a606-5581f0793460",
}
],
related: "",
},
{
@id: "http://4d5e37ec-bf2a-4508-a824-a4fcfdfe3a1b",
@type: "sc:Canvas",
label: "mss_bvf41_H_lam-33",
height: 1615,
width: 2435,
images: [
{
@context: "http://iiif.io/api/presentation/2/context.json",
@id: "http://5be29d24-5778-4b1f-b4b0-ec83e6c0e48f",
@type: "oa:Annotation",
motivation: "sc:painting",
resource: {
@id: "http://free.iiifhosting.com/iiif/3297db24ee0fec47b413dd623182484ac3ff457efb76135e79aa04ad8380de2b/full/full/0/default.jpg",
@type: "dctypes:Image",
format: "image/jpeg",
service: {
@context: "http://iiif.io/api/image/2/context.json",
@id: "http://free.iiifhosting.com/iiif/3297db24ee0fec47b413dd623182484ac3ff457efb76135e79aa04ad8380de2b",
profile: [
"http://iiif.io/api/image/2/level1.json",
{
formats: [
"jpg"
],
qualities: [
"native",
"color",
"gray",
],
supports: [
"regionByPct",
"regionSquare",
"sizeByForcedWh",
"sizeByWh",
"sizeAboveFull",
"rotationBy90s",
"mirroring",
],
},
],
},
height: 1615,
width: 2435,
},
on: "http://4d5e37ec-bf2a-4508-a824-a4fcfdfe3a1b",
}
],
related: "",
},
{
@id: "http://f5898b75-8ba6-4c63-b4ed-13ed0458841a",
@type: "sc:Canvas",
label: "mss_bvf41_H_lam-36",
height: 1614,
width: 2411,
images: [
{
@context: "http://iiif.io/api/presentation/2/context.json",
@id: "http://61f515f5-ba95-4cf2-a35b-c432b35164eb",
@type: "oa:Annotation",
motivation: "sc:painting",
resource: {
@id: "http://free.iiifhosting.com/iiif/c5bf4551fcc5f67a8dbce3c32adf82a0bc8606d0d9b1e862d93dd73a2f7012d8/full/full/0/default.jpg",
@type: "dctypes:Image",
format: "image/jpeg",
service: {
@context: "http://iiif.io/api/image/2/context.json",
@id: "http://free.iiifhosting.com/iiif/c5bf4551fcc5f67a8dbce3c32adf82a0bc8606d0d9b1e862d93dd73a2f7012d8",
profile: [
"http://iiif.io/api/image/2/level1.json",
{
formats: [
"jpg"
],
qualities: [
"native",
"color",
"gray",
],
supports: [
"regionByPct",
"regionSquare",
"sizeByForcedWh",
"sizeByWh",
"sizeAboveFull",
"rotationBy90s",
"mirroring",
],
},
],
},
height: 1614,
width: 2411,
},
on: "http://f5898b75-8ba6-4c63-b4ed-13ed0458841a",
}
],
related: "",
},
],
}
],
otherContent: [
{
@id: "http://localhost:8887/annotation1c.json",
@type: "sc:AnnotationList",
label: "My fantastic annotations",
},
{
@id: "http://localhost:8887/PetrusAno.json",
@type: "sc:AnnotationList",
label: "My fantastic annotations",
},
{
@id: "http://localhost:8887/FamilyAno.json",
@type: "sc:AnnotationList",
label: "My fantastic annotations",
},
],
structures: [ ],
}

I have made a manifest above, which works fine on the Universal Viewer but doesn’t work when i add it as a link to a property in Omeka S, i just get the thumbnails and the spinning wheels see screenshot for local manifest).


However if I add an external manifest, it works fine.
I am wondering if the reason that it might not be working is because the images for the local server are served through http:// as opposed to https:// and that is putting it in the mixed content not to do range.
Thanks
Sanjin

Your sense that mixed content is the problem rings true with me, though without being able to access the www.showcaseifs1.uct.ac.za:8182 links I can’t be sure. (For what it’s worth, I’m getting a timeout error on http://www.showcaseifs1.uct.ac.za:8182/iiif/2/2020-07-16_Ibali-Omeka-S_Quickguide.png/info.json rather than an error that would indicate being blocked by not being on your VPN.)

What’s making me wonder about the mixed content issue, though, is that your service is also HTTP rather than HTTPS and you say that the thumbnails are loading fine with a local manifest.

It’s also not impossible that you have a CORS problem, which I am able to suggest, but not to recommend remedies. The thumbnail presence would confuse me here, too.

I’m only an advanced beginner with IIIF, so maybe I’m way off.

1 Like

Which version of iiif server do you use?

Thanks, I am going to try to push our IT department to see if they can get the Cantaloupe server to serve image on https. Right now they are only accessible through http, even if the main landing page for the server is https. Thanks for your time.

Thanks @Daniel_KM and @triplingual, it turns out that I was making a mistake in my manifest by calling the image with the port number of the service, which was making it an http call and not https. Changing that manifest with the image api on https only without port seems to have resolved the issue!
Thank you for your time.