This is a beta version of migrating these workshop materials to a new platform. If you run into issues please file an issue or click on the edit link above and submit a pull request. You can use the previous version of the workshop materials as a fallback.

Image Resource

We need to add the properties of the resource object that is part of our image annotation.

Here’s what our annotation looks like so far:

{
  "@type": "oa:Annotation",
  "motivation": "sc:painting",
  "on": "http://localhost:3000/segPap_022/canvas/1",
  "resource": {}
}

Image resource

Here are the properties and values that will form the resource:

property value
@type dctypes:Image
@id IIIF Image API URL

The value of @id can be any image URL. If a IIIF image service is available then the value can be the full image URL. You can pick any values. In the example below we’ll select the full region of the image with a width of 500 pixels and the JPEG format.

The value of resource will then look something like this:

{
  "@type": "dctypes:Image",
  "@id": "https://iiif.lib.ncsu.edu/iiif/segPap_022/full/500,/0/default.jpg"
}

width and height

Since we’re specifying an image which can have a width and height different than the canvas coordinates, we can help the client handle the image appropriately by also adding width and height properties to our image resource.

Question: With a width of 500 what will the height of our image be? How can we tell?

Manifest up to this point

{
  "@context": "http://iiif.io/api/presentation/2/context.json",
  "@type": "sc:Manifest",
  "@id": "http://localhost:3000/manifest.json",
  "label": "Papillons",
  "description": "Four patterns inspired by butterflies.",
  "attribution": "Special Collections Research Center at NCSU Libraries",
  "logo": "http://localhost:3000/logo.jpg",
  "sequences": [
    {
      "@type": "sc:Sequence",
      "canvases": [
        {
          "@type": "sc:Canvas",
          "@id": "http://localhost:3000/segPap_022/canvas/1",
          "label": "22",
          "width": 6099,
          "height": 8599,
          "images": [
            {
              "@type": "oa:Annotation",
              "motivation": "sc:painting",
              "on": "http://localhost:3000/segPap_022/canvas/1",
              "resource": {
                "@type": "dctypes:Image",
                "@id": "https://iiif.lib.ncsu.edu/iiif/segPap_022/full/500,/0/default.jpg",
                "width": 500,
                "height": 704
              }
            }
          ]
        }
      ]
    }
  ]
}