![](\"https://licensebuttons.net/l/by-sa/3.0/88x31.png\"/)
Tagged: 16 | {% for tag in recipe.tags %} 17 | {{ tag }} 18 | {% if forloop.last == false %} | {% endif %} 19 | {% endfor %} 20 |
21 |{{ recipe.summary }}
22 |The koto is to the right, carried in a cloth wrapping.
", 45 | "language": "en" 46 | }, 47 | "target": "{{ id.path }}/canvas#xywh=5500,12200,8000,5000" 48 | } 49 | ] 50 | } 51 | ] 52 | } 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /recipe/0008-rights/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { "en": [ "Picture of Göttingen taken during the 2019 IIIF Conference" ] }, 6 | "summary": { "en": [ "Picture taken by the IIIF Technical Coordinator
" ] }, 7 | "rights": "http://creativecommons.org/licenses/by-sa/3.0/", 8 | "requiredStatement": { 9 | "label": { "en": [ "Attribution" ] }, 10 | "value": { "en": [ "Glen Robson, IIIF Technical Coordinator. CC BY-SA 3.0" ] }
11 | },
12 | "items": [
13 | {
14 | "id": "{{ id.path }}/canvas/p1",
15 | "type": "Canvas",
16 | "height": 3024,
17 | "width": 4032,
18 | "items": [
19 | {
20 | "id": "{{ id.path }}/page/p1/1",
21 | "type": "AnnotationPage",
22 | "items": [
23 | {
24 | "id": "{{ id.path }}/annotation/p0001-image",
25 | "type": "Annotation",
26 | "motivation": "painting",
27 | "body": {
28 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
29 | "type": "Image",
30 | "format": "image/jpeg",
31 | "height": 3024,
32 | "width": 4032,
33 | "service": [
34 | {
35 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
36 | "profile": "level1",
37 | "type": "ImageService3"
38 | }
39 | ]
40 | },
41 | "target": "{{ id.path }}/canvas/p1"
42 | }
43 | ]
44 | }
45 | ]
46 | }
47 | ]
48 | }
49 |
--------------------------------------------------------------------------------
/recipe/0135-annotating-point-in-canvas/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Annotating a specific point of an image
3 | id: 15
4 | layout: recipe
5 | tags: image
6 | summary: "This recipe explains how to annotate a specific point of an image."
7 | viewers:
8 | - Glycerine Viewer
9 | - Theseus
10 | topic:
11 | - annotation
12 | ---
13 |
14 | ## Use Case
15 | You want to annotate a coordinate of the image rather than a region. You have a map with some locations that can be represented better by a single coordinate. You want to add some auxiliary data relative to a specific point of the image (e.g. some spectroscopic analysis made on a manuscript).
16 |
17 | ## Implementation notes
18 |
19 | This recipe, as [Simple Annotation — Tagging][0021] implements a method for annotating an image. Recipe [Begin playback at a specific point - Time-based media][0015] uses a Point Selector for selecting a specific time of a video, this recipe selects instead a specific point of the image.
20 |
21 | In this use case, the Annotation is inside an Annotation Page in the `annotations` list of the Manifest. The `motivation` of the Annotation is "tagging" and the target `source` points to the Canvas `id`. The `type` property is a Specific Resource while the Selector `type` property is a Point Selector that contains the coordinates `x` and `y` of the Canvas coordinates system as parameters.
22 |
23 | Viewers might consider implementing scale-independent point markers so that they are visible at every level of zoom.
24 |
25 | ## Example
26 |
27 | This example uses a leaflet with a map and a guide supplied by the Library of Congress Geography and Map Division, it shows how we can annotate some locations expressed in the map.
28 |
29 | {% include manifest_links.html viewers="Glycerine Viewer, Theseus" manifest="manifest.json" %}
30 |
31 | {% include jsonviewer.html src="manifest.json" config='data-line="69-76"' %}
32 |
33 | # Related recipes
34 |
35 | * [Begin playback at a specific point - Time-based media][0015] uses a Point Selector for selecting for starting the playback at a specific time.
36 | * [Simple Annotation — Tagging][0021] a simple annotation pointing to a region of an image.
37 |
38 | {% include acronyms.md %}
39 | {% include links.md %}
40 |
--------------------------------------------------------------------------------
/recipe/0103-poetry-reading-annotations/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Scholarly Annotation of a Poetry Reading
3 | id: 103
4 | layout: recipe
5 | tags: [audio, presentation, annotation]
6 | summary: "Use annotations to indicate aspects of the performance of a particular poem."
7 | viewers:
8 | - Ramp
9 | - Aviary
10 | topic:
11 | - AV
12 | ---
13 |
14 |
15 | ## Use Case
16 |
17 | Scholars may wish to use annotations to indicate aspects of the performance of a particular poem.
18 |
19 | For a performance of a published text, transcribing the performance is of little use to the researcher annotating the performance. Rather, the annotations serve as commentary on the performance itself.
20 |
21 | A researcher might want to annotate the following types of information:
22 | * structural information (introduction, title, stanzas)
23 | * points where the performer takes a breath
24 | * repeated or emphasized phrases
25 |
26 | ## Implementation notes
27 |
28 | This implementation builds off of the [audio example][0002], but adds Web Annotations. We show annotation targeting using a simplified Media Fragment `#t=702.0,705.0` appended to the canvas URL.
29 |
30 | If you are targeting a single point, you should use a point selector. The [Begin playback at a specific point - Time-based media][0015] recipe demonstrates that approach.
31 |
32 | Because the annotations are pointing out features of the audio, rather than transcriptions, the `motivation` for each annotation is `commenting` not `supplementing`. If the annotations were transcriptions, their motivation would be `supplementing`.
33 |
34 |
35 | ## Example
36 |
37 | A manifest for a poetry reading by Canadian poet Daphne Marlatt in 2018 that includes an annotation describing environmental noise. The recording is 707 seconds long.
38 | {% include manifest_links.html manifest="manifest.json" %}
39 |
40 | {% include jsonviewer.html src="manifest.json" %}
41 |
42 |
43 | # Related recipes
44 |
45 | * [Simple Manifest - Audio][0002]
46 | * [Transformation - WebVTT or OHMS XML to Annotations][0079]
47 | * [Begin playback at a specific point - Time-based media][0015]
48 | * [Embedded or Referenced Annotations][0269]
49 |
50 | {% include acronyms.md %}
51 | {% include links.md %}
52 |
53 |
--------------------------------------------------------------------------------
/recipe/0258-tagging-external-resource/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": {
6 | "en": [
7 | "Picture of Göttingen taken during the 2019 IIIF Conference"
8 | ]
9 | },
10 | "items": [
11 | {
12 | "id": "{{ id.path }}/canvas/p1",
13 | "type": "Canvas",
14 | "height": 3024,
15 | "width": 4032,
16 | "items": [
17 | {
18 | "id": "{{ id.path }}/page/p1/1",
19 | "type": "AnnotationPage",
20 | "items": [
21 | {
22 | "id": "{{ id.path }}/annotation/p0001-image",
23 | "type": "Annotation",
24 | "motivation": "painting",
25 | "body": {
26 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
27 | "type": "Image",
28 | "format": "image/jpeg",
29 | "height": 3024,
30 | "width": 4032,
31 | "service": [
32 | {
33 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
34 | "profile": "level1",
35 | "type": "ImageService3"
36 | }
37 | ]
38 | },
39 | "target": "{{ id.path }}/canvas/p1"
40 | }
41 | ]
42 | }
43 | ],
44 | "annotations": [
45 | {
46 | "id": "{{ id.path }}/page/p2/1",
47 | "type": "AnnotationPage",
48 | "items": [
49 | {
50 | "id": "{{ id.path }}/annotation/anno/p0002-wikidata",
51 | "type": "Annotation",
52 | "motivation": "tagging",
53 | "body": [
54 | {
55 | "type": "SpecificResource",
56 | "source": "http://www.wikidata.org/entity/Q18624915"
57 | },
58 | {
59 | "type": "TextualBody",
60 | "value": "Gänseliesel-Brunnen",
61 | "format": "text/plain",
62 | "language": "de"
63 | }
64 | ],
65 | "target": "{{ id.path }}/canvas/p1#xywh=749,1054,338,460"
66 | }
67 | ]
68 | }
69 | ]
70 | }
71 | ]
72 | }
--------------------------------------------------------------------------------
/recipe/0266-full-canvas-annotation/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": {
6 | "en": [
7 | "Picture of Göttingen taken during the 2019 IIIF Conference"
8 | ]
9 | },
10 | "items": [
11 | {
12 | "id": "{{ id.path }}/canvas-1",
13 | "type": "Canvas",
14 | "height": 3024,
15 | "width": 4032,
16 | "items": [
17 | {
18 | "id": "{{ id.path }}/canvas-1/annopage-1",
19 | "type": "AnnotationPage",
20 | "items": [
21 | {
22 | "id": "{{ id.path }}/canvas-1/annopage-1/anno-1",
23 | "type": "Annotation",
24 | "motivation": "painting",
25 | "body": {
26 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
27 | "type": "Image",
28 | "format": "image/jpeg",
29 | "height": 3024,
30 | "width": 4032,
31 | "service": [
32 | {
33 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
34 | "profile": "level1",
35 | "type": "ImageService3"
36 | }
37 | ]
38 | },
39 | "target": "{{ id.path }}/canvas-1"
40 | }
41 | ]
42 | }
43 | ],
44 | "annotations": [
45 | {
46 | "id": "{{ id.path }}/canvas-1/annopage-2",
47 | "type": "AnnotationPage",
48 | "items": [
49 | {
50 | "id": "{{ id.path }}{{ id.path }}/canvas-1/annopage-2/anno-1",
51 | "type": "Annotation",
52 | "motivation": "commenting",
53 | "body": {
54 | "type": "TextualBody",
55 | "language": "de",
56 | "format": "text/plain",
57 | "value": "Göttinger Marktplatz mit Gänseliesel Brunnen"
58 | },
59 | "target": "{{ id.path }}/canvas-1"
60 | }
61 | ]
62 | }
63 | ]
64 | }
65 | ]
66 | }
67 |
--------------------------------------------------------------------------------
/recipe/0014-accompanyingcanvas/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": { "en": ["Partial audio recording of Gustav Mahler's _Symphony No. 3_"] },
6 | "items": [
7 | {
8 | "id": "{{ id.path }}/canvas/p1",
9 | "type": "Canvas",
10 | "label": { "en": [ "Gustav Mahler, Symphony No. 3, CD 1" ] },
11 | "duration": 1985.024,
12 | "accompanyingCanvas": {
13 | "id": "{{ id.path }}/canvas/accompanying",
14 | "type": "Canvas",
15 | "label": { "en": [ "First page of score for Gustav Mahler, Symphony No. 3" ] },
16 | "height": 998,
17 | "width": 772,
18 | "items": [
19 | {
20 | "id": "{{ id.path }}/canvas/accompanying/annotation/page",
21 | "type": "AnnotationPage",
22 | "items": [
23 | {
24 | "id": "{{ id.path }}/canvas/accompanying/annotation/image",
25 | "type": "Annotation",
26 | "motivation": "painting",
27 | "body": {
28 | "id": "https://iiif.io/api/image/3.0/example/reference/4b45bba3ea612ee46f5371ce84dbcd89-mahler-0/full/,998/0/default.jpg",
29 | "type": "Image",
30 | "format": "image/jpeg",
31 | "height": 998,
32 | "width": 772,
33 | "service": [
34 | {
35 | "id": "https://iiif.io/api/image/3.0/example/reference/4b45bba3ea612ee46f5371ce84dbcd89-mahler-0",
36 | "type": "ImageService3",
37 | "profile": "level1"
38 | }
39 | ]
40 | },
41 | "target": "{{ id.path }}/canvas/accompanying"
42 | }
43 | ]
44 | }
45 | ]
46 | },
47 | "items": [
48 | {
49 | "id": "{{ id.path }}/canvas/page/p1",
50 | "type": "AnnotationPage",
51 | "items": [
52 | {
53 | "id": "{{ id.path }}/canvas/page/annotation/segment1-audio",
54 | "type": "Annotation",
55 | "motivation": "painting",
56 | "body": {
57 | "id": "https://fixtures.iiif.io/audio/indiana/mahler-symphony-3/CD1/medium/128Kbps.mp4",
58 | "type": "Sound",
59 | "duration": 1985.024,
60 | "format": "video/mp4"
61 | },
62 | "target": "{{ id.path }}/canvas/p1"
63 | }
64 | ]
65 | }
66 | ]
67 | }
68 | ]
69 | }
--------------------------------------------------------------------------------
/recipe/0040-image-rotation-service/manifest-css.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": {
6 | "ca": [
7 | "[Conoximent de las orines] Ihesus, Ihesus. En nom de Deu et dela beneyeta sa mare e de tots los angels i archangels e de tots los sants e santes de paradis yo micer Johannes comense aquest libre de reseptes en l’ayn Mi 466."
8 | ]
9 | },
10 | "items": [
11 | {
12 | "id": "{{ id.path }}/canvas/p1",
13 | "type": "Canvas",
14 | "label": {
15 | "en": [
16 | "inside cover; 1r"
17 | ]
18 | },
19 | "width": 2105,
20 | "height": 1523,
21 | "items": [
22 | {
23 | "id": "{{ id.path }}/p1/1",
24 | "type": "AnnotationPage",
25 | "items": [
26 | {
27 | "id": "{{ id.path }}/annotation/v0001-image",
28 | "type": "Annotation",
29 | "motivation": "painting",
30 | "stylesheet": {
31 | "type": "CssStylesheet",
32 | "value": ".rotated { transform-origin: 761px 1344px; transform: rotate(90deg) translateY(-582px); }"
33 | },
34 | "body": {
35 | "id": "{{ id.path }}/body/sr1",
36 | "type": "SpecificResource",
37 | "styleClass": "rotated",
38 | "source": {
39 | "id": "https://iiif.io/api/image/3.0/example/reference/85a96c630f077e6ac6cb984f1b752bbf-0-21198-zz00022840-1-page1/full/max/0/default.jpg",
40 | "type": "Image",
41 | "format": "image/jpeg",
42 | "width": 1523,
43 | "height": 2105,
44 | "service": [
45 | {
46 | "id": "https://iiif.io/api/image/3.0/example/reference/85a96c630f077e6ac6cb984f1b752bbf-0-21198-zz00022840-1-page1",
47 | "type": "ImageService3",
48 | "profile": "level1"
49 | }
50 | ]
51 | }
52 | },
53 | "target": "{{ id.path }}/canvas/p1"
54 | }
55 | ]
56 | }
57 | ]
58 | }
59 | ]
60 | }
--------------------------------------------------------------------------------
/recipe/0021-tagging/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Simple Annotation — Tagging
3 | id: 21
4 | layout: recipe
5 | tags: [annotation]
6 | summary: "Tagging as a basic Annotation"
7 | viewers:
8 | - Mirador
9 | - Annona
10 | - Glycerine Viewer
11 | - Theseus
12 | - liiive
13 | - TIFY
14 | topic: annotation
15 | code:
16 | - iiif-prezi3
17 | ---
18 |
19 | ## Use Case
20 |
21 | For a IIIF resource, you'd like to add a simple Annotation to the resource. This annotation might call out a particular element or feature of an image as a tag. Such a tag, as part of a Manifest for the resource, would become discoverable and potentially aggregated with other identical or similar tags across the IIIF resources of one or more institutions.
22 |
23 | ## Implementation Notes
24 |
25 | This recipe demonstrates a simple way to use an Annotation to tag a IIIF resource or a portion of a IIIF resource: an Annotation with a `motivation` property that has a value of `tagging`. The foundation of tags in IIIF is the [W3C Web Annotation Data Model](http://w3.org/TR/annotation-model/), which you are encouraged to consult.
26 |
27 | Though it is not demonstrated here, it's worth noting that Annotations such as tags are permitted to use the `behavior` property with a value of `hidden`. With that property so set, viewers and other consuming clients should not display the tag by default, but should allow the user to determine the tag's visibility.
28 |
29 | ## Restrictions
30 |
31 | None known.
32 |
33 | ## Example
34 |
35 | In this Manifest, we use a photograph of Göttingen from the 2019 IIIF annual conference, one that has provided the resource for some other basic recipes in this cookbook. We're introducing an Annotation to demonstrate tagging by calling out the statue on the top of a fountain, a notable landmark of its city.
36 |
37 | Because the statue is not the sole or dominant element of the photo, we've targeted the tag to a portion of the photo using fragment selector syntax.
38 |
39 | {% include manifest_links.html viewers="Mirador,Annona,Glycerine Viewer, Theseus, liiive, TIFY" manifest="manifest.json" %}
40 |
41 | {% include jsonviewer.html src="manifest.json" config='data-line="44-63"' %}
42 |
43 | ## Related Recipes
44 |
45 | * [Fragment Selectors][0020]
46 |
47 | {% include acronyms.md %}
48 | {% include links.md %}
49 |
--------------------------------------------------------------------------------
/recipe/0007-string-formats/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": { "en": [ "Picture of Göttingen taken during the 2019 IIIF Conference" ] },
6 | "summary": { "en": [ "Picture taken by the IIIF Technical Coordinator
" ] }, 7 | "metadata": [ 8 | { 9 | "label": { "en": [ "Author" ] }, 10 | "value": { "none": [ "Glen Robson" ] } 11 | } 12 | ], 13 | "rights": "http://creativecommons.org/licenses/by-sa/3.0/", 14 | "requiredStatement": { 15 | "label": { "en": [ "Attribution" ] }, 16 | "value": { "en": [ "Glen Robson, IIIF Technical Coordinator. CC BY-SA 3.0" ] }
17 | },
18 | "items": [
19 | {
20 | "id": "{{ id.path }}/canvas/p1",
21 | "type": "Canvas",
22 | "height": 3024,
23 | "width": 4032,
24 | "items": [
25 | {
26 | "id": "{{ id.path }}/page/p1/1",
27 | "type": "AnnotationPage",
28 | "items": [
29 | {
30 | "id": "{{ id.path }}/annotation/p0001-image",
31 | "type": "Annotation",
32 | "motivation": "painting",
33 | "body": {
34 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
35 | "type": "Image",
36 | "format": "image/jpeg",
37 | "height": 3024,
38 | "width": 4032,
39 | "service": [
40 | {
41 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
42 | "profile": "level1",
43 | "type": "ImageService3"
44 | }
45 | ]
46 | },
47 | "target": "{{ id.path }}/canvas/p1"
48 | }
49 | ]
50 | }
51 | ]
52 | }
53 | ]
54 | }
55 |
--------------------------------------------------------------------------------
/recipe/0013-placeholderCanvas/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": { "en": [ "Video recording of Donizetti's _The Elixer of Love_" ] },
6 | "items": [
7 | {
8 | "id": "{{ id.path }}/canvas/donizetti",
9 | "type": "Canvas",
10 | "duration": 7278.466,
11 | "width": 640,
12 | "height": 360,
13 | "placeholderCanvas": {
14 | "id": "{{ id.path }}/canvas/donizetti/placeholder",
15 | "type": "Canvas",
16 | "width": 640,
17 | "height": 360,
18 | "items": [
19 | {
20 | "id": "{{ id.path }}/canvas/donizetti/placeholder/1",
21 | "type": "AnnotationPage",
22 | "items": [
23 | {
24 | "id": "{{ id.path }}/canvas/donizetti/placeholder/1-image",
25 | "type": "Annotation",
26 | "motivation": "painting",
27 | "body": {
28 | "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/act1-thumbnail.png",
29 | "type": "Image",
30 | "format": "image/png",
31 | "width": 640,
32 | "height": 360
33 | },
34 | "target": "{{ id.path }}/canvas/donizetti/placeholder"
35 | }
36 | ]
37 | }
38 | ]
39 | },
40 | "items": [
41 | {
42 | "id": "{{ id.path }}/donizetti/1",
43 | "type": "AnnotationPage",
44 | "items": [
45 | {
46 | "id": "{{ id.path }}/donizetti/1-video",
47 | "type": "Annotation",
48 | "motivation": "painting",
49 | "body": {
50 | "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low.mp4",
51 | "type": "Video",
52 | "duration": 7278.466,
53 | "width": 640,
54 | "height": 360,
55 | "format": "video/mp4"
56 | },
57 | "target": "{{ id.path }}/canvas/donizetti"
58 | }
59 | ]
60 | }
61 | ]
62 | }
63 | ]
64 | }
--------------------------------------------------------------------------------
/recipe/0064-opera-one-canvas/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Table of Contents for Multiple A/V Files on a Single Canvas
3 | id: 64
4 | layout: recipe
5 | tags: [video, presentation, opera]
6 | summary: "A video recording of an opera on one Canvas."
7 | viewers:
8 | - UV
9 | - Ramp
10 | - Theseus
11 | topic: AV
12 | property: start
13 | ---
14 |
15 |
16 | ## Use Case
17 |
18 | It is common to have A/V content split into multiple files. This recipe shows how to model such content using one single Canvas. The advantage of using one single Canvas is continuous playback across the files, with the viewer reporting the sum duration of the files, thus providing the user with a cohesive viewing/listening experience.
19 |
20 | ## Implementation Notes
21 |
22 | This implementation builds upon the [Table of Contents for A/V Content][0026] recipe but uses two video files, one for each act of the opera used as example, annotated onto the same Canvas: Atto Primo targets #t=0, and Atto Secondo targets #t=3971.24, right after the end of Atto Primo, thus ensuring continuous playback. Conceptually it makes more sense to include both acts as annotations on the same Annotation Page since they are both targeting the same Canvas.
23 |
24 | The opera covers the whole length of the Canvas and is divided into two Ranges for the two acts. Atto Primo has a Range for the prelude and first song and then a Range for the remainder of the act. Atto Secondo has not been subdivided into Ranges for simplicity of this example.
25 |
26 | Metadata and thumbnail properties have been added for more context. Implementation is similar to [Book Chapters][0024], but nesting may be deeper.
27 |
28 | ## Example
29 |
30 | {% include manifest_links.html viewers="UV, Ramp" manifest="manifest.json" %}
31 | {% include jsonviewer.html src="manifest.json" %}
32 |
33 | ## Related Recipes
34 |
35 | - [Text in Multiple Languages][0006] - Recipe explaining the use of multiple languages in text like in the label for this opera.
36 | - [Thumbnails][0012]
37 | - [Table of Contents for A/V Content][0026] - Another example of using nested Ranges to represent an opera's table of contents.
38 | - [Table of Contents for Multiple A/V Files on Multiple Canvases][0065] - The same opera from this example but in audio format split across multiple Canvases.
39 |
40 | {% include acronyms.md %}
41 | {% include links.md %}
42 |
--------------------------------------------------------------------------------
/recipe/0017-transcription-av/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Providing Access to Transcript Files of A/V Content
3 | id: 17
4 | layout: recipe
5 | tags: [audio, video, presentation, transcript]
6 | summary: "Transcripts as alternative representation of A/V content"
7 | viewers:
8 | - Ramp
9 | - Aviary
10 | - Theseus
11 | topic: AV
12 | property: rendering
13 | code:
14 | - iiif-prezi3
15 | ---
16 |
17 |
18 | ## Use Case
19 |
20 | You have a transcription file for your A/V resource and want to allow users to download it.
21 |
22 | ## Implementation notes
23 |
24 | A transcription file is a text-based representation of an audio or video file, which may or may not be in a timed-text format. As an alternative representation of the main resource, a transcription is added to a resource via the linking property `rendering`.
25 |
26 | See [Using Annotations for Timed Text][0079] when the transcript is in a timed-text format and you want to take advantage of a client's ability to synchronize it with its A/V resource during playback.
27 |
28 | While transcripts, captions, and subtitles each present some text interpretation of the A/V content, the ways they are consumed by the users differ. For a more detailed discussion about these differences see [Transcripts, Captions, and Subtitles - General Considerations][0231].
29 |
30 | ## Restrictions
31 |
32 | None.
33 |
34 | ## Example
35 |
36 | In this example, the Manifest is using a single A/V file; therefore, it is equivalent to link the transcript at the Manifest level or at the Canvas level and we do it at the Canvas level to complement the example in [Providing Alternative Representations][0046].
37 |
38 | In Ramp, the transcript file is made available to download on the right of the player controls. Click the filename listed in the menu to download the transcript file.
39 |
40 | {% include manifest_links.html viewers="Ramp, Aviary, Theseus" manifest="manifest.json" %}
41 |
42 | {% include jsonviewer.html src="manifest.json" config='data-line="39-50"'%}
43 |
44 | # Related recipes
45 |
46 | - [Simplest Manifest - Video][0003]
47 | - [Providing Alternative Representations][0046]
48 | - [Using Annotations for Timed Text][0079]
49 | - [Transcripts, Captions, and Subtitles - General Considerations][0231]
50 | - [A side by side transcript of a video recording][0253]
51 |
52 | {% include acronyms.md %}
53 | {% include links.md %}
54 |
--------------------------------------------------------------------------------
/recipe/0346-multilingual-annotation-body/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": {
6 | "en": [
7 | "Koto, chess, calligraphy, and painting"
8 | ],
9 | "ja": [
10 | "琴棋書画図屏風"
11 | ]
12 | },
13 | "items": [
14 | {
15 | "id": "{{ id.path }}/canvas/p1",
16 | "type": "Canvas",
17 | "height": 3966,
18 | "width": 8800,
19 | "items": [
20 | {
21 | "id": "{{ id.path }}/page/p1/1",
22 | "type": "AnnotationPage",
23 | "items": [
24 | {
25 | "id": "{{ id.path }}/annotation/p0001-image",
26 | "type": "Annotation",
27 | "motivation": "painting",
28 | "body": {
29 | "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004/full/max/0/default.jpg",
30 | "type": "Image",
31 | "format": "image/jpeg",
32 | "height": 3966,
33 | "width": 8800,
34 | "service": [
35 | {
36 | "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004",
37 | "profile": "level1",
38 | "type": "ImageService3"
39 | }
40 | ]
41 | },
42 | "target": "{{ id.path }}/canvas/p1"
43 | }
44 | ]
45 | }
46 | ],
47 | "annotations": [
48 | {
49 | "id": "{{ id.path }}/page/p2/1",
50 | "type": "AnnotationPage",
51 | "items": [
52 | {
53 | "id": "{{ id.path }}/annotation/p0001-comment",
54 | "type": "Annotation",
55 | "motivation": "commenting",
56 | "body": {
57 | "type": "Choice",
58 | "items": [
59 | {
60 | "type": "TextualBody",
61 | "value": "Koto with a cover being carried",
62 | "language": "en",
63 | "format": "text/plain"
64 | },
65 | {
66 | "type": "TextualBody",
67 | "value": "袋に収められた琴",
68 | "language": "ja",
69 | "format": "text/plain"
70 | }
71 | ]
72 | },
73 | "target": "{{ id.path }}/canvas/p1#xywh=1650,1200,925,1250"
74 | }
75 | ]
76 | }
77 | ]
78 | }
79 | ]
80 | }
81 |
--------------------------------------------------------------------------------
/recipe/0103-poetry-reading-annotations/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context":"http://iiif.io/api/presentation/3/context.json",
3 | "id":"{{ id.url }}",
4 | "type":"Manifest",
5 | "label":{
6 | "en":[
7 | "Mediation and Lived Experience - Daphne Marlatt Performs With Her Younger Self"
8 | ]
9 | },
10 | "items":[
11 | {
12 | "id":"{{ id.path }}/canvas/1",
13 | "type":"Canvas",
14 | "duration":707.81,
15 | "items":[
16 | {
17 | "type":"AnnotationPage",
18 | "id":"{{ id.path }}/canvas/1/item_page/1",
19 | "items":[
20 | {
21 | "id":"{{ id.path }}/canvas/1/painting/1",
22 | "type":"Annotation",
23 | "motivation":"painting",
24 | "body":{
25 | "id":"https://fixtures.iiif.io/audio/ubc/Performing-the-Archive-Leaf-leafs-by-Daphne-Marlatt.mp3",
26 | "type":"Sound",
27 | "format":"audio/mpeg",
28 | "duration":707.81
29 | },
30 | "target":"{{ id.path }}/canvas/1"
31 | }
32 | ]
33 | }
34 | ],
35 | "annotations":[
36 | {
37 | "id":"{{ id.path }}/canvas/1/page1",
38 | "type":"AnnotationPage",
39 | "label":{
40 | "en":[
41 | "Environmental Noise"
42 | ]
43 | },
44 | "items":[
45 | {
46 | "type":"Annotation",
47 | "motivation":[
48 | "commenting"
49 | ],
50 | "id":"{{ id.path }}/canvas/1/page1/anno2",
51 | "body":[
52 | {
53 | "type":"TextualBody",
54 | "value":"Soft laughter, rustling",
55 | "format":"text/plain",
56 | "motivation":"commenting"
57 | }
58 | ],
59 | "target":"{{ id.path }}/canvas/1#t=702.0,705.0"
60 | }
61 | ]
62 | }
63 | ]
64 | }
65 | ]
66 | }
67 |
--------------------------------------------------------------------------------
/recipe/0540-link-for-opening-multiple-canvases/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}/manifest.json",
4 | "type": "Manifest",
5 | "label": {
6 | "en": [
7 | "Two monuments in Rome"
8 | ]
9 | },
10 | "items": [
11 | {
12 | "id": "{{ id.path }}/canvas/p1",
13 | "type": "Canvas",
14 | "label": {
15 | "en": [
16 | "The Temple of Vesta Rome"
17 | ]
18 | },
19 | "height": 1464,
20 | "width": 2048,
21 | "items": [
22 | {
23 | "id": "{{ id.path }}/page/p1/1",
24 | "type": "AnnotationPage",
25 | "items": [
26 | {
27 | "id": "{{ id.path }}/annotation/p0001-image",
28 | "type": "Annotation",
29 | "motivation": "painting",
30 | "body": {
31 | "id": "https://fixtures.iiif.io/images/Yale/ycba/The_Temple_of_Vesta_Rome.jpg",
32 | "type": "Image",
33 | "format": "image/jpeg",
34 | "height": 1464,
35 | "width": 2048
36 | },
37 | "target": "{{ id.path }}/canvas/p1"
38 | }
39 | ]
40 | }
41 | ]
42 | },
43 | {
44 | "id": "{{ id.path }}/canvas/p2",
45 | "type": "Canvas",
46 | "label": {
47 | "en": [
48 | "The Colosseum"
49 | ]
50 | },
51 | "height": 1302,
52 | "width": 2048,
53 | "items": [
54 | {
55 | "id": "{{ id.path }}/page/p2/1",
56 | "type": "AnnotationPage",
57 | "items": [
58 | {
59 | "id": "{{ id.path }}/annotation/p0002-image",
60 | "type": "Annotation",
61 | "motivation": "painting",
62 | "body": {
63 | "id": "https://fixtures.iiif.io/images/Yale/ycba/The_Colosseum_Rome2.jpg",
64 | "type": "Image",
65 | "format": "image/jpeg",
66 | "height": 1302,
67 | "width": 2048
68 | },
69 | "target": "{{ id.path }}/canvas/p2"
70 | }
71 | ]
72 | }
73 | ]
74 | }
75 | ]
76 | }
--------------------------------------------------------------------------------
/recipe/0007-string-formats/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Embedding HTML in descriptive properties
3 | id: 7
4 | layout: recipe
5 | tags: [text, presentation]
6 | summary: "You want to have more control on how your metadata is displayed. For example scientific names, and also links out to other sites. Also legacy systems that might include things like italic tags."
7 | viewers:
8 | - UV
9 | - Mirador
10 | - Annona
11 | - Clover
12 | - Glycerine Viewer
13 | - Theseus
14 | - Curation
15 | - liiive
16 | - TIFY
17 | topic: property
18 | property: label, summary, metadata, requiredStatement
19 | code:
20 | - iiif-prezi3
21 | ---
22 |
23 | ## Use Case
24 |
25 | You want to have more control on how your metadata is displayed by adding links or simple formatting instructions to selected text blocks. For example, scientific names might need special formatting and links out to other sites benefit from being activatable. Legacy systems may also include rudimentary formatting in their output.
26 |
27 | ## Implementation notes
28 |
29 | You may include minimal HTML markup only in the `summary` property and the `value` property in the `metadata` and `requiredStatement` objects. HTML is not permitted in `label` or other properties. Your HTML must be [well-formed XML](https://validator.w3.org/) and therefore must be wrapped in an element such as `p` or `span`.
30 |
31 | To alert a consuming application that your content is HTML, the first character in your string must be ‘<’ and the last character must be ‘>’. If your content is plain text but happens to start and end with angle brackets as described above, add an additional whitespace character to the end of the value.
32 |
33 | ## Restrictions
34 |
35 | For security reasons, clients are expected to allow only `a`, `b`, `br`, `i`, `img`, `p`, `small`, `span`, `sub`, and `sup` tags, and may remove any or all of those. For more details of permitted and prohibited markup, see [the specification](https://iiif.io/api/presentation/3.0/#45-html-markup-in-property-values).
36 |
37 | ## Example
38 |
39 | {% include manifest_links.html viewers="UV, Mirador, Annona, Clover, Glycerine Viewer, Theseus, Curation, liiive, TIFY" manifest="manifest.json" %}
40 |
41 | {% include jsonviewer.html src="manifest.json" config='data-line="7,12,24,38"' %}
42 |
43 | # Related recipes
44 |
45 | * [Simplest Manifest - Single Image File][0001]
46 |
47 | {% include acronyms.md %}
48 | {% include links.md %}
49 |
--------------------------------------------------------------------------------
/recipe/0202-start-canvas/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Load Manifest Beginning with a Specific Canvas
3 | id: 202
4 | layout: recipe
5 | tags: [image]
6 | summary: "This manifest uses the 'start' property to specify which Canvas the client should display on initialization of the resource."
7 | viewers:
8 | - Mirador
9 | - Annona
10 | - Glycerine Viewer
11 | - Theseus
12 | - TIFY
13 | topic:
14 | - image
15 | - property
16 | property: start
17 | ---
18 |
19 | ## Use Case
20 |
21 | In some cases, a book object will have front matter that most users would like to skip, such as blank pages (or perhaps shots of the binding and other non-textual views or color calibration images). In this recipe, we demonstrate using the `start` property to tell the presentation client to skip the initial Canvas (a blank page) and instead display the second Canvas (where the content begins) when loading the resource.
22 |
23 | ## Implementation Notes
24 |
25 | This recipe extends [Multiple Related Images (Book, etc.)][0009] by adding the information required by a client to load the Manifest at a specific Canvas. This is done by adding the `start` property to the Manifest and specifying the Canvas the client should display on initialization.
26 |
27 | The target of `start` must be a JSON object with `id` and `type` properties, where `type` can be either a Canvas or a Specific Resource with a Selector. In this use case, the target type property is a Canvas (`"type": "Canvas"`).
28 |
29 | For an example of the `start` property using a Specific Resource with a Selector, see [Begin playback at a specific point - Time-based media][0015]. For more on the start property, see: [Start Property][prezi3-start].
30 |
31 | ## Example
32 |
33 | This example shows a Manifest with multiple Canvases for a book object. The `start` property specifies loading the Manifest at the second Canvas. Note that all Canvases are still displayed in the viewer and the user is able to navigate back to the first Canvas using the viewer navigation controls.
34 |
35 | {% include manifest_links.html viewers="Mirador,Annona,Glycerine Viewer, Theseus, TIFY" manifest="manifest.json" %}
36 |
37 | {% include jsonviewer.html src="manifest.json" config='data-line="10-13"'%}
38 |
39 | ## Related Recipes
40 |
41 | * [Begin playback at a specific point - Time-based media][0015]
42 | * [Multiple Related Images (Book, etc.)][0009]
43 |
44 | {% include acronyms.md %}
45 | {% include links.md %}
46 |
--------------------------------------------------------------------------------
/recipe/0019-html-in-annotations/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@context": "http://iiif.io/api/presentation/3/context.json",
3 | "id": "{{ id.url }}",
4 | "type": "Manifest",
5 | "label": {
6 | "en": [
7 | "Picture of Göttingen taken during the 2019 IIIF Conference"
8 | ]
9 | },
10 | "items": [
11 | {
12 | "id": "{{ id.path }}/canvas-1",
13 | "type": "Canvas",
14 | "height": 3024,
15 | "width": 4032,
16 | "items": [
17 | {
18 | "id": "{{ id.path }}/canvas-1/annopage-1",
19 | "type": "AnnotationPage",
20 | "items": [
21 | {
22 | "id": "{{ id.path }}/canvas-1/annopage-1/anno-1",
23 | "type": "Annotation",
24 | "motivation": "painting",
25 | "body": {
26 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
27 | "type": "Image",
28 | "format": "image/jpeg",
29 | "height": 3024,
30 | "width": 4032,
31 | "service": [
32 | {
33 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
34 | "profile": "level1",
35 | "type": "ImageService3"
36 | }
37 | ]
38 | },
39 | "target": "{{ id.path }}/canvas-1"
40 | }
41 | ]
42 | }
43 | ],
44 | "annotations": [
45 | {
46 | "id": "{{ id.path }}/canvas-1/annopage-2",
47 | "type": "AnnotationPage",
48 | "items": [
49 | {
50 | "id": "{{ id.path }}/canvas-1/annopage-2/anno-1",
51 | "type": "Annotation",
52 | "motivation": "commenting",
53 | "body": {
54 | "type": "TextualBody",
55 | "language": "de",
56 | "format": "text/html",
57 | "value": "Göttinger Marktplatz mit Gänseliesel Brunnen 
Berliner Tageblatt - Staatsbibliothek zu Berlin - Preußischer Kulturbesitz. Public Domain Mark - http://creativecommons.org/publicdomain/mark/1.0/
" 51 | ] 52 | } 53 | }, 54 | "provider": [{ 55 | "id": "https://www.europeana.eu/", 56 | "type": "Agent", 57 | "label": { "en": [ "Europeana" ] }, 58 | "logo": [ 59 | { 60 | "id": "https://style.europeana.eu/images/europeana-logo-default.png", 61 | "type": "Image", 62 | "format": "image/png", 63 | "height": 310, 64 | "width": 100 65 | } 66 | ] 67 | }], 68 | "seeAlso": [ 69 | { 70 | "id": "https://www.europeana.eu/api/v2/record/9200355/BibliographicResource_3000096302605.json-ld", 71 | "type": "Dataset", 72 | "format": "application/ld+json", 73 | "profile": "http://www.europeana.eu/schemas/edm/" 74 | } 75 | ], 76 | "items": [ 77 | { 78 | "id": "{{ id.path }}/newspaper_issue_1-manifest.json", 79 | "type": "Manifest", 80 | "label": { 81 | "de": [ 82 | "Berliner Tageblatt - 1925-02-16" 83 | ] 84 | }, 85 | "navDate": "1925-02-16T00:00:00Z" 86 | }, 87 | { 88 | "id": "{{ id.path }}/newspaper_issue_2-manifest.json", 89 | "type": "Manifest", 90 | "label": { 91 | "de": [ 92 | "Berliner Tageblatt - 1925-03-13" 93 | ] 94 | }, 95 | "navDate": "1925-03-13T00:00:00Z" 96 | } 97 | ] 98 | } 99 | -------------------------------------------------------------------------------- /recipe/0377-image-in-annotation/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Image in Annotations 3 | id: 377 4 | layout: recipe 5 | tags: [annotation] 6 | summary: "Provides an image in an annotation" 7 | viewers: 8 | - Annona 9 | - Glycerine Viewer 10 | - Theseus 11 | - TIFY 12 | topic: 13 | - basic 14 | --- 15 | 16 | ## Use Case 17 | 18 | Provide an image that adds details about or shows a different view of a particular feature/area of the Resource. 19 | 20 | - You have a group picture of many people. The image quality doesn't allow you to recognize all of them, so you annotate each face with the name of the person and an individual photo of that person. 21 | - You have a picture of an architect's plan for a building which has been built. To show how the completed building looks, you decide to annotate specific features, such as the patio, with actual photographs. 22 | - You have a Manifest with a video showing an old building at the time of its creation. In some instances, where the video shows a specific part of the building, you might want to annotate the video with a photo of how this part looks now. Annotations may be just one image or contain a description like, "This wall faces north, you can see there is more moss there." 23 | 24 | ## Implementation Notes 25 | 26 | Our supplementary image is not part of the Canvas content, thus it must not have the motivation `painting` and is placed in the `annotations` section of the Canvas. Following the [W3C Web Annotation model](https://www.w3.org/TR/annotation-model/#external-web-resources), we have two separate objects that make up the Annotation body. One object is an image which is the supplementary image and the other is a textual body which acts as a caption for the supplementary image. Both of these objects together target the Resource. 27 | 28 | ## Example 29 | 30 | The main content is a photo of a square in Göttingen, which shows, among others things, a fountain. We wanted to show the lights on the fountain during the night, so we associated the part of the Canvas containing the fountain with an Annotation consisting of a picture of the fountain at night and a text comment. 31 | 32 | {% include manifest_links.html viewers="Annona, Glycerine Viewer, Theseus, TIFY" manifest="manifest.json" %} 33 | 34 | {% include jsonviewer.html src="manifest.json" config="data-line='49-66'" %} 35 | 36 | ## Related Recipes 37 | 38 | * [Simplest Annotation][0266] 39 | * [Annotate specific images or layers][0326] to annotate only one of the images 40 | * [Annotation with a Non-Rectangular Polygon][0261] to precisely draw the contours of the fountain 41 | * [Tagging with an External Resource][0258] 42 | 43 | {% include acronyms.md %} 44 | {% include links.md %} 45 | -------------------------------------------------------------------------------- /recipe/0560-resources-on-a-timeline/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { 6 | "en": [ 7 | "Rendering Resources Sequentially on a Timeline" 8 | ] 9 | }, 10 | "behavior": [ 11 | "repeat" 12 | ], 13 | "items": [ 14 | { 15 | "id": "{{ id.path }}/canvas1", 16 | "type": "Canvas", 17 | "height": 2572, 18 | "width": 3764, 19 | "duration": 4.0, 20 | "items": [ 21 | { 22 | "id": "{{ id.path }}/canvas1/page/p1/1", 23 | "type": "AnnotationPage", 24 | "items": [ 25 | { 26 | "id": "{{ id.path }}/canvas1/annotation/p1a1-image", 27 | "type": "Annotation", 28 | "motivation": "painting", 29 | "body": { 30 | "id": "https://iiif.io/api/image/3.0/example/reference/329817fc8a251a01c393f517d8a17d87-Northeaster_by_Winslow_Homer_1895/full/max/0/default.jpg", 31 | "type": "Image", 32 | "format": "image/jpeg", 33 | "height": 2572, 34 | "width": 3764, 35 | "service": [ 36 | { 37 | "id": "https://iiif.io/api/image/3.0/example/reference/329817fc8a251a01c393f517d8a17d87-Northeaster_by_Winslow_Homer_1895/", 38 | "profile": "level1", 39 | "type": "ImageService3" 40 | } 41 | ] 42 | }, 43 | "target": "{{ id.path }}/canvas1&t=0,2" 44 | }, 45 | { 46 | "id": "{{ id.path }}/canvas1/annotation/p1a2-image", 47 | "type": "Annotation", 48 | "motivation": "painting", 49 | "body": { 50 | "id": "https://iiif.io/api/image/3.0/example/reference/329817fc8a251a01c393f517d8a17d87-Winslow_Homer_-_The_Gulf_Stream_-_Metropolitan_Museum_of_Art/full/max/0/default.jpg", 51 | "type": "Image", 52 | "format": "image/jpeg", 53 | "height": 3540, 54 | "width": 5886, 55 | "service": [ 56 | { 57 | "id": "https://iiif.io/api/image/3.0/example/reference/329817fc8a251a01c393f517d8a17d87-Winslow_Homer_-_The_Gulf_Stream_-_Metropolitan_Museum_of_Art/", 58 | "profile": "level1", 59 | "type": "ImageService3" 60 | } 61 | ] 62 | }, 63 | "target": "{{ id.path }}/canvas1&t=2,4" 64 | } 65 | ] 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /recipe/0014-accompanyingcanvas/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Audio Presentation with Accompanying Image" 3 | id: 14 4 | layout: recipe 5 | tags: [audio,image] 6 | summary: "Provide the user with something to look at before they choose to start interacting with the main content, and/or while they wait for it to load/buffer, and/or while interacting with the main content." 7 | viewers: 8 | - Clover 9 | - Aviary 10 | - Theseus 11 | topic: 12 | - property 13 | - AV 14 | property: accompanyingCanvas 15 | --- 16 | 17 | ## Use Case 18 | 19 | You have content you would like to provide to the user to enrich the presentation or experience of the main content. It could be something to experience before the user chooses to start interacting with the main content and/or something additional to consider while interacting with the main content. You might want to have an image available while an audio-only Canvas is playing or, conversely, audio available while a user is navigating an image-only Manifest. 20 | 21 | ## Implementation notes 22 | 23 | Across a Manifest and its properties, you may use more than one `accompanyingCanvas`, allowing you to have an authentic `accompanyingCanvas` for each appropriate resource (Collection, Manifest, Canvas, and Range). 24 | 25 | The `target` of the `Annotation` of an `accompanyingCanvas` should have as its value the `id` of the `accompanyingCanvas`, not the `id` of the resource that has the `accompanyingCanvas`. 26 | 27 | Always keep in mind the wide latitude given conforming clients: It is up to the client whether and in what sort of UI to display content you place in a `accompanyingCanvas` property. Don't use this property for content that must be displayed. On the other hand, placing content in a `accompanyingCanvas` does tell a client that the content, if displayed, should be displayed at the same time as the resource to which it is attached. 28 | 29 | ## Restrictions 30 | 31 | Each instance of `accompanyingCanvas` may only contain one Canvas, and as such may specifically not contain an additional `accompanyingCanvas` or a `placeholderCanvas`. 32 | 33 | ## Example 34 | 35 | In the example, the main Canvas contains audio of a performance of Gustav Mahler's Symphony No. 3 and the `accompanyingCanvas` contains an image of a page from the score. 36 | 37 | {% include manifest_links.html viewers="Clover, Aviary, Theseus" manifest="manifest.json" %} 38 | 39 | {% include jsonviewer.html src="manifest.json" config="data-line='20-58'"%} 40 | 41 | # Related recipes 42 | 43 | * [Simplest Manifest - Video][0003] 44 | * [Load a Preview Image Before the Main Content][0013], using `placeholderCanvas` to present one resource ahead of another. 45 | 46 | {% include acronyms.md %} 47 | {% include links.md %} 48 | -------------------------------------------------------------------------------- /recipe/0258-tagging-external-resource/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tagging with an External Resource 3 | id: 258 4 | layout: recipe 5 | tags: annotation, tagging, linking 6 | summary: "Connect a tagging annotation to an external resource" 7 | viewers: 8 | - Glycerine Viewer 9 | - Theseus 10 | topic: annotation 11 | --- 12 | 13 | ## Use Case 14 | 15 | When you annotate a resource with a tag, you'd like to connect that tag to an external source, whether an authority file, a linked data node, or something else that represents unambiguously some data you want to associate with the annotated resource. 16 | 17 | ## Implementation Notes 18 | The [IIIF Presentation 3.0 API][prezi3] does not itself discuss linking to external web resources in annotations, incorporating them from the [W3C Web Annotation Data Model](http://w3.org/TR/annotation-model/) by reference. For a full description of this and other portions of the data model used in IIIF annotations, we recommend you read that document. 19 | 20 | In order to make possible a link between the IIIF resource and an external web resource, the pertinent Annotation must have at least a `body` that is a Specific Resource whose `source` property contains the appropriate URI as its value. That `source` value must resolve, that is, it must be a real URI at the time of the creation of the Annotation. 21 | 22 | Finally, be sure you are writing valid value forms in your Annotation. In the Web Annotation data model, there are different patterns for the `value` property, when used within an Annotation. The `value` of a `TextualBody` or a `FragmentSelector`, for example, is a string rather than a JSON object. See also [the Presentation API v3.0](https://iiif.io/api/presentation/3.0/#56-annotation). 23 | 24 | ## Restrictions 25 | 26 | None known. 27 | 28 | ## Example 29 | 30 | In this example, we continue our use of a photograph of a square in Göttingen, Germany, which includes a fountain topped by a sculpture of a girl and 2 accompanying geese. While the Annotation `body` that points to the Wikidata entry for the fountain is valid all alone, we've added an additional `body` to provide the viewer a natural language textual label to display to a person using that viewer. 31 | 32 | Using multiple `body` properties, as shown here, does not have any predictable consequences for a viewer's handling of the data. With this in mind, each `body` in this Manifest could stand alone. 33 | 34 | {% include manifest_links.html viewers="Glycerine Viewer, Theseus" manifest="manifest.json" %} 35 | 36 | {% include jsonviewer.html src="manifest.json" config="data-line='49-66'"%} 37 | 38 | ## Related Recipes 39 | 40 | * [Simplest Annotation][0266] 41 | * [Simple Annotation — Tagging][0021] 42 | 43 | {% include links.md %} 44 | -------------------------------------------------------------------------------- /recipe/0033-choice/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { "en": [ "John Dee performing an experiment before Queen Elizabeth I." ] }, 6 | "items": [ 7 | { 8 | "id": "{{ id.path }}/canvas/p1", 9 | "type": "Canvas", 10 | "height": 1271, 11 | "width": 2000, 12 | "items": [ 13 | { 14 | "id": "{{ id.path }}/page/p1/1", 15 | "type": "AnnotationPage", 16 | "items": [ 17 | { 18 | "id": "{{ id.path }}/annotation/p0001-image", 19 | "type": "Annotation", 20 | "motivation": "painting", 21 | "body": { 22 | "type": "Choice", 23 | "items": [ 24 | { 25 | "id": "https://iiif.io/api/image/3.0/example/reference/421e65be2ce95439b3ad6ef1f2ab87a9-dee-natural/full/max/0/default.jpg", 26 | "type": "Image", 27 | "format": "image/jpeg", 28 | "width": 2000, 29 | "height": 1271, 30 | "label": { "en": [ "Natural Light" ] }, 31 | "service": [ 32 | { 33 | "id": "https://iiif.io/api/image/3.0/example/reference/421e65be2ce95439b3ad6ef1f2ab87a9-dee-natural", 34 | "type": "ImageService3", 35 | "profile": "level1" 36 | } 37 | ] 38 | }, 39 | { 40 | "id": "https://iiif.io/api/image/3.0/example/reference/421e65be2ce95439b3ad6ef1f2ab87a9-dee-xray/full/max/0/default.jpg", 41 | "type": "Image", 42 | "format": "image/jpeg", 43 | "width": 2000, 44 | "height": 1271, 45 | "label": { "en": [ "X-Ray" ] }, 46 | "service": [ 47 | { 48 | "id": "https://iiif.io/api/image/3.0/example/reference/421e65be2ce95439b3ad6ef1f2ab87a9-dee-xray", 49 | "type": "ImageService3", 50 | "profile": "level1" 51 | } 52 | ] 53 | } 54 | ] 55 | }, 56 | "target": "{{ id.path }}/canvas/p1" 57 | } 58 | ] 59 | } 60 | ] 61 | } 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /recipe/0135-annotating-point-in-canvas/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { 6 | "en": [ 7 | "Using a point selector for annotating a location on a map." 8 | ] 9 | }, 10 | "summary": { 11 | "en": [ 12 | "A map containing an point with an annotation of the location." 13 | ] 14 | }, 15 | "items": [ 16 | { 17 | "id": "{{ id.path }}/canvas.json", 18 | "type": "Canvas", 19 | "label": { 20 | "en": [ 21 | "Chesapeake and Ohio Canal Pamphlet" 22 | ] 23 | }, 24 | "height": 7072, 25 | "width": 5212, 26 | "items": [ 27 | { 28 | "id": "{{ id.path }}/contentPage.json", 29 | "type": "AnnotationPage", 30 | "items": [ 31 | { 32 | "id": "{{ id.path }}/content.json", 33 | "type": "Annotation", 34 | "motivation": "painting", 35 | "body": { 36 | "id": "https://iiif.io/api/image/3.0/example/reference/43153e2ec7531f14dd1c9b2fc401678a-88695674/full/max/0/default.jpg", 37 | "type": "Image", 38 | "format": "image/jpeg", 39 | "height": 7072, 40 | "width": 5212, 41 | "service": [ 42 | { 43 | "id": "https://iiif.io/api/image/3.0/example/reference/43153e2ec7531f14dd1c9b2fc401678a-88695674", 44 | "type": "ImageService3", 45 | "profile": "level1" 46 | } 47 | ] 48 | }, 49 | "target": "{{ id.path }}/canvas.json" 50 | } 51 | ] 52 | } 53 | ], 54 | "annotations": [ 55 | { 56 | "id": "{{ id.path }}/page/p2/1", 57 | "type": "AnnotationPage", 58 | "items": [ 59 | { 60 | "id": "{{ id.path }}/annotation/p0002-tag", 61 | "type": "Annotation", 62 | "motivation": "tagging", 63 | "body": { 64 | "type": "TextualBody", 65 | "value": "Town Creek Aqueduct", 66 | "language": "en", 67 | "format": "text/plain" 68 | }, 69 | "target": { 70 | "type": "SpecificResource", 71 | "source": "{{ id.path }}/canvas.json", 72 | "selector": { 73 | "type": "PointSelector", 74 | "x": 3385, 75 | "y": 1464 76 | } 77 | } 78 | } 79 | ] 80 | } 81 | ] 82 | } 83 | ] 84 | } 85 | -------------------------------------------------------------------------------- /recipe/0261-non-rectangular-commenting/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { 6 | "en": [ 7 | "Picture of Göttingen taken during the 2019 IIIF Conference" 8 | ] 9 | }, 10 | "items": [ 11 | { 12 | "id": "{{ id.path }}/canvas/p1", 13 | "type": "Canvas", 14 | "height": 3024, 15 | "width": 4032, 16 | "items": [ 17 | { 18 | "id": "{{ id.path }}/page/p1/1", 19 | "type": "AnnotationPage", 20 | "items": [ 21 | { 22 | "id": "{{ id.path }}/annotation/p0001-image", 23 | "type": "Annotation", 24 | "motivation": "painting", 25 | "body": { 26 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg", 27 | "type": "Image", 28 | "format": "image/jpeg", 29 | "height": 3024, 30 | "width": 4032, 31 | "service": [ 32 | { 33 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen", 34 | "profile": "level1", 35 | "type": "ImageService3" 36 | } 37 | ] 38 | }, 39 | "target": "{{ id.path }}/canvas/p1" 40 | } 41 | ] 42 | } 43 | ], 44 | "annotations": [ 45 | { 46 | "id": "{{ id.path }}/page/p2/1", 47 | "type": "AnnotationPage", 48 | "items": [ 49 | { 50 | "id": "{{ id.path }}/annotation/p0002-svg", 51 | "type": "Annotation", 52 | "motivation": "tagging", 53 | "body": { 54 | "type": "TextualBody", 55 | "value": "Gänseliesel-Brunnen", 56 | "language": "de", 57 | "format": "text/plain" 58 | }, 59 | "target": { 60 | "type": "SpecificResource", 61 | "source": "{{ id.path }}/canvas/p1", 62 | "selector": { 63 | "type": "SvgSelector", 64 | "value": "" 65 | } 66 | } 67 | } 68 | ] 69 | } 70 | ] 71 | } 72 | ] 73 | } -------------------------------------------------------------------------------- /recipe/0047-homepage/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Linking to Web Page of an Object 3 | id: 47 4 | layout: recipe 5 | tags: [metadata, presentation] 6 | summary: "tbc" 7 | viewers: 8 | - Mirador 9 | - Clover 10 | - Annona 11 | - Glycerine Viewer 12 | - Theseus 13 | - TIFY 14 | topic: property 15 | property: homepage 16 | --- 17 | 18 | ## Use Case 19 | 20 | You have a IIIF Manifest representing an object that is also represented by one or more home pages by an organization. These web pages may be published by the organization responsible for the object as well as its Manifest resource. For each homepage entry, an actionable route would be provided to a web page able to be displayed to the user. 21 | 22 | ## Implementation Notes 23 | 24 | Conforming clients may render the `homepage` property in various ways, yet most likely as an HTML anchor element for each entry. An alternative consideration could be as a button. 25 | 26 | If an anchor is utilized for the instance, the `id` represents the destination of the link and would serve as the value for its `href` attribute. 27 | 28 | The `label` is rendered as the content within the link according to the [Language of Property Values](https://iiif.io/api/presentation/3.0/#language-of-property-values). A client may also choose to provide a `lang` attribute on the anchor element with a value of the determined BCP 47 language code of the `label`. 29 | 30 | Entries of a `homepage` property may also have a `language` property. These values represent the language(s) of the destination web page. A client may also render a _single_ language entry as the value for `hreflang` attribute on the anchor element. Entries should have a `format` property, most likely with a value being `text/html`. 31 | 32 | ## Restrictions 33 | 34 | Web pages related to the object described by the Manifest that are not its home should utilize the `metadata` property as a `label` and `value` pair. 35 | 36 | ## Example 37 | 38 | In this example we have a Manifest representing an object housed at the Getty Museum Collection. A `homepage` property is at the Manifest level with one entry. The single instance references the URL at which a user could be displayed a web page of the object’s catalog entry. 39 | 40 | _Laocöon_. Credit: Getty. 41 | 42 | {% include manifest_links.html viewers="Mirador, Clover, Annona, Glycerine Viewer, Theseus, TIFY" manifest="manifest.json" %} 43 | 44 | {% include jsonviewer.html src="manifest.json" config='data-line="10-24"' %} 45 | 46 | ## Related Recipes 47 | 48 | - [Acknowledge Content Contributors][0234] for demonstrating the use of `homepage` for a `provider` 49 | - [Linking to Structured Metadata][0053] for demonstrating the use of `seeAlso` 50 | - [Metadata on any Resource][0029] 51 | 52 | {% include acronyms.md %} 53 | {% include links.md %} 54 | -------------------------------------------------------------------------------- /recipe/0040-image-rotation-service/manifest-service.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }} ", 4 | "type": "Manifest", 5 | "label": { 6 | "ca": [ 7 | "[Conoximent de las orines] Ihesus, Ihesus. En nom de Deu et dela beneyeta sa mare e de tots los angels i archangels e de tots los sants e santes de paradis yo micer Johannes comense aquest libre de reseptes en l’ayn Mi 466." 8 | ] 9 | }, 10 | "items": [ 11 | { 12 | "id": "{{ id.path }}/canvas/p1", 13 | "type": "Canvas", 14 | "label": { 15 | "en": [ 16 | "inside cover; 1r" 17 | ] 18 | }, 19 | "width": 2105, 20 | "height": 1523, 21 | "items": [ 22 | { 23 | "id": "{{ id.path }}/p1/1", 24 | "type": "AnnotationPage", 25 | "items": [ 26 | { 27 | "id": "{{ id.path }}/annotation/v0001-image", 28 | "type": "Annotation", 29 | "motivation": "painting", 30 | "body": { 31 | "id": "{{ id.path }}/body/v0001-image", 32 | "type": "SpecificResource", 33 | "source": { 34 | "id": "https://iiif.io/api/image/3.0/example/reference/85a96c630f077e6ac6cb984f1b752bbf-0-21198-zz00022840-1-page1/full/max/0/default.jpg", 35 | "type": "Image", 36 | "format": "image/jpeg", 37 | "width": 1523, 38 | "height": 2105, 39 | "service": [ 40 | { 41 | "id": "https://iiif.io/api/image/3.0/example/reference/85a96c630f077e6ac6cb984f1b752bbf-0-21198-zz00022840-1-page1", 42 | "type": "ImageService3", 43 | "profile": "level1" 44 | } 45 | ] 46 | }, 47 | "selector": { 48 | "type": "ImageApiSelector", 49 | "rotation": "270" 50 | } 51 | }, 52 | "target": "{{ id.path }}/canvas/p1" 53 | } 54 | ] 55 | } 56 | ] 57 | } 58 | ] 59 | } 60 | -------------------------------------------------------------------------------- /recipe/0026-toc-opera/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { "it": [ "L'Elisir D'Amore" ], "en": [ "The Elixir of Love" ] }, 6 | "items": [ 7 | { 8 | "id": "{{ id.path }}/canvas/1", 9 | "type": "Canvas", 10 | "width": 1920, 11 | "height": 1080, 12 | "duration": 7278.422, 13 | "items": [ 14 | { 15 | "id": "{{ id.path }}/canvas/1/annotation_page/1", 16 | "type": "AnnotationPage", 17 | "items": [ 18 | { 19 | "id": "{{ id.path }}/canvas/1/annotation_page/1/annotation/1", 20 | "type": "Annotation", 21 | "motivation": "painting", 22 | "target": "{{ id.path }}/canvas/1", 23 | "body": { 24 | "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low.mp4", 25 | "type": "Video", 26 | "format": "video/mp4", 27 | "height": 1080, 28 | "width": 1920, 29 | "duration": 7278.422 30 | } 31 | } 32 | ] 33 | } 34 | ] 35 | } 36 | ], 37 | "structures": [ 38 | { 39 | "type": "Range", 40 | "id": "{{ id.path }}/range/1", 41 | "label": { "it": [ "Gaetano Donizetti, L'Elisir D'Amore" ] }, 42 | "items": [ 43 | { 44 | "type": "Range", 45 | "id": "{{ id.path }}/range/2", 46 | "label": { "it": [ "Atto Primo" ] }, 47 | "items": [ 48 | { 49 | "type": "Range", 50 | "id": "{{ id.path }}/range/3", 51 | "label": { "it": [ "Preludio e Coro d'introduzione – Bel conforto al mietitore" ] }, 52 | "items": [ 53 | { 54 | "type": "Canvas", 55 | "id": "{{ id.path }}/canvas/1#t=0,302.05" 56 | } 57 | ] 58 | }, 59 | { 60 | "type": "Range", 61 | "id": "{{ id.path }}/range/4", 62 | "label": { "en": [ "Remainder of Atto Primo" ] }, 63 | "items": [ 64 | { 65 | "type": "Canvas", 66 | "id": "{{ id.path }}/canvas/1#t=302.05,3971.24" 67 | } 68 | ] 69 | } 70 | ] 71 | }, 72 | { 73 | "type": "Range", 74 | "id": "{{ id.path }}/range/5", 75 | "label": { "it": [ "Atto Secondo" ] }, 76 | "items": [ 77 | { 78 | "type": "Canvas", 79 | "id": "{{ id.path }}/canvas/1#t=3971.24" 80 | } 81 | ] 82 | } 83 | ] 84 | } 85 | ] 86 | } -------------------------------------------------------------------------------- /recipe/0219-using-caption-file/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Using Caption and Subtitle Files with Video Content 3 | id: 219 4 | layout: recipe 5 | tags: [video, caption, subtitle, presentation] 6 | summary: "Providing a caption or subtitle file to a video resource." 7 | viewers: 8 | - Clover 9 | - Ramp 10 | - Aviary 11 | - Theseus 12 | - TIFY 13 | topic: AV 14 | --- 15 | 16 | 17 | ## Use Case 18 | 19 | Captions and subtitles may be available for your video content and you may want to enable them for your IIIF video resources. 20 | 21 | ## Implementation notes 22 | 23 | Caption and subtitle file formats are used to mark up the external text track resources in connection with the HTML track element of a video file. The markup file formats use time tags that allow for time alignment of the video content with the captions or subtitles. 24 | 25 | Offering the caption file as an Annotation on the Canvas that contains the media file itself enables us to express the relationship between the two. The `type` and `format` properties of the Annotation can be used by the client to identify files in a format supported by the media player for captions. The `motivation` value of `supplementing` indicates the fact that processing this Annotation is optional. 26 | 27 | In addition to this implementation, one should consider offering the captions or subtitles as multiple timed annotations, making the text available in multiple ways. See [Using Annotations for Timed Text][0079]. 28 | 29 | While captions, subtitles, and transcripts each present some text interpretation of the A/V content, the ways in which they are consumed by users differ. For a more detailed discussion about these differences see [Transcripts, Captions, and Subtitles - General Considerations][0231]. 30 | 31 | ## Restrictions 32 | 33 | Formats other than [WebVTT](https://w3c.github.io/webvtt/) (Web Video Text Tracks) are supported in IIIF, but may not be as widely supported in viewers. 34 | 35 | When using segmented WebVTT with HLS, see [Serving HLS Files][0257]. 36 | 37 | ## Example 38 | 39 | In this example we use a caption file in the WebVTT format, but other options include a subtitle file in the [SRT](https://en.wikipedia.org/wiki/SubRip) (SubRip Text) or [TTML](https://w3c.github.io/ttml3/index.html) (Timed Text Markup Language) formats, or other text-based format used for the same purpose. 40 | 41 | {% include manifest_links.html viewers="Clover, Ramp, Aviary, Theseus, TIFY" manifest="manifest.json" %} 42 | 43 | {% include jsonviewer.html src="manifest.json" config='data-line="41-67"'%} 44 | 45 | # Related recipes 46 | 47 | - [Simplest Manifest - Video][0003] 48 | - [Providing Access to Transcripts of A/V Content][0017] 49 | - [Providing Alternative Representations][0046] 50 | - [Using Annotations for Timed Text][0079] 51 | - [Serving HLS Files][0257] 52 | 53 | {% include acronyms.md %} 54 | {% include links.md %} 55 | -------------------------------------------------------------------------------- /recipe/0466-link-for-loading-manifest/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sharing a link to open a Manifest in a specific viewer 3 | id: 466 4 | layout: recipe 5 | tags: [annotation] 6 | summary: "Allows users to use links that can be clicked to open a viewer with a selected manifest." 7 | viewers: 8 | - Mirador 9 | - Clover 10 | - Theseus 11 | - TIFY 12 | topic: 13 | - content-state 14 | --- 15 | 16 | # Use case 17 | You would like to provide the user a link to click that will open a specific Manifest directly in a preselected viewer application. For example, on your web page or in an email to a user or colleague, you share a link to a IIIF Manifest for a book that will automatically open in a Mirador instance. 18 | 19 | # Implementation notes 20 | This type of request can be implemented using the [IIIF Content State API](https://iiif.io/api/content-state) following the [HTTP GET (Query String) Parameter](https://iiif.io/api/content-state/1.0/#initialization-mechanisms-link) section. 21 | 22 | The Manifest URL is provided as the value of the `iiif-content` parameter following the viewer instance URL. Assuming the viewer can be accessed at `https://example.org/viewer` we can pass the `iiif-content` parameter as follows: 23 | 24 | ``` 25 | https://example.org/viewer?iiif-content=manifest-url 26 | ``` 27 | 28 | Note when the content state is a plain URI, rather than a JSON object, it must not be [content-state-encoded](https://iiif.io/api/content-state/0.9/#62-content-state-encoding-and-uri-requirements). 29 | 30 | **However, the current specs do not provide a standardized approach to interpret URIs containing special characters, please see the issue https://github.com/IIIF/api/issues/2292 for a detailed explanation and updates regarding this issue.** 31 | 32 | ## Example 33 | 34 | To open the IIIF Manifest [https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json](https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json) in the Mirador viewer hosted at [https://projectmirador.org/embed/](https://projectmirador.org/embed/), we construct the link as follows: 35 | 36 | [https://projectmirador.org/embed/?iiif-content=https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json](https://projectmirador.org/embed/?iiif-content=https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json) 37 | 38 | Similarly with Clover we append the `iiif-content` parameter to the viewer location as so: 39 | 40 | [https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json](https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json) 41 | 42 | ## Related Recipes 43 | 44 | * [Simplest Manifest - Image][0001] shows the basic structure of a IIIF Manifest using presentation API 3.0. 45 | 46 | {% include acronyms.md %} 47 | {% include links.md %} 48 | -------------------------------------------------------------------------------- /recipe/0026-toc-opera/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Table of Contents for A/V Content 3 | id: 26 4 | layout: recipe 5 | tags: [video, presentation, opera] 6 | summary: "Complex nested table of contents for an opera." 7 | viewers: 8 | - UV 9 | - Ramp 10 | - Aviary 11 | - Theseus 12 | topic: 13 | - AV 14 | - structure 15 | --- 16 | 17 | 18 | ## Use Case 19 | 20 | Like books, A/V content can be divided into parts that constitute a unit of interest. It is important to provide users with easy access to these individual units so the structure of an A/V item is represented in a table of contents to facilitate navigation given that jumping to a specific point using only the player slider is hard. 21 | 22 | Opera is a form of theatre in which music has a leading role. A recording of an opera is a good example of structured A/V: an opera is composed of acts; an act is composed of scenes; a scene may include multiple arias. Ranges are well suited to model the hierarchy of the components of an opera. 23 | 24 | ## Implementation Notes 25 | 26 | Implementation is similar to [Book Chapters][0024] except that nesting may be deeper. 27 | 28 | Ranges in the structure target different portions of the same Canvas using temporal [media fragments](https://www.w3.org/TR/media-frags/#naming-time) (e.g. "t=0,100"). This is in contrast to the Book Chapters recipe where each Range targets a different Canvas using spatial media fragments. 29 | 30 | A media fragment specifying the Canvas temporal dimensions for a Range does not need the end time to be explicitly specified when it coincides with the end time of the Canvas itself, as exemplified here for Atto Secondo. 31 | 32 | ## Restrictions 33 | 34 | Leaf Range nodes in a structure are played linearly so they should be contiguous, since gaps will cause silent moments resulting in poor user experience. 35 | 36 | ## Example 37 | 38 | The opera covers the whole length of the Canvas and is divided into two Ranges for the two acts. Atto Primo has a Range for the prelude and first song and then a Range for the remainder of the act. Atto Secondo has not been subdivided into Ranges for simplicity of this example. 39 | 40 | {% include manifest_links.html viewers="UV, Ramp, Aviary, Theseus" manifest="manifest.json" %} 41 | {% include jsonviewer.html src="manifest.json" %} 42 | 43 | ## Related Recipes 44 | 45 | - [Simplest Manifest - Video][0003] 46 | - [Text in Multiple Languages][0006] - Recipe explaining the use of multiple languages in text like in the label for this opera. 47 | - [Table of Contents (Ranges) - Book Chapters][0024] 48 | - [Table of Contents for Multiple A/V Files on a Single Canvas][0064] - The same opera from this example but expanded into a real world example. 49 | - [Table of Contents for Multiple A/V Files on Multiple Canvases][0065] - The same opera from this example but expanded into a real world example in audio format split across multiple Canvases. 50 | 51 | {% include acronyms.md %} 52 | {% include links.md %} 53 | -------------------------------------------------------------------------------- /recipe/0232-image-thumbnail-canvas/manifest-av.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { "en": [ "Video recording of Donizetti's _The Elixir of Love_" ] }, 6 | "items": [ 7 | { 8 | "id": "{{ id.path }}/canvas/donizetti/1", 9 | "type": "Canvas", 10 | "label": { "en": [ "The Elixir of Love, Act 1" ] }, 11 | "duration": 3971.243, 12 | "width": 640, 13 | "height": 360, 14 | "thumbnail": [ 15 | { 16 | "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/act1-thumbnail.png", 17 | "type": "Image", 18 | "format": "image/png", 19 | "width": 640, 20 | "height": 360 21 | } 22 | ], 23 | "items": [ 24 | { 25 | "id": "{{ id.path }}/donizetti/1/1", 26 | "type": "AnnotationPage", 27 | "items": [ 28 | { 29 | "id": "{{ id.path }}/donizetti/1/1-video", 30 | "type": "Annotation", 31 | "motivation": "painting", 32 | "body": { 33 | "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low_act_1.mp4", 34 | "type": "Video", 35 | "duration": 3971.243, 36 | "width": 640, 37 | "height": 360, 38 | "format": "video/mp4" 39 | }, 40 | "target": "{{ id.path }}/canvas/donizetti/1" 41 | } 42 | ] 43 | } 44 | ] 45 | }, 46 | { 47 | "id": "{{ id.path }}/canvas/donizetti/2", 48 | "type": "Canvas", 49 | "label": { "en": [ "The Elixir of Love, Act 2" ] }, 50 | "duration": 3307.224, 51 | "width": 640, 52 | "height": 360, 53 | "thumbnail": [ 54 | { 55 | "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/act2-thumbnail.png", 56 | "type": "Image", 57 | "format": "image/png", 58 | "width": 640, 59 | "height": 360 60 | } 61 | ], 62 | "items": [ 63 | { 64 | "id": "{{ id.path }}/donizetti/2/1", 65 | "type": "AnnotationPage", 66 | "items": [ 67 | { 68 | "id": "{{ id.path }}/donizetti/2/1-video", 69 | "type": "Annotation", 70 | "motivation": "painting", 71 | "body": { 72 | "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low_act_2.mp4", 73 | "type": "Video", 74 | "duration": 3307.224, 75 | "width": 640, 76 | "height": 360, 77 | "format": "video/mp4" 78 | }, 79 | "target": "{{ id.path }}/canvas/donizetti/2" 80 | } 81 | ] 82 | } 83 | ] 84 | } 85 | ] 86 | } 87 | -------------------------------------------------------------------------------- /recipe/0024-book-4-toc/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Table of Contents for Book Chapters 3 | id: 24 4 | layout: recipe 5 | tags: [text, image, book] 6 | summary: "Using Ranges to create a table of contents for a book" 7 | viewers: 8 | - UV 9 | - Mirador 10 | - Theseus 11 | - Glycerine Viewer 12 | - TIFY 13 | topic: structure 14 | property: structures 15 | --- 16 | 17 | ## Use Case 18 | 19 | Many books have a logical structure that can be made navigable through a table of contents (ToC) or other wayfinding methods. These might include chapters and other internal sections, or might reflect multiple works contained within an anthology or bound manuscript. IIIF uses Ranges to represent a book's structure and IIIF viewers can display this structure as a ToC in an index panel to aid users in navigating the book by chapter, section, work, etc. 20 | 21 | ## Implementation Notes 22 | 23 | Ranges are used to represent a structure within a book object by grouping Canvases together and/or by providing an alternate order of the Canvases from the order presented in the `items` property of the Manifest. Ranges can include Canvases, parts of Canvases, or other Ranges, creating a tree structure like a table of contents. 24 | 25 | Ranges are contained within the `structures` property and require a `label` property to display in the ToC (`labels` are not inherited from a referenced Canvas, so you will need to explicitly include the `label` property in the Range). Within a Range, resources are included as an array of resources using the `items` property. These structures can be made hierarchical simply by nesting an `items` array within another `items` array. This is useful when chapters might be sub-divided or in the case of multiple works where individual works may have chapters. This is a departure from the method defined by previous versions of the IIIF Presentation API. 26 | 27 | The `behavior` property can also be applied to Ranges. For more information on how `behavior` affects navigation in Ranges, see the [IIIF Presentation API on Ranges](https://iiif.io/api/presentation/3.0/#54-range) and the [Ranges and the `behavior` Property][229] recipe. 28 | 29 | ## Restrictions 30 | 31 | None 32 | 33 | ## Example 34 | 35 | In this example, an Ethiopic manuscript contains multiple works, one of which contains multiple sections. The Manifest contains a Range to represent the top-level structure (begins with lines 247–254), and another embedded Range to represent the content sections of the second work, *Arede'et* (begins with lines 275–282). This will result in a hierarchical ToC like so: 36 | 37 | * Tabiba Tabiban [ጠቢበ ጠቢባን] 38 | * Arede'et [አርድዕት] 39 | * Monday 40 | * Tuesday 41 | 42 | {% include manifest_links.html viewers="UV, Mirador, Glycerine Viewer, Theseus, TIFY" manifest="manifest.json" %} 43 | 44 | {% include jsonviewer.html src="manifest.json" config='data-line="246-326, 247-254, 275-282"' %} 45 | 46 | ## Related Recipes 47 | 48 | * [Book (simplest)][0009] 49 | * [Book (paging variations)][0011] 50 | * [Table of Contents for A/V Content][0026] 51 | 52 | {% include acronyms.md %} 53 | {% include links.md %} 54 | -------------------------------------------------------------------------------- /recipe/0029-metadata-anywhere/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Metadata on any Resource 3 | id: 29 4 | layout: recipe 5 | tags: [presentation] 6 | summary: "Provide item metadata for displaying to users" 7 | viewers: 8 | - UV 9 | - Mirador 10 | - Annona 11 | - id: Clover 12 | support: partial 13 | - Glycerine Viewer 14 | - Theseus 15 | - Curation 16 | - TIFY 17 | topic: property 18 | property: metadata 19 | --- 20 | 21 | ## Use Case 22 | 23 | Often it is useful to provide descriptive metadata about a resource, such as information on creators, dates, subject headings, and physical or contextual descriptions, that a client will display to the end user. This metadata might describe the entire resource, but may also be applied at more granular levels to provide information on parts of the resource, such as a single image or page, a region of a page, or an annotation. 24 | 25 | ## Implementation notes 26 | 27 | The `metadata` property is used to provide an ordered list of descriptive metadata as an array, with each entry given as a pair of human readable `label` and `value` arrays. The values of both the `label` and `value` properties must be JSON objects. These values will be displayed to the user as label/value pairs by the client. For more information, see the IIIF Presentation API [Metadata](https://iiif.io/api/presentation/3.0/#metadata) section. 28 | 29 | ## Restrictions 30 | 31 | All descriptive properties intended for presentation to the user must use language maps as outlined in the [Language of Property Values](https://iiif.io/api/presentation/3.0/#44-language-of-property-values) section and demonstrated in the [Internationalization and Multi-language Values][0006] recipe. 32 | 33 | The content of these entries is intended for presentation only; descriptive semantics should not be inferred. For information on how to include structured metadata that can support discovery, see the [Linking to Structured Metadata][0053] recipe. 34 | 35 | ## Example 36 | 37 | In this example, we have two Canvases, each with a different photograph of the same painting: one using natural light and the other an x-ray image. Metadata is provided at the Manifest level to convey information about the resource and additional metadata is provided on each Canvas to provide image-specific details. 38 | 39 | Note: Clover supports Metadata at the Manifest level but not down at the Canvas. 40 | 41 | Credit: *John Dee performing an experiment before Queen Elizabeth I*. Oil painting by Henry Gillard Glindoni. Credit: Wellcome Collection. Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) 42 | 43 | {% include manifest_links.html viewers="UV, Mirador, Annona, Clover, Glycerine Viewer, Theseus, Curation, TIFY" manifest="manifest.json" %} 44 | 45 | {% include jsonviewer.html src="manifest.json" config='data-line="10-59, 83-96, 136-149"' %} 46 | 47 | # Related recipes 48 | 49 | * [Internationalization and Multi-language Values][0006] 50 | * [Displaying Multiple Values with Language Maps][0118] 51 | * [Linking to Structured Metadata][0053] 52 | - [Linking to Web Page of an Object][0047] 53 | 54 | {% include acronyms.md %} 55 | {% include links.md %} 56 | -------------------------------------------------------------------------------- /recipe/0117-add-image-thumbnail/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { 6 | "en": [ 7 | "Playbill Cover with Manifest Thumbnail" 8 | ] 9 | }, 10 | "summary": { 11 | "en": [ 12 | "Cover of playbill for \"Akiba gongen kaisen-banashi,\" \"Futatsu chōchō kuruwa nikki\" and \"Godairiki koi no fūjime\" performed at the Chikugo Theater in Osaka from the fifth month of Kaei 2 (May, 1849); main actors: Gadō Kataoka II, Ebizō Ichikawa VI, Kitō Sawamura II, Daigorō Mimasu IV and Karoku Nakamura I; on front cover: producer Mominosuke Ichikawa's crest." 13 | ] 14 | }, 15 | "thumbnail": [ 16 | { 17 | "id": "https://iiif.io/api/image/3.0/example/reference/4f92cceb12dd53b52433425ce44308c7-ucla_bib1987273_no001_rs_001/full/max/0/default.jpg", 18 | "type": "Image", 19 | "format": "image/jpeg", 20 | "height": 4823, 21 | "width": 3497, 22 | "service": [ 23 | { 24 | "id":"https://iiif.io/api/image/3.0/example/reference/4f92cceb12dd53b52433425ce44308c7-ucla_bib1987273_no001_rs_001", 25 | "type":"ImageService3", 26 | "profile":"level1", 27 | "height": 4823, 28 | "width": 3497, 29 | "extraFormats":[ 30 | "png" 31 | ], 32 | "extraQualities":[ 33 | "default", 34 | "color", 35 | "gray" 36 | ], 37 | "protocol":"http://iiif.io/api/image", 38 | "tiles":[ 39 | { 40 | "height":512, 41 | "scaleFactors":[ 42 | 1, 43 | 2, 44 | 4, 45 | 8 46 | ], 47 | "width":512 48 | } 49 | ] 50 | } 51 | ] 52 | } 53 | ], 54 | "items": [ 55 | { 56 | "id": "{{ id.path }}/canvas/p0", 57 | "type": "Canvas", 58 | "label": { 59 | "en": [ 60 | "front cover with color bar" 61 | ] 62 | }, 63 | "width": 4520, 64 | "height": 5312, 65 | "items": [ 66 | { 67 | "id": "{{ id.path }}/page/p0/1", 68 | "type": "AnnotationPage", 69 | "items": [ 70 | { 71 | "id": "{{ id.path }}/annotation/p0000-image", 72 | "type": "Annotation", 73 | "motivation": "painting", 74 | "body": { 75 | "id": "https://iiif.io/api/image/3.0/example/reference/4f92cceb12dd53b52433425ce44308c7-ucla_bib1987273_no001_rs_001_full/full/max/0/default.jpg", 76 | "type": "Image", 77 | "format": "image/jpeg", 78 | "height": 5312, 79 | "width": 4520, 80 | "service": [ 81 | { 82 | "id": "https://iiif.io/api/image/3.0/example/reference/4f92cceb12dd53b52433425ce44308c7-ucla_bib1987273_no001_rs_001_full", 83 | "type": "ImageService3", 84 | "profile": "level1" 85 | } 86 | ] 87 | }, 88 | "target": "{{ id.path }}/canvas/p0" 89 | } 90 | ] 91 | } 92 | ] 93 | } 94 | ] 95 | } 96 | -------------------------------------------------------------------------------- /recipe/0004-canvas-size/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Image and Canvas with Differing Dimensions 3 | id: 4 4 | layout: recipe 5 | tags: [image, presentation, canvas] 6 | summary: "Demonstrates that image dimensions (pixels) need not be the same as the Canvas dimensions (unit-less)" 7 | viewers: 8 | - UV 9 | - Mirador 10 | - Annona 11 | - Theseus 12 | - Curation 13 | - TIFY 14 | topic: image 15 | code: 16 | - iiif-prezi3 17 | --- 18 | 19 | ## Use Case 20 | 21 | You have an image ready for annotating that is expected to be replaced later by a higher resolution image. You would like to provide a sufficiently high-resolution coordinate space to position the annotations precisely. IIIF Presentation v3.0 allows you to describe a Canvas with the dimensions of the larger image to come, fill it with the smaller image you have ready now, and capture annotations on the smaller image in confidence that they will be positioned appropriately on the larger image when it is swapped in. 22 | 23 | ## Implementation notes 24 | 25 | This recipe demonstrates the importance of thinking about a Canvas as a coordinate space, not as absolute pixel or display dimensions. The Canvas dimensions (unit-less values of width and height) need not be related to the (pixel) dimensions of the content painted onto the Canvas. This recipe shows the Canvas dimensions differing from the image dimensions, yet the image fills the Canvas completely. A more complex but not uncommon case (with a recipe linked below in Related Recipes) is to have multiple images on the same Canvas, where each image might have a different pixel-based resolution but must be reconciled into the same Canvas coordinate space. 26 | 27 | By making the Canvas coordinate space larger than the pixel space of an image: 28 | + You have the leeway to not know what your replacement image dimensions will be, 29 | + Annotations made on the current version will have consistent locations on the larger image, and 30 | + Drawing annotation regions on the smaller version will be facilitated by having more screen space. 31 | 32 | For a future replacement image of unknown dimensions, a good starting point is to make each Canvas dimension at least twice the corresponding pixel dimension of the current image as long as each Canvas dimension is over 1000. 33 | 34 | Finally, if the image dimensions are larger than the Canvas, the image will be scaled to fit the Canvas. 35 | 36 | ## Restrictions 37 | 38 | The aspect ratio should be consistent between your source image and Canvas. Otherwise, you'll see unpredictable stretching and/or distorting. 39 | 40 | ## Example 41 | 42 | This example shows a Manifest with a single Canvas that has height and width dimensions three times the pixel dimensions of the image in order to construct a Canvas with both dimensions greater than 1000px. 43 | 44 | {% include manifest_links.html viewers="UV, Mirador, Annona, Theseus, Curation, TIFY" manifest="manifest.json" %} 45 | {% include jsonviewer.html src="manifest.json" config="data-line='14-15,29-30'"%} 46 | 47 | # Related recipes 48 | 49 | * [Simple Image Manifest][0001] 50 | * [A/V Content and the Behavior Property][0000] 51 | 52 | {% include acronyms.md %} 53 | {% include links.md %} 54 | -------------------------------------------------------------------------------- /recipe/0036-composition-from-multiple-images/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": "http://iiif.io/api/presentation/3/context.json", 3 | "id": "{{ id.url }}", 4 | "type": "Manifest", 5 | "label": { "en": [ "Folio from Grandes Chroniques de France, ca. 1460" ] }, 6 | "items": [ 7 | { 8 | "id": "{{ id.path }}/canvas/p1", 9 | "type": "Canvas", 10 | "label": { "none": [ "f. 033v-034r [Chilpéric Ier tue Galswinthe, se remarie et est assassiné]" ] }, 11 | "height": 5412, 12 | "width": 7216, 13 | "items": [ 14 | { 15 | "id": "{{ id.path }}/page/p1/1", 16 | "type": "AnnotationPage", 17 | "items": [ 18 | { 19 | "id": "{{ id.path }}/annotation/p0001-image", 20 | "type": "Annotation", 21 | "motivation": "painting", 22 | "body": { 23 | "id": "https://iiif.io/api/image/3.0/example/reference/899da506920824588764bc12b10fc800-bnf_chateauroux/full/max/0/default.jpg", 24 | "type": "Image", 25 | "format": "image/jpeg", 26 | "height": 5412, 27 | "width": 7216, 28 | "service": [ 29 | { 30 | "id": "https://iiif.io/api/image/3.0/example/reference/899da506920824588764bc12b10fc800-bnf_chateauroux", 31 | "type": "ImageService3", 32 | "profile": "level1" 33 | } 34 | ] 35 | }, 36 | "target": "{{ id.path }}/canvas/p1" 37 | }, 38 | { 39 | "id": "{{ id.path }}/annotation/p0002-image", 40 | "type": "Annotation", 41 | "motivation": "painting", 42 | "body": { 43 | "id": "https://iiif.io/api/image/3.0/example/reference/899da506920824588764bc12b10fc800-bnf_chateauroux_miniature/full/max/0/default.jpg", 44 | "type": "Image", 45 | "format": "image/jpeg", 46 | "label": { "fr": [ "Miniature [Chilpéric Ier tue Galswinthe, se remarie et est assassiné]" ] }, 47 | "width":2138, 48 | "height":2414, 49 | "service": [ 50 | { 51 | "id": "https://iiif.io/api/image/3.0/example/reference/899da506920824588764bc12b10fc800-bnf_chateauroux_miniature", 52 | "type": "ImageService3", 53 | "profile": "level1" 54 | } 55 | ] 56 | }, 57 | "target": "{{ id.path }}/canvas/p1#xywh=3949,994,1091,1232" 58 | } 59 | ] 60 | } 61 | ] 62 | } 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /recipe/0027-alternative-page-order/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Alternative Page Sequences 3 | id: 27 4 | layout: recipe 5 | tags: [book, presentation] 6 | summary: "Using Ranges to offer alternative orderings of book pages." 7 | viewers: 8 | topic: 9 | - structure 10 | --- 11 | 12 | ## Use Case 13 | 14 | A book may contain pages in the incorrect order; for example, a codex that was rebound at some point in history may have certain folios or quires accidentally misplaced. You want to digitally represent the book object in its current order while offering users the option to browse its contents in the intended order. 15 | 16 | ## Implementation Notes 17 | 18 | In [Presentation API 3.0](https://iiif.io/api/presentation/3.0/#54-range), setting a Range’s `behavior` value to `sequence` allows you to define a specific viewing order for Canvases that differs from the default order in the Manifest’s `items` property. Such Ranges must be directly within the `structures` property of the Manifest and must not be referenced or embedded within other Ranges ([see specification](https://iiif.io/api/presentation/3.0/#54-range)). When `behavior` is set to `sequence`, user interfaces that interact with this order should use the order within the selected Range, rather than the default order of items. 19 | 20 | There may be more than one Range, each representing an alternative sequence of items (such as different orderings of book pages). The first Range should act as the default ordering, and any additional Ranges should be available for the user to select. For a IIIF viewer to display the selectable Ranges, each Range should have a `label`. 21 | 22 | If reordering the Canvases affects the reading layout or direction, properties can be set on the Range (such as `viewingDirection` or other [valid behaviors](https://iiif.io/api/presentation/3.0/#behavior) besides `sequence`) to override those inherited from the Manifest. 23 | 24 | ## Example 25 | 26 | These manuscript folios are an excerpt from the original draft of the 1895 novel _Piccolo mondo antico_ by novelist and Nobel Prize nominee for Literature, Antonio Fogazzaro. The pencil numbering in the upper right of each page (171r–172v) follows the bifolio's physical order, but does not correspond to the author's intended sequence, which he noted in ink: 384 (171v), 385 (172r), [386] (172v), 387 (171r). 27 | 28 | Two Ranges are provided within the `structures` to represent this case study. From the two Ranges with the `behavior` value `sequence`, the first Range should be used as the navigation default, and the other should be selectable via its supplied `label`. 29 | 30 | Images provided by permission of Biblioteca Civica Bertoliana. 31 | 32 | {% include manifest_links.html viewers="" manifest="manifest.json" %} 33 | 34 | {% include jsonviewer.html src="manifest.json" config='data-line="200-261"' %} 35 | 36 | ## Related Recipes 37 | 38 | * [Simple Manifest - Book][0009] shows an example where the order of the pages follows the order in the `items` property. 39 | * [Table of Contents for Book Chapters][0024] shows how to use Ranges to create a table of contents rather than to represent alternative orders. 40 | 41 | {% include acronyms.md %} 42 | {% include links.md %} 43 | -------------------------------------------------------------------------------- /recipe/0118-multivalue/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Displaying Multiple Values with Language Maps 3 | id: 118 4 | layout: recipe 5 | tags: [tbc] 6 | summary: "The language map pattern requires that all values are supplied as an array, whether a single value string or a string of multiple values." 7 | viewers: 8 | - UV 9 | - Mirador 10 | - Annona 11 | - Glycerine Viewer 12 | - Theseus 13 | - Curation 14 | - TIFY 15 | topic: property 16 | property: label, summary, metadata, requiredStatement 17 | --- 18 | 19 | ## Use Case 20 | 21 | In some cases, a work is known by more than one title (or has multiple authors, subject heading, etc.) that we would like to display to end users. In this case, our work has title variants that we will include in the `metadata` property using the required arrays. This pattern can be applied to any property values that are intended to be displayed to end users. 22 | 23 | ## Implementation Notes 24 | 25 | Language maps are required of all strings that are intended to be displayed to the user (this includes the `label` and `summary` properties, as well as `label` and `value` properties within the `metadata` and `requiredStatement` properties). Furthermore, the language map pattern requires that all values are an array, whether a single value or multiple value strings. The client must display all of the strings in the array value. Thus, a work with multiple authors might include separate strings for each author within a single array: `["Picart, Bernard", "Bernard, Jean-Frédéric"]`. See the Presentation API section [Always require arrays if property can have multiple values](https://iiif.io/api/presentation/3.0/change-log/#134-always-require-arrays-if-property-can-have-multiple-values). 26 | 27 | In the case of multiple languages, each language is represented by its own language map comprising a language key and an array. For more information on language maps and multi-language values, see the recipe [Internationalization and Multi-language Values][0006]. For more information about what clients are expected to do with language map properties and values, see the Presentation API [Language of Property Values](https://iiif.io/api/presentation/3.0/#44-language-of-property-values) section. 28 | 29 | ## Restrictions 30 | 31 | None 32 | 33 | ## Example 34 | 35 | In this example, the work has multiple titles in both English and French. The Manifest `label` provides a single title in French within a single-value array (lines 6–8). The alternative titles are provided in the `metadata` property in both English and French, each with variants contained within two separate arrays -- one array for English (lines 18–21) and one for French (lines 22–25). In the `summary` property (lines 30–32) the value is included as a single-string array. 36 | 37 | {% include manifest_links.html viewers="UV, Mirador, Annona, Glycerine Viewer, Theseus, Curation, TIFY" manifest="manifest.json" %} 38 | 39 | {% include jsonviewer.html src="manifest.json" config='data-line="6-8, 18-21, 22-25, 30-32"'%} 40 | 41 | ## Related Recipes 42 | 43 | * [Internationalization and Multi-language Values][0006] 44 | * [Metadata][0029] 45 | * [Annotating in Multiple Languages][0346] 46 | 47 | {% include acronyms.md %} 48 | {% include links.md %} 49 | -------------------------------------------------------------------------------- /recipe/0015-start/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Begin playback at a specific point - Time-based media 3 | id: 15 4 | layout: recipe 5 | tags: [audio, video] 6 | summary: "This manifest uses the 'start' property to specify a point in an audio or video object where a client application should begin playback." 7 | viewers: 8 | - Ramp 9 | - Aviary 10 | - Theseus 11 | topic: 12 | - AV 13 | - property 14 | property: start 15 | code: 16 | - iiif-prezi3 17 | --- 18 | 19 | ## Use Case 20 | 21 | Often an audio or video resource will have content that is part of the object but not significant, such as a microphone check, or audience noise before the start of a performance, or a test card. The `start` property allows the publisher to specify a point where a client application should begin playback. 22 | 23 | ## Implementation notes 24 | 25 | This recipe extends [Simplest Manifest - Video][0003] by adding the information required by a client to start playback at a particular point. This is done by adding the `start` property to the Manifest with the start time in seconds. 26 | 27 | The target of `start` must be a JSON object with `id` and `type` properties and can be either a Canvas, or a Specific Resource with a Selector and a `source` property where the value is a Canvas. 28 | 29 | In this use case, the target `type` property is a Specific Resource (`"type": "SpecificResource"`), and the Selector `type` property is a Point Selector (`"type": "PointSelector"`) that identifies a starting time point (`"t": 120.5`) within the `source`. 30 | 31 | For more on the `start` property, see: [Start Property][prezi3-start]. 32 | 33 | ### About selector classes: 34 | 35 | Selectors in Annotation targets are used to describe how to retrieve a given part of a resource. There are three Selector classes defined in the IIIF specification, but only the [`PointSelector`][prezi3-pointselector] class is appropriate for this use case. The `PointSelector` class defines a specific point either spatially (`x`, `y`) and/or temporally (`t`). 36 | 37 | For more information on other Selector classes, see: [IIIF Open/Web Annotation Extensions][prezi3-openannotation] and [W3C Web Annotation Selectors](https://www.w3.org/TR/annotation-model/#selectors). 38 | 39 | ## Example 40 | 41 | This example shows a Manifest with a single Canvas with a duration of 1801.055 seconds. It has a single video file (30-minute-clock.mp4) which is associated with it. The `start` property specifies a start point of 120.5 seconds into the playback. The video was created by [DrLex1](https://www.youtube.com/watch?v=Lsq0FiXjGHg) and was released using a [Creative Commons Attribution license](https://creativecommons.org/licenses/by/3.0/). 42 | 43 | {% include manifest_links.html viewers="Ramp, Aviary, Theseus" manifest="manifest.json" %} 44 | 45 | {% include jsonviewer.html src="manifest.json" config='data-line="10-18"' %} 46 | 47 | # Related recipes 48 | 49 | * [Simplest Manifest - Video][0003] shows a manifest for a simple video resource. 50 | * [Simplest Manifest - Audio][0002] shows a manifest for a simple audio resource. 51 | * [Load Manifest Beginning with a Specific Canvas][202] uses the `start` property to load at a specific canvas. 52 | 53 | {% include acronyms.md %} 54 | {% include links.md %} 55 | -------------------------------------------------------------------------------- /recipe/0464-reuse-manifest/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "@context": [ 3 | "http://iiif.io/api/presentation/3/context.json" 4 | ], 5 | "id": "{{ id.url }}", 6 | "type": "Manifest", 7 | "label": { 8 | "en": [ 9 | "Picture of Göttingen taken during the 2019 IIIF Conference, reused and annotated." 10 | ] 11 | }, 12 | "rights": "http://creativecommons.org/licenses/by-sa/3.0/", 13 | "requiredStatement": { 14 | "label": { 15 | "en": [ 16 | "Attribution" 17 | ] 18 | }, 19 | "value": { 20 | "en": [ 21 | "Glen Robson, IIIF Technical Coordinator. CC BY-SA 3.0"
22 | ]
23 | }
24 | },
25 | "metadata": [
26 | {
27 | "label": { "en": [ "Source Manifest" ] },
28 | "value": { "en": [ "Reuse of Source Manifest with added Annotation" ] }
29 | }
30 | ],
31 | "items": [
32 | {
33 | "id": "https://iiif.io/api/cookbook/recipe/0008-rights/canvas/p1",
34 | "type": "Canvas",
35 | "height": 3024,
36 | "width": 4032,
37 | "items": [
38 | {
39 | "id": "https://iiif.io/api/cookbook/recipe/0008-rights/page/p1/1",
40 | "type": "AnnotationPage",
41 | "items": [
42 | {
43 | "id": "https://iiif.io/api/cookbook/recipe/0008-rights/annotation/p0001-image",
44 | "type": "Annotation",
45 | "motivation": "painting",
46 | "body": {
47 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
48 | "type": "Image",
49 | "format": "image/jpeg",
50 | "height": 3024,
51 | "width": 4032,
52 | "service": [
53 | {
54 | "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
55 | "profile": "level1",
56 | "type": "ImageService3"
57 | }
58 | ]
59 | },
60 | "target": "https://iiif.io/api/cookbook/recipe/0008-rights/canvas/p1"
61 | }
62 | ]
63 | }
64 | ],
65 | "annotations": [
66 | {
67 | "id": "{{ id.path }}/canvas-1/annopage-2",
68 | "type": "AnnotationPage",
69 | "items": [
70 | {
71 | "id": "{{ id.path }}{{ id.path }}/canvas-1/annopage-2/anno-1",
72 | "type": "Annotation",
73 | "motivation": "commenting",
74 | "body": {
75 | "type": "TextualBody",
76 | "language": "de",
77 | "format": "text/plain",
78 | "value": "Göttinger Marktplatz mit Gänseliesel Brunnen"
79 | },
80 | "target": "{{ id.path }}/canvas-1"
81 | }
82 | ]
83 | }
84 | ]
85 | }
86 | ]
87 | }
--------------------------------------------------------------------------------
/recipe/0318-navPlace-navDate/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Locating an Item in Place and Time
3 | id: 318
4 | layout: recipe
5 | topic: geo-recipes
6 | tags: [maps, geolocate, navPlace, navDate]
7 | summary: "Use navDate together with the navPlace extension to provide geographic and temporal data"
8 | viewers:
9 | - Navplace Viewer
10 | ---
11 |
12 | ### Use Case
13 |
14 | You have one or more IIIF resources that have a date and a location associated with each, and you would like to provide these to a client for use in the user interface. For instance, you may wish the client to provide a visualization in a timeline with an associated map, or to provide the capability to filter the set based on a date range or a bounding box on a map. The data required to meet this use case can be provided by the use of both the `navDate` and `navPlace` properties on the IIIF resources.
15 |
16 | ### Implementation Notes
17 |
18 | The `navDate` property, as implied by its name, allows a Manifest to identify a pertinent date associated with an IIIF resource in order to help viewers provide users with date-aware navigation. Clients are not required to make use of `navDate`, and clients that do have date-aware navigation available may not default to that navigation interface. This property is described in [Navigation by Chronology][0230]
19 |
20 | The `navPlace` property is analogous to `navDate`, but provides geographic information. The value for `navPlace` is a single [GeoJSON Feature Collection](https://iiif.io/api/extension/navplace/#222-feature-collection). A Feature Collection represents an aggregation of spatially bounded areas. This property is described in [Locate a Manifest on a Web Map][0154].
21 |
22 | The `navPlace` property is not processed by the Universal Viewer or Mirador viewer at this time.
23 |
24 | ### Example
25 |
26 | The example consists of a [Collection](collection.json) that references five Manifests. All five Manifests contain the `navDate` and `navPlace` properties, as shown below.
27 |
28 | The example can be displayed in a [custom viewer](https://mikeapp.github.io/maptime-demo/?iiif-content=https://preview.iiif.io/cookbook/0318/recipe/0318-navPlace-navDate/collection.json). In the viewer, click on the "Limit by Date Range" button to sort the objects by date. Adjust the ends of the timeline slider to filter the objects based on a date range.
29 |
30 | In a more limited way, the Collection can be displayed in the Navplace viewer used elsewhere in this cookbook. This viewer will show all examples places appropriately on a map, but ignores the `navDate` data.
31 |
32 | [NavPlace and NavDate Collection](collection.json)
33 | * [Castel Sant'Angelo, Rome](manifest-1.json)
34 | * [The Colosseum](manifest-2.json)
35 | * [The Arch of Titus from the Forum, Rome, ca. 1725](manifest-3.json)
36 | * [The Temple of Vesta, Rome, 1849](manifest-4.json)
37 | * [A View of Trajan's Forum, Rome, 1821](manifest-5.json)
38 |
39 | {% include manifest_links.html manifest="collection.json" %}
40 |
41 | {% include jsonviewer.html src="collection.json" config='data-line="39-63,73-97,107-131,141-165,175-200"' %}
42 |
43 | ## Related Recipes
44 | * [Locate a Manifest on a Web Map][0154]
45 | * [Navigation by Chronology][0230]
46 |
47 | {% include acronyms.md %}
48 | {% include links.md %}
--------------------------------------------------------------------------------
/recipe/0117-add-image-thumbnail/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Image Thumbnail for Manifest
3 | id: 117
4 | layout: recipe
5 | tags: [image,presentation]
6 | summary: "Display a thumbnail image for a resource other than a Canvas, such that it can be used by clients to represent the object."
7 | viewers:
8 | - Mirador
9 | - Clover
10 | - Glycerine Viewer
11 | - Theseus
12 | topic: property
13 | property: thumbnail
14 | ---
15 |
16 | ## Use Case
17 |
18 | You have images of a booklet, and you want to select one to use as the singular representation of the whole object for consuming clients. These clients range from object viewers such as Mirador or Universal Viewer to discovery services and other aggregators such as [Spotlight](https://spotlight.projectblacklight.org) or a homegrown solution. Absent a declared thumbnail for the Manifest, some clients will create a thumbnail from the first Canvas in the Manifest.
19 |
20 | ## Implementation Notes
21 |
22 | Thumbnails can permit non-human interfaces consuming your manifests to present representations of your content for rapid comprehension by human readers. For instance, this could be in a cross-institutional catalog website.
23 |
24 | Thumbnails are strongly recommended for Collections and Manifests, and permitted on Canvases, content resources, and other resource types. Conforming clients are not required to render any thumbnails, though they are strongly recommended to do so when they exist for Collections, Manifests, Canvases, and content resources. Clients are permitted to render thumbnails when they exist for all other resource types. Each resource may contain multiple thumbnails, each of which may be — but are not required to be — of the same `type` and `format` as its containing resource.
25 |
26 | Multiple methods exist for describing a thumbnail in your manifest. For a Manifest, it makes most sense to use a full-size image URI in conjunction with a IIIF Image Service containing the whole IIIF Image service JSON. Clients consuming a Manifest thumbnail will have unpredictable size requirements; reproducing the complete service JSON gives them the most flexibility and best shot at quickly and efficiently displaying your object's thumbnail.
27 |
28 | ## Restrictions
29 |
30 | None known.
31 |
32 | ## Example
33 |
34 | This example uses an image of the cover of the same kabuki performance program as in the recipe for [Viewing direction and its effect on navigation][0010]. This image, though, has a color bar and the Manifest contains an explicit `thumbnail` property for the Manifest. In this particular use case, to avoid having a Manifest thumbnail image with a color calibration bar, you can choose to declare a thumbnail from a completely different image. Keep in mind that this thumbnail is just for the Manifest; no thumbnail has been explicitly set for the sole resource, so the supporting viewers should use the resource's IIIF Image service to create one.
35 |
36 | {% include manifest_links.html viewers="Mirador, Clover, Glycerine Viewer, Theseus" manifest="manifest.json" %}
37 |
38 | {% include jsonviewer.html src="manifest.json" %}
39 |
40 | ## Related Recipes
41 |
42 | * [Support Deep Viewing with Basic Use of a IIIF Image Service][0005]
43 | * [Implementation Discussion: Thumbnails on Canvases][0232]
44 |
45 | {% include acronyms.md %}
46 | {% include links.md %}
47 |
--------------------------------------------------------------------------------
/recipe/0306-linking-annotations-to-manifests/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Linking external Annotations targeting a Canvas to a Manifest
3 | id: 306
4 | layout: recipe
5 | tags: [annotation, multiple-images]
6 | summary: "Keep a resolvable link between annotations (contained in an external Annotation Page) and the Manifest containing the Canvases they are pointing at."
7 | viewers:
8 | - Theseus
9 | topic: annotation
10 | ---
11 |
12 | ## Use Case
13 | You want to keep a resolvable link between annotations (contained in an external Annotation Page) and the Manifest containing the Canvases they are pointing at.
14 |
15 | Usually, annotations in an external Annotation Page point to a Canvas or a Canvas fragment. This can cause problems for annotation consuming viewers as the Canvas identifier doesn't have to resolve. To get the information from a Canvas a viewer needs access to the containing Manifest.
16 |
17 | ## Implementation Notes
18 |
19 | The Annotation Pages stored in an external JSON file contain a list of Annotations.
20 | While often the `target` of the annotations is an URL containing the identifier of the Canvas the `target` can also be a [Specific Resource](https://www.w3.org/TR/annotation-model/#specific-resources).
21 | The Specific Resource can have a `source` attribute containing the `id` pointing at the Canvas identifier and a `partOf` attribute pointing at the Manifest.
22 | Hence, the `partOf` attribute will contain the Manifest identifier in the `id` attribute, while the `type` attribute will be "Manifest".
23 |
24 | ## Restrictions
25 | There is usually no advantage in using `partOf` attribute for pointing at Manifest with Annotations contained in a Manifest. In this case, it is implicit that they are about the Manifest containing them.
26 |
27 |
28 | ## Example
29 | The example is based on the recipe [Embedded or referenced Annotations][0269].
30 |
31 | However, the `target` of the Annotation contained in the Annotation Page file will be a Specific Resource, which allows us to use a `partOf` attribute inside the `source` element to point at the original Manifest containing the Canvas. The `partOf` `id` attribute is the resolvable link of the Manifest.
32 |
33 | In the example, it is also shown the usage of the `selector` attribute of the Specific Resource that allows us to select a region of the image using the `value` attribute of the Fragment Selector.
34 | The `value` attribute follows the Fragment Selector syntax [Fragment Selectors][0020].
35 |
36 | Annotation Page file
37 | {% include manifest_links.html viewers="" manifest="annotationpage.json" %}
38 |
39 | {% include jsonviewer.html src="annotationpage.json" config='data-line="16-33"' %}
40 |
41 | Manifest file
42 | {% include manifest_links.html viewers="Mirador, Annona, Glycerine Viewer, Theseus" manifest="manifest.json" %}
43 |
44 | {% include jsonviewer.html src="manifest.json" config='data-line="44-49"' %}
45 |
46 | ## Related Recipes
47 |
48 | * [Embedded or Referenced Annotations][0269] an Annotation Page without links to the original Manifest.
49 | * [Annotate specific images or layers][0326] Specific Resource used for annotating specific images or layers.
50 | * [Simple Annotation — Tagging][0021] for an Annotation using a Fragment Selector.
51 | * [Fragment Selectors][0020] for understanding how to use a Fragment Selector.
52 |
53 | {% include acronyms.md %}
54 | {% include links.md %}
55 |
--------------------------------------------------------------------------------
/recipe/0035-foldouts/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Foldouts, Flaps, and Maps
3 | id: 35
4 | layout: recipe
5 | tags: [images, behavior, non-paged]
6 | summary: "Demonstrates how to model a foldout diagram or map."
7 | viewers:
8 | - Theseus
9 | topic: structure
10 | property: behavior
11 | ---
12 |
13 |
14 | ## Use Case
15 |
16 | Books (and other objects) sometimes include foldout flaps or sheets, such as a map in a historical work. During digitization, the foldout might be captured in both its folded and unfolded state.
17 |
18 | In the previous recipe, [Multiple choice of images in a single view][0033], a flap is offered to users as a Choice of images for the same view. But consider this example:
19 |
20 | 
21 |
22 | Here, the page has been captured folded and unfolded. Unlike the example in the previous recipe, these are not the same **view**. There is no one single IIIF Canvas that would serve to represent both of these spatial extents - we can't logically place these two images on the same spatial view.
23 |
24 | While the present example and that given in [Multiple choice of images in a single view][0033] are clearly different, the modeling decision may not always be as obvious. There will be cases that could be modeled in either way, depending on what the publisher is trying to present.
25 |
26 | ## Implementation notes
27 |
28 | The unfolded view is simply an additional Canvas in the sequence given by `manifest.items`.
29 |
30 | These pages are from a printed, paged book, which might have the `behavior` value of `paged`, so as to generate the correct recto-verso-recto-verso representation in a viewer that supports this behavior. If we insert an additional Canvas into the Manifest's `items`, we will break this sequence unless we introduce an additional `behavior` property on the Canvas with the foldout using the value `non-paged` to indicate that it is not part of the paged sequence.
31 |
32 | ## Example
33 |
34 | This example has been adapted from [https://wellcomelibrary.org/iiif/b29346423/manifest](https://wellcomelibrary.org/iiif/b29346423/manifest) but in a much reduced form to convey the essential points.
35 |
36 | The Manifest is given the behavior `paged`. With no other qualifiers, this indicates a left-to-right sequence with the first item _recto_.
37 |
38 | The sequence is:
39 |
40 | * Front cover
41 | * Inside front cover
42 | * Foldout, folded
43 | * Foldout, unfolded (given the behavior `non-paged`, to indicate that it does not constitute part of the paged sequence of the Manifest)
44 | * Foldout, folded (verso)
45 | * Title page
46 | * Back of title page
47 | * _the normal run of pages would continue here; removed in this Manifest for brevity_
48 | * Inside back cover
49 | * Back Cover
50 |
51 | The "non-paged" behavior on Canvases is not yet supported by viewers making this difficult to visualize. The resulting layout in a thumbnail view would look something like this:
52 |
53 | 
54 |
55 | {% include manifest_links.html viewers="Theseus" manifest="manifest.json" %}
56 |
57 | {% include jsonviewer.html src="manifest.json" config='data-line="10-12, 134-136"' %}
58 |
59 | ## Related recipes
60 |
61 | * [Multiple choice of images in a single view][0033]
62 | * [Composition of one view from multiple image sources][0036]
63 |
64 | {% include acronyms.md %}
65 | {% include links.md %}
66 |
--------------------------------------------------------------------------------