diff --git a/packages/11ty/_includes/components/figure/image/html.js b/packages/11ty/_includes/components/figure/image/html.js index 48f08869d..3dc9fcfc0 100644 --- a/packages/11ty/_includes/components/figure/image/html.js +++ b/packages/11ty/_includes/components/figure/image/html.js @@ -9,6 +9,7 @@ import { html } from '#lib/common-tags/index.js' * @return {String} HTML containing a `figureImageElement`, a caption and annotations UI */ export default function (eleventyConfig) { + const annotationsUI = eleventyConfig.getFilter('annotationsUI') const figureCaption = eleventyConfig.getFilter('figureCaption') const figureImageElement = eleventyConfig.getFilter('figureImageElement') const figureLabel = eleventyConfig.getFilter('figureLabel') @@ -16,6 +17,7 @@ export default function (eleventyConfig) { return async function (figure) { const { + annotations, caption, credit, id, @@ -24,18 +26,25 @@ export default function (eleventyConfig) { } = figure const labelElement = figureLabel({ id, label, isSequence }) + const interactive = (annotations ?? []).length > 0 /** - * Wrap image in modal link - */ - let imageElement = figureImageElement(figure, { interactive: false }) + * Construct the HTML figure: + * - Wrap image in modal link + * - Add caption + * - Add optional annotations UI + **/ + + let imageElement = figureImageElement(figure, { interactive }) imageElement = figureModalLink({ content: imageElement, id }) const captionElement = figureCaption({ caption, content: labelElement, credit }) + const annotationsUIElement = !isSequence ? annotationsUI({ figure, lightbox: true }) : '' return html` ${imageElement} ${captionElement} + ${annotationsUIElement} ` } } diff --git a/packages/11ty/_plugins/figures/annotation/index.js b/packages/11ty/_plugins/figures/annotation/index.js index 70646a29e..d0b439f20 100644 --- a/packages/11ty/_plugins/figures/annotation/index.js +++ b/packages/11ty/_plugins/figures/annotation/index.js @@ -26,7 +26,7 @@ const logger = chalkFactory('Figures:Annotation') */ export default class Annotation { constructor (figure, data) { - const { annotationCount, iiifConfig, outputDir, outputFormat, src: figureSrc, zoom } = figure + const { annotationCount, iiifConfig, outputDir, outputFormat, printImage, src: figureSrc, zoom } = figure const { baseURI, tilesDirName } = iiifConfig const { label, region, selected, src, text } = data const { base, name } = src ? path.parse(src) : {} @@ -75,7 +75,8 @@ export default class Annotation { const uri = () => { switch (true) { case isImageService: - return info() + // NB: Annotations for imageServices are *max jpeg*s not the service endpoint + return path.join(outputDir, name, printImage) default: try { return new URL(path.join(baseURI, outputDir, base)).href diff --git a/packages/11ty/_plugins/figures/iiif/manifest/README.md b/packages/11ty/_plugins/figures/iiif/manifest/README.md index 3a04a0691..2dbe78db4 100644 --- a/packages/11ty/_plugins/figures/iiif/manifest/README.md +++ b/packages/11ty/_plugins/figures/iiif/manifest/README.md @@ -1,7 +1,17 @@ # IIIF Manifests -The `Manifest` module accepts a `Figure` instance and provides `toJSON()` and `write()` methods for generating and writing a IIIF manifest. +The `Manifest` module accepts a `Figure` instance and provides `toJSON()` and `write()` methods for generating and writing a IIIF Presentation API manifest. + +## Figures Data to IIIF Schema Details +Manifests are generated for figures: +- with `zoom: true` +- with annotations (see below) +- with sequences + +### Manifests +Each manifest contains a Canvas annotated with an AnnotationPage whose items contain at least one Annotation with `motivation:painting`, whose `service` key points to the Service data for quire's IIIF Image API level 0 implementation. + +IDs for the Canvas and AnnotationPage are mostly just used for internal routing (eg, passing a manifest and canvas ID to display to canvas-panel) and do not provide JSON responses, but note that by community convention painting Annotations must use image-returning URLs even if these URLs are disgarded in favor of using the IIIF Service for image delivery. Quire uses the print-image.jpg as the ID for this canvas. -## Features ### Annotations An `annotation` adds additional information (for example an image) to a canvas.