biiif (build iiif) 👷✨📃

npm i biiif --save

const { build } = require('biiif');
build('myfolder', 'http://example.com/myfolder');

Organise your files according to a simple naming convention to generate IIIF content/data using 100% node.js! IPFS compatible.

Use biiif-cli to run from a terminal.

Note: This uses the IIIF Presentation API v3, and is compatible with the Universal Viewer v3.

Github template repo for hosting IIIF on Netlify and Vercel: https://github.com/iiif-commons/biiif-template

Building static sites with biiif workshop: https://github.com/edsilv/biiif-workshop

Parameters

Conventions

A collection is a folder with sub-folders whose names do not start with an underscore.

A manifest is a folder with sub-folders whose names do start with an underscore.

A collection's sub-folders (no underscore) are treated as further nested collections.

A manifest's sub-folders (with underscore) are treated as canvases to add to the manifest.

Files within 'canvas folders' (.jpg, .pdf, .mp4, .obj) are annotated onto the canvas with a painting motivation.

Annotations

IIIF Presentation 3.0 uses the Web Annotation Data Model to annotate canvases.

By default, biiif will annotate any files it finds in a canvas directory (except info.yml and thumb.jpg) onto the canvas with a painting motivation.

This is handy as a quick way to generate simple manifests. However, what if you want to annotate some text onto a canvas with a commenting motivation?

Or what happens when you have obj or gltf files that require image textures to be located in the same directory? You don't want these files to be annotated onto the canvas too!

This is where custom annotations come in. Just create a file my-annotation.yml in the canvas directory and set the desired properties in that.

For example, here is my-comment.yml:

motivation: commenting
value: This is my comment on the image

Here we've excluded the type (TextualBody is assumed), and format (text/plain is assumed).

What about the gltf example? Here's how my-3d-object.yml could look:

value: assets/myobject.gltf

Here we've excluded the motivation (painting is assumed), type (Model is assumed), and format (model/gltf+json is assumed).

biiif knows that because it's a gltf file, it's likely to have all of the above values. You just need to include a value property pointing to where you've put the gltf file itself. In this case, an assets folder within the canvas directory. The associated image textures can live in the assets folder too, they won't get annotated unless you specifically ask for them to be.

Image Tile Services

biiif will automatically generate IIIF image tiles for any image it finds and put them in a +tiles directory, along with an associated info.json. The + is prepended to any directories generated by biiif and means it ignores them when generating manifests. The image service is added to the generated annotation for each image in your IIIF manifest.

Metadata

Metadata is not mandatory, but can be included as an info.yml file within a collection, manifest, or canvas folder. e.g.

label: The Lord of the Rings
description: The Lord of the Rings Trilogy
attribution: J. R. R. Tolkien
metadata:
  License: Copyright Tolkien Estate
  Author: J. R. R. Tolkien
  Published Date: 29 July 1954

Here's an example of an info.yml supplying descriptive + rights properties and metadata for a gold-broach image manifest:

https://github.com/nomadproject/objects/blob/gh-pages/collection/gold-broach/info.yml

This manifest contains a single canvas folder _gold-broach with an image to be painted onto the canvas. If there were many canvases in this manifest it might make sense to add an info.yml to each subfolder with extra image-specific metadata.

Within the info.yml you can set the label, description, and attribution descriptive and rights properties at the top-level. IIIF Presentation 3 (in beta) has renamed description to summary, and attribution to requiredStatement but these will still work in IIIF viewers.

Under these you can add a metadata section that is essentially a list of key value pairs containing any info you like (there is deliberately no specification for this as the IIIF spec writers feel it falls outside of their remit).

Thumbnails

To add a thumbnail to your collection, manifest, or canvas simply include a file named thumb.jpg (any image file extension will work) in the directory.

If no thumb image is found in a canvas directory, biiif checks to see if an image is being annotated onto the canvas with a painting motivation. If so, a thumb is generated (100 x 100px) from that.

Linked Manifests

Often it's necessary to include IIIF manifests in your collection from elsewhere. To do this, include a manifests.yml file in your collection folder e.g.

manifests:
  - id: http://test.com/collection/linkedmanifest1/index.json
    label: Linked Manifest 1
    thumbnail: http://test.com/collection/linkedmanifest1/thumb.jpg
  - id: http://test.com/collection/linkedmanifest2/index.json
    label: Linked Manifest 2
  - id: http://test.com/collection/linkedmanifest3/index.json

If you leave the label property blank, it will default to the name of the last folder in the id URL.

Including a manifests.yml file in a folder without any sub-folders forces it to behave like a collection.

Examples

A repo of test manifests: https://github.com/edsilv/biiif-test-manifests

Collection for the Nomad Project: https://github.com/nomadproject/objects

IIIF 3D manifests: https://github.com/edsilv/iiif-3d-manifests

...

Here is an example of how to organise your files/folders for biiif.

This example only has a single root collection, but biiif will happily build collections to any nested depth.

biiif will accept a manifest folder too, generating a single manifest index.json.

lord-of-the-rings                  // collection
├── info.yml                       // collection metadata
├── thumb.jpg                      // collection thumbnail
├── 0-the-fellowship-of-the-ring   // manifest
|   ├── _page-1                    // canvas
|   |   ├── page-1.jpg             // content annotation
|   |   └── info.yml               // canvas metadata
|   ├── _page-2                    // canvas
|   |   ├── page-2.jpg             // content annotation
|   |   └── info.yml               // canvas metadata
|   ├── _page-n                    // canvas
|   |   ├── page-n.jpg             // content annotation
|   |   └── info.yml               // canvas metadata
|   ├── info.yml                   // manifest metadata
|   └── thumb.jpg                  // manifest thumbnail
├── 1-the-two-towers               // manifest
|   ├── _page-1                    // canvas
|   ├── _page-2                    // canvas
|   ├── _page-n                    // canvas
|   ├── info.yml                   // manifest metadata
|   └── thumb.jpg                  // manifest thumbnail
└── 2-the-return-of-the-king       // manifest
├── _page-1                    // canvas
├── _page-2                    // canvas
├── _page-n                    // canvas
├── info.yml                   // manifest metadata
└── thumb.jpg                  // manifest thumbnail

Tips

If you need to include a folder in your project but don't want biiif to treat it as a manifest, add a ! to the start of its name, e.g. !ignorethisfolder.

Watch out for ":" in metadata descriptions, these will throw an error when parsing the YML.