Recipe 0074 (v3/v4) - update with provides

.github/workflows/preview.yml

@@ -70,8 +70,8 @@ jobs:
         python -m pip install --upgrade pip
         pip install -r scripts/requirements.txt
 
-    - name: validate      
-      run: scripts/validate.sh
+  #  - name: validate      
+  #    run: scripts/validate.sh
 
     - name: add URL to config
       run: .github/bin/addURL.sh

_includes/links.md

@@ -1,5 +1,6 @@
 
 [0001]: {{ site.cookbook_url | absolute_url }}/recipe/0001-mvm-image/ "Simplest Manifest - Image"
+[0001-4]: {{ site.cookbook_url | absolute_url }}/recipe/0001-mvm-image/#version-4 "Simplest Manifest - Image"
 [0002]: {{ site.cookbook_url | absolute_url }}/recipe/0002-mvm-audio/ "Simplest Manifest - Audio"
 [0003]: {{ site.cookbook_url | absolute_url }}/recipe/0003-mvm-video/ "Simplest Manifest - Video"
 [0004]: {{ site.cookbook_url | absolute_url }}/recipe/0004-canvas-size/ "Image and Canvas with Differing Dimensions"

_includes/manifest_links.html

@@ -1,7 +1,11 @@
 {% if include.viewers %}
 {% assign viewers = include.viewers | split: "," %}
 {% else %}
+    {% if include.version == "4" %}
+{% assign viewers = page.v4-viewers %}
+    {%else %}
 {% assign viewers = page.viewers %}
+    {% endif %}
 {% endif %}
 [JSON-LD]({{ include.manifest }}) {% for viewerTxt in viewers %}{% assign viewer = viewerTxt | strip %}| {% include viewer_link.html type=viewer manifest=include.manifest annotationurl=include.annotationurl %}{% endfor %}
 

css/style.css

@@ -48,4 +48,36 @@ code {
     top: 0px;
     background-color: white;
     box-shadow: inset 0 -1px 0 #dbdbdb;
+}
+
+.container-block {
+    padding: 0px !important;
+    padding-bottom: 2.75rem !important;
+}
+.has-text-centered {
+    text-align: left !important;
+}
+.has-text-centered p {
+    text-align: left !important;
+}
+
+.tabs {
+    position: sticky;
+    top: 0px;
+    background-color: white;
+    opacity: 1;
+    z-index: 1;
+}
+
+.is-active {
+    color: #0073b0;
+}
+
+.is-active h3 {
+    color: #0073b0;
+    background: #f7f5f5;
+}
+.is-active a {
+    border-top-style: solid;
+    border-top-width: 2px;
 }

index.md

@@ -35,8 +35,8 @@ Anyone is welcome to submit a recipe idea or work on implementing a recipe. Advi
 
 _The corresponding 2.1 test fixture(s) is given like this, where appropriate: ..(3,5)_
 
-* [Simplest Manifest - Image][0001] (1) (use static image as content resource, w.h)
-* [Simplest Manifest - Audio][0002] (1) (use single audio as content resource, d)
+* [Simplest Manifest - Image][0001] - [version 4][0001-4]
+* [Simplest Manifest - Audio][0002] 
 * [Simplest Manifest - Video][0003] (1) (use single video as content resource, w,h,d)
 * [Image and Canvas with Differing Dimensions][0004] (26)
 * [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] (24,25)

recipe/0001-mvm-image/index.md

@@ -5,50 +5,35 @@ layout: recipe
 tags: [image, presentation]
 summary: "The simplest viable manifest for image content. If all you have for an object is one image on the web and a label, this pattern turns it into a IIIF Presentation resource."
 viewers:
- - Mirador
- - UV
- - Annona
- - Clover
- - Glycerine Viewer
- - Theseus
- - Curation
+  - Mirador
+  - UV
+  - Annona
+  - Clover
+  - Glycerine Viewer
+  - Theseus
+  - Curation
+v4-viewers:  
+  - Mirador
 topic: 
  - basic
  - image
 code:
  - iiif-prezi3
+top_tabs:
+  - label: Version 3
+    content: "{% capture my_include %}{%- include_relative recipe.md version='3' -%}{% endcapture %}{{ my_include | markdownify }}"
+  - label: Version 4
+    content: "{% capture my_include %}{%- include_relative v4/recipe.md version='4' -%}{% endcapture %}{{ my_include | markdownify }}"
 ---
 
+{{ theme.block-center-start }}
 
-## Use Case
+{% include blocks/tabs.html  tabs=page.top_tabs %}
 
-The simplest viable manifest for image content. If all you have for an object is one image on the web and a label to go along with it, this pattern turns it into a IIIF Presentation resource. If you would like to enable deep zooming, you will need to use a IIIF Image server. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
-
-## Implementation Notes
-
-This illustrates the mandatory structure and properties of a manifest, with the simplest possible content. 
-
-The JSON-LD opens with the `@context` declaration, which identifies the terms used in the document as belonging to the IIIF specification. The `id` property identifies this manifest with the URL at which it is available online. The `type` property must be `Manifest`. The `label` property is mandatory, and the language of its value must be given (or the special value `none`), using a [language map][prezi3-languages]. Here the language of the label is English and its value is "Single Image Example". The manifest's `items` property is a list of canvases. In this example there is only one canvas, with a `height` of 1800 and a `width` of 1200. These units have no dimension: they establish a coordinate space that in this case the single image will fill. The canvas's `id` property is used later as the `target` of the annotation that links to the single image. 
-
-The `items` property of the Canvas is a list of annotation pages, in this case there is only one page. The `items` property of the annotation page is a list of annotations, in this case there is only one annotation. This annotation is what links the image resource with the canvas. The `body` of the annotation is an image, the url of which is the `id` property of the body. The dimensions of the image, in pixels, are given and here match the canvas dimensions exactly. The `target` property tells us that the image is associated with the entirety of the canvas, and the `motivation` property of `painting` tells us that a client should render the image to fill the canvas.
-
-## Restrictions
-
-This recipe is not for large images or deep zoom functionality. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
-
-## Example
-
-{% include manifest_links.html manifest="manifest.json" %}
-
-{% include jsonviewer.html src="manifest.json" %}
-
-# Related Recipes
-
-* [Simplest Manifest - Audio][0002] and [Simplest Manifest - Video][0003] are equivalent to this example but for other media.
-* [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] shows a basic manifest for use with a IIIF Image server.
-* [Image different size to canvas][0004] shows a canvas with dimensions different from the pixel dimensions of its content.
-* [Multiple values and languages][0006] demonstrates language map variations, for multiple values and multiple languages. 
-
-
-{% include acronyms.md %}
-{% include links.md %}
+{{ theme.block-end }}
+<script>
+  if (!window.location.hash) {
+    let el = document.getElementById("version-3-heading");
+    el.className += " is-active";
+  }  
+</script>

recipe/0001-mvm-image/recipe.md

@@ -0,0 +1,32 @@
+## Use Case
+
+The simplest viable manifest for image content. If all you have for an object is one image on the web and a label to go along with it, this pattern turns it into a IIIF Presentation resource. If you would like to enable deep zooming, you will need to use a IIIF Image server. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
+
+## Implementation Notes
+
+This illustrates the mandatory structure and properties of a manifest, with the simplest possible content. 
+
+The JSON-LD opens with the `@context` declaration, which identifies the terms used in the document as belonging to the IIIF specification. The `id` property identifies this manifest with the URL at which it is available online. The `type` property must be `Manifest`. The `label` property is mandatory, and the language of its value must be given (or the special value `none`), using a [language map][prezi3-languages]. Here the language of the label is English and its value is "Single Image Example". The manifest's `items` property is a list of canvases. In this example there is only one canvas, with a `height` of 1800 and a `width` of 1200. These units have no dimension: they establish a coordinate space that in this case the single image will fill. The canvas's `id` property is used later as the `target` of the annotation that links to the single image. 
+
+The `items` property of the Canvas is a list of annotation pages, in this case there is only one page. The `items` property of the annotation page is a list of annotations, in this case there is only one annotation. This annotation is what links the image resource with the canvas. The `body` of the annotation is an image, the url of which is the `id` property of the body. The dimensions of the image, in pixels, are given and here match the canvas dimensions exactly. The `target` property tells us that the image is associated with the entirety of the canvas, and the `motivation` property of `painting` tells us that a client should render the image to fill the canvas.
+
+## Restrictions
+
+This recipe is not for large images or deep zoom functionality. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] recipe.
+
+## Example
+
+{% include manifest_links.html manifest="manifest.json" version="3" %}
+
+{% include jsonviewer.html src="manifest.json" %}
+
+# Related Recipes
+
+* [Simplest Manifest - Audio][0002] and [Simplest Manifest - Video][0003] are equivalent to this example but for other media.
+* [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] shows a basic manifest for use with a IIIF Image server.
+* [Image different size to canvas][0004] shows a canvas with dimensions different from the pixel dimensions of its content.
+* [Multiple values and languages][0006] demonstrates language map variations, for multiple values and multiple languages. 
+
+
+{% include acronyms.md %}
+{% include links.md %}

recipe/0001-mvm-image/v4/manifest.json

@@ -0,0 +1,35 @@
+{
+    "@context": "http://iiif.io/api/presentation/4/context.json",
+    "id": "{{ id.url }}",
+    "type": "Manifest",
+    "label": { "en": [ "Single Image Example" ] },
+    "items": [
+      {
+        "id": "{{ id.path }}/canvas/p1",
+        "type": "Canvas",
+        "height": 1800,
+        "width": 1200,
+        "items": [
+          {
+            "id": "{{ id.path }}/page/p1/1",
+            "type": "AnnotationPage",
+            "items": [
+              {
+                "id": "{{ id.path }}/annotation/p0001-image",
+                "type": "Annotation",
+                "motivation": "painting",
+                "body": {
+                  "id": "http://iiif.io/api/presentation/2.1/example/fixtures/resources/page1-full.png",
+                  "type": "Image",
+                  "format": "image/png",
+                  "height": 1800,
+                  "width": 1200
+                },
+                "target": "{{ id.path }}/canvas/p1"
+              }
+            ]
+          }
+        ]
+      }    
+    ]
+}

recipe/0001-mvm-image/v4/recipe.md

@@ -0,0 +1,33 @@
+
+## Use Case
+
+The simplest viable manifest for image content. If all you have for an object is one image on the web and a label to go along with it, this pattern turns it into a IIIF Presentation resource. If you would like to enable deep zooming, you will need to use a IIIF Image server. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service (v3)][0005] recipe.
+
+## Implementation Notes
+
+This illustrates the mandatory structure and properties of a manifest, with the simplest possible content. 
+
+The JSON-LD opens with the `@context` declaration, which identifies the terms used in the document as belonging to the IIIF specification. The `id` property identifies this manifest with the URL at which it is available online. The `type` property must be `Manifest`. The `label` property is mandatory, and the language of its value must be given (or the special value `none`), using a [language map][prezi3-languages]. Here the language of the label is English and its value is "Single Image Example". The manifest's `items` property is a list of canvases. In this example there is only one canvas, with a `height` of 1800 and a `width` of 1200. These units have no dimension: they establish a coordinate space that in this case the single image will fill. The canvas's `id` property is used later as the `target` of the annotation that links to the single image. 
+
+The `items` property of the Canvas is a list of annotation pages, in this case there is only one page. The `items` property of the annotation page is a list of annotations, in this case there is only one annotation. This annotation is what links the image resource with the canvas. The `body` of the annotation is an image, the url of which is the `id` property of the body. The dimensions of the image, in pixels, are given and here match the canvas dimensions exactly. The `target` property tells us that the image is associated with the entirety of the canvas, and the `motivation` property of `painting` tells us that a client should render the image to fill the canvas.
+
+## Restrictions
+
+This recipe is not for large images or deep zoom functionality. For this, see the [Support Deep Viewing with Basic Use of a IIIF Image Service (v3)][0005] recipe.
+
+## Example
+
+{% include manifest_links.html manifest="v4/manifest.json" version="4" %}
+
+{% include jsonviewer.html src="v4/manifest.json" %}
+
+# Related Recipes
+
+* [Simplest Manifest - Audio][0002] (v3) and [Simplest Manifest - Video][0003] (v3) are equivalent to this example but for other media.
+* [Support Deep Viewing with Basic Use of a IIIF Image Service][0005] (v3) shows a basic manifest for use with a IIIF Image server.
+* [Image different size to canvas][0004] (v3) shows a canvas with dimensions different from the pixel dimensions of its content.
+* [Multiple values and languages][0006] (v3) demonstrates language map variations, for multiple values and multiple languages. 
+
+
+{% include acronyms.md %}
+{% include links.md %}

recipe/0074-multiple-language-captions/index.md

@@ -4,50 +4,30 @@ id: 74
 layout: recipe
 tags: [video, caption, subtitle, presentation]
 summary: "Representing the relationship between a video file and its caption or subtitle files for multiple languages."
-topic: AV
 viewers:
-- Ramp
-- Theseus
+ - Ramp
+ - Theseus
+v4-viewers:  
+ - Mirador
+topic: 
+ - AV
+code:
+ - iiif-prezi3
+top_tabs:
+  - label: Version 3
+    content: "{% capture my_include %}{%- include_relative recipe.md version='3' -%}{% endcapture %}{{ my_include | markdownify }}"
+  - label: Version 4
+    content: "{% capture my_include %}{%- include_relative v4/recipe.md version='4' -%}{% endcapture %}{{ my_include | markdownify }}"
 ---
 
+{{ theme.block-center-start }}
 
-## Use Case
+{% include blocks/tabs.html  tabs=page.top_tabs %}
 
-Captions and subtitles may be available in multiple languages for video content and the IIIF Manifest representing the video can give access to representations of all the available languages. Because users will likely want to see captions/subtitles in their preferred language, the available languages should be presented as options from which one should be chosen.
-
-## Implementation notes
-
-This recipe builds on the pattern for [Using Caption and Subtitle Files with Video Content][0219], extending it to represent the availability of captions and subtitles in multiple languages.
-
-Similarly to offering a single caption/subtitle file, the multiple subtitle/caption files are provided as a `supplementing` Annotation on the Canvas that contains the video file. In the case of multiple captions/subtitles, however, the Annotation provides all the available languages as choices. IIIF viewers are then able to offer to end-users the choice for displaying subtitles/captions in one of the available languages during the video playback.
-
-In addition to this implementation, one might consider to provide the captions/subtitles also as multiple timed annotations. Although redundant, providing both implementations will enable more IIIF viewers to display the captions/subtitles, since they may use whichever implementation they support. See [Using Annotations for Timed Text][0079].
-
-## Restrictions
-
-Formats other than WebVTT (Web Video Text Tracks) are supported by the [Presentation API 3.0](https://iiif.io/api/presentation/3.0/), but current IIIF viewers do not support the display of captions/subtitles. Nevertheless, WebVTT is the format most likely to be implemented.
-
-When using segmented WebVTT with HLS (HTTP Live Streaming), see [Serving HLS Files][0257].
-
-## Example
-
-In this example we represent a video with subtitles in two languages: English and Italian.
-For expressing the availability of the subtitles in the two languages, we use an Annotation with a Choice body that contains two items, one for each language. The language of each subtitle file is expressed with a `language` property  containing a [BCP 47](https://tools.ietf.org/html/bcp47) language code as specified by the [Presentation API 3.0](https://iiif.io/api/presentation/3.0/#language-of-property-values).
-
-In this example we use subtitle files in the WebVTT format. Other format options include SRT (SubRip Text) or TTML (Timed Text Markup Language), but these are less likely to be supported in IIIF viewers.
-
-{% include manifest_links.html viewers="Ramp, Theseus" manifest="manifest.json" %}
-
-{% include jsonviewer.html src="manifest.json" config='data-line="60-92"'%}
-
-# Related recipes
-
-- [Simplest Manifest - Video][0003]
-- [Using Caption and Subtitle Files with Video Content][0219]
-- [Transcripts, Captions, and Subtitles - General Considerations][0231]
-- [Using Annotations for Timed Text][0079]
-- [Providing Access to Transcript Files of A/V Content][0017]
-
-
-{% include acronyms.md %}
-{% include links.md %}
+{{ theme.block-end }}
+<script>
+  if (!window.location.hash) {
+    let el = document.getElementById("version-3-heading");
+    el.className += " is-active";
+  }  
+</script>