Skip to content

Commit 4ff65a5

Browse files
committed
general IIIF images documentation
1 parent 4e94727 commit 4ff65a5

File tree

1 file changed

+84
-28
lines changed

1 file changed

+84
-28
lines changed

docs/metadata/object-paths.md

Lines changed: 84 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ This section presents example recipes for figuring out the fields for a few comm
1515
- [Self-Hosted Objects](#example-paths-for-external-or-self-hosted-objects)
1616
- [YouTube Objects](#path-for-youtube-objects)
1717
- [Vimeo Objects](#path-for-vimeo-objects)
18+
- [IIIF Images](#path-for-iiif-images)
1819
- [Internet Archive Objects](#path-for-internet-archive-objects)
1920
- [CONTENTdm Objects](#path-for-contentdm-objects)
2021

@@ -105,6 +106,75 @@ One option is to create screenshots to use as derivative images--if image_thumb
105106

106107
------
107108

109+
## Path for IIIF Images
110+
111+
Many repositories and image servers support the [IIIF Image API](https://iiif.io/api/image/3.0/) which provides a standardized way to retrieve images of various sizes using URLs.
112+
You can use the IIIF recipes to fill in the "object_location", "image_small", and "image_thumb" for your collection Items.
113+
114+
To use the IIIF API you will need to know the base url for your server and the image identifiers for your items.
115+
The base url often contains a domain and potentially some prefixes to denote the service point.
116+
For example, the Internet Archive IIIF base url is `https://iiif.archive.org/image/iiif/3/`.
117+
Image identifiers are internal unique ids that you will need to figure out from the system.
118+
119+
IIIF image requests follow the pattern:
120+
`https://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}`.
121+
122+
For the purposes of CB, in most cases the region = `full`, rotation = `0`, quality = `default`, and format = `.jpg`.
123+
Only the size option will change for "object_location", "image_small", and "image_thumb":
124+
125+
- "object_location"
126+
- full sized image
127+
- Recipe: baseurl + identifier + `/full/max/0/default.jpg`
128+
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/max/0/default.jpg`
129+
- "image_small"
130+
- 800px width
131+
- Recipe: baseurl + identifier + `/full/800,/0/default.jpg`
132+
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/800,/0/default.jpg`
133+
- "image_thumb"
134+
- 450px width
135+
- Recipe: baseurl + identifier + `/full/450,/0/default.jpg`
136+
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/450,/0/default.jpg`
137+
138+
Issues can come up if the original full sized image is smaller than the requested size.
139+
In cases where the image is smaller than 450 pixels wide, you will likely want to use the `max` size for all image options.
140+
Alternatively, most servers support adding `^` to the size to allow up scaling the image, e.g. `/^450,/`, but keep in mind the image will likely be blurry.
141+
142+
Despite being a standard, a lot of IIIF servers have quirks!
143+
Two common options with slightly different details, Internet Archive and CONTENTdm, are described below.
144+
145+
### IIIF Viewer
146+
147+
In some cases you may want to display images in a IIIF viewer rather than the default "image" display_template.
148+
149+
To use the viewer, you will need the full url to the "manifest.json" file for the item, which will fill the "object_location" field.
150+
The recipe usually follows the pattern:
151+
152+
- "object_location"
153+
- URL to IIIF manifest.json
154+
- Recipe: base url + identifier + `/manifest.json`
155+
- Example: `https://iiif.archive.org/iiif/3/aladoren00newbuoft/manifest.json`
156+
157+
You will still want to figure out appropriate derivatives for "image_small" and "image_thumb" using the IIIF recipes above or manually created images.
158+
159+
With the manifest.json url in "object_location", you will then create a new display_template that uses a IIIF viewer to display the items (or modify the default "image" display_template).
160+
CB has an include with [Universal Viewer](https://github.com/UniversalViewer/universalviewer) set up to use in this context, "_includes/item/iiif-manifest-universal-viewer.html".
161+
162+
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").
163+
In the file, change the line:
164+
165+
`{% raw %}{% include item/image-gallery.html %}{% endraw %}`
166+
167+
to to use the iiif-manifest-universal-viewer include instead:
168+
169+
`{% raw %}{% include item/iiif-manifest-universal-viewer.html %}{% endraw %}`
170+
171+
Note: Universal Viewer will work with manifest.json loaded from IA and other sources set up for broad access.
172+
However, for many other servers, attempting to load a remote manifest this will trigger a CORS issue and nothing will load.
173+
A potential work around is to download the manifests, rename, and put them directly in your project to avoid CORS.
174+
You would then reference the local copy of the manifest in "object_location", e.g. `/objects/example.json`.
175+
176+
------
177+
108178
## Path for Internet Archive Objects
109179

110180
[Internet Archive](https://archive.org/) image items are accessible via standard IIIF api.
@@ -140,46 +210,32 @@ Once you have the identifier, you can use standard IIIF recipes to create urls t
140210
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/max/0/default.jpg`
141211
- "image_small"
142212
- 800px width
143-
- Recipe: `https://iiif.archive.org/image/iiif/3/` + identifier + `/full/,800/0/default.jpg`
144-
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/,800/0/default.jpg`
213+
- Recipe: `https://iiif.archive.org/image/iiif/3/` + identifier + `/full/800,/0/default.jpg`
214+
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/800,/0/default.jpg`
145215
- "image_thumb"
146216
- 450px width
147-
- Recipe: `https://iiif.archive.org/image/iiif/3/` + identifier + `/full/,450/0/default.jpg`
148-
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/,450/0/default.jpg`
217+
- Recipe: `https://iiif.archive.org/image/iiif/3/` + identifier + `/full/450,/0/default.jpg`
218+
- Example: `https://iiif.archive.org/image/iiif/3/mma_wheat_field_with_cypresses_436535%2f436535.jpg/full/450,/0/default.jpg`
149219

150-
### IIIF Viewer for Books and Images
220+
### IA Embed or IIIF Viewer for Books and Images
221+
222+
Rather than using CB's default "image" display_template for IA items, you can display items using a IA embed or IIIF viewer.
223+
224+
For book, pdf, video, or audio items from Internet Archive it is easiest to use the embed option.
225+
This is available in ["_includes/item/ia-embed.html"](https://github.com/CollectionBuilder/collectionbuilder-csv/blob/main/_includes/item/ia-embed.html).
226+
For "object_location" you will use the IA item page url, then create a custom display_temple using the ia-embed include.
151227

152-
To display an IA item in a IIIF viewer (instead of CB's default simple image style template), it is possible to use the "manifest.json".
153-
The full url to the "manifest.json" file will be used in the "object_location" field.
154-
The recipe follows the pattern:
228+
Alternatively, for single image, multi-image, or book items, it is possible to use the IIIF "manifest.json" to display the item in a IIIF viewer.
229+
For "object_location" you will use the full url to the "manifest.json" file, then create a custom display_template using the iiif-manifest-universal-viewer include (see in IIIF section above).
230+
The recipe follows the same pattern for all item types:
155231

156232
- "object_location"
157233
- URL to IIIF manifest.json
158234
- Recipe: `https://iiif.archive.org/iiif/3/` + item id + `/manifest.json`
159235
- Example: for book item page at "https://archive.org/details/aladoren00newbuoft", the IIIF manifest will be `https://iiif.archive.org/iiif/3/aladoren00newbuoft/manifest.json`
160236

161-
The recipe for manifest url is the same for both book and single image items, and can be used for either to display the item in a IIIF viewer.
162237
You will still want to figure out appropriate derivatives for "image_small" and "image_thumb" using the IIIF recipes above or manually created images.
163238

164-
*Note:* for book, pdf, video, or audio items from Internet Archive it might be easier to use the direct embed option (rather than manifest.json + IIIF viewer).
165-
This is available in ["_includes/item/ia-embed.html"](https://github.com/CollectionBuilder/collectionbuilder-csv/blob/main/_includes/item/ia-embed.html).
166-
167-
With the manifest.json url in "object_location", you will then modify the "image" display_template or create a new display_template that uses a IIIF viewer to display the items.
168-
CB has an include with [Universal Viewer](https://github.com/UniversalViewer/universalviewer) set up to use in this context.
169-
170-
If all your "image" items are set up with a manifest.json, edit "_layouts/item/image.html"--or if you would like to create a new custom display_template, create a new file such as "_layouts/item/iiif_image.html" by copying "_layouts/item/image.html".
171-
In the file, change the line:
172-
173-
`{% raw %}{% include item/image-gallery.html %}{% endraw %}`
174-
175-
to to use the iiif-manifest-universal-viewer include instead:
176-
177-
`{% raw %}{% include item/iiif-manifest-universal-viewer.html %}{% endraw %}`
178-
179-
Note: Universal Viewer this will work with manifest.json loaded from IA.
180-
However, for many other servers, attempting to load a remote manifest this will trigger a CORS issue.
181-
A potential work around is to download a the manifests and put them directly in your project to avoid CORS.
182-
183239
------
184240

185241
## Path for CONTENTdm Objects

0 commit comments

Comments
 (0)