Option to customise thumbnail display

[lukew-cogapp]

Hello, enhancement ideas for handling thumbnails:

• Add option to render thumbnails as icons
  • Use case is media with not-very-interesting thumbnails that will all look the same at 200px
  • Benefit is taking up less space and is slightly related to LazyLoad item thumbnails #86 for performance reasons
• Add option to not render thumbnails at all
  • Use case is media with a few pages only, we may decide it's not worth displaying the thumbnails at all
  • In this instance the left/right and page indicator could still be useful, but their position may need to shift
  • In this instance the page search is not useful

[mathewjordan]

Hi @lukew-cogapp, thank you for submitting!

I like adding both options, perhaps extending the options prop with a thumbnails property with some room for growth? What do you envision as the icon?

{
  options: {
    thumbnails: {
      style: "auto" | "hide" | "icons"; // default: "auto"
    }
  }
}

[lukew-cogapp]

Some generic default with an option to pass a URL perhaps, for something custom.

Might ask our designer to have a quick think!

[lukew-cogapp]

We'll send over a mockup for this :)

I also note that if a manifest does not specify thumbnails, the viewer attempts to load the info.json, presumably, it tries to use the body: { id } of an item. I double-checked and thumbnails for items are a SHOULD, rather than a MUST in the 3.0 spec, so ideally it would handle this gracefully. Here's an example:
https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=https%3A%2F%2Fcollections.snm.ku.dk%2Fapi%2Fiiif%2Fobject%2FNHMD918188%2Fmanifest (note that we have a story to add thumbnails to this manifest!)

FYI, because I checked:

• Universal Viewer doesn't work here either, it just tries to use /full/200,/0/default.jpg from the root domain, which fails
• Mirador does work, I'm assuming it also looks at the body: { id }, recognises that it's an info.json and then constructs a 120px Image API URL, see example URL generated by Mirador when thumbnails are not present.

I can see two options:

• Do what Mirador does
• Fall back to icons if auto is set or left as default

I think creating thumbnail URLs on the fly is the best route, but ideally in combination with the icons or custom icon option.

Edit: I think it's the logic here that would need modifying, maybe just something as simple as checking for info.json in the id and turning it into a thumbnail URL, as AFAIK, info.json is a required file extension in Image API 3.0

clover-iiif/src/hooks/use-iiif/getThumbnail.ts

Lines 41 to 45 in 43da0ee

	if (!entity.annotations[0].body) return;
	const annotationBody = entity.annotations[0]
	.body as IIIFExternalWebResource;
	if (annotationBody.type === "Image") candidates.push(annotationBody);

[lukew-cogapp]

Hi @mathewjordan

Mockups attached:

Thumbnail icons
The primary addition to this mockup is a default icon if the icons mode is set, one for active and one for inactive. We used fontawesome icons here, though we think being able to specify your own in config would be nice, too. We like the idea of inverting colours here, too, to give a nice contrast.
We made a few small design changes, whilst we were there, in case you're interested!

• Surround the input boxes with a rounded border, to make sure they're obvious enough to users
• This would also go for the page search by the left/right arrows for consistency, too
• Remove the drop shadow from icons (but left it in place for the buttons)
• Give the info/search panel a solid background colour so that it stands out from the page background
• Add a border between the info/search panel to give more distinction between it and the canvas/viewer
• Custom scrollbars (or at least, picking up on accent colours)

Idea on no thumbnails
Not a huge departure from what you do when there is only 1 item, but overlaying the left/right/search arrows on the viewer

All just suggestions, of course!

[mikeapp]

A 👍 to dynamically generating thumbnails. iiii-helpers / Vault has a helper function for this: https://github.com/IIIF-Commons/iiif-helpers/blob/main/docs/thumbnails.md?plain=1 This might be able to replace some of the existing code. Update: I'm not sure about the dependency introduced here, but there should be enough info in the service definition to work with. I'll take a look.