Use the largest thumbnail size in the resource meta file.

apps/iiif/.iiifrc-base.yml

@@ -9,13 +9,18 @@ run:
   - extract-slug-source
   - delft-extract-labels
   - extract-part-of-collection
-  - extract-thumbnail
+  - extract-thumbnail-local
   - manifest-sqlite
   - metadata-analysis
   - site-collections
   - delft-image-source
   - typesense-manifests
 
+config:
+  extract-thumbnail-local:
+    width: 1080
+    height: 1080
+
 stores:
   collective-access:
     type: iiif-json

apps/iiif/scripts/extract-thumbnail-local.js

@@ -0,0 +1,56 @@
+import { createThumbnailHelper } from "@iiif/helpers";
+import { extract } from "iiif-hss";
+
+extract({
+  id: "extract-thumbnail-local",
+  name: "Extract Thumbnail",
+  types: ["Manifest"],
+  invalidate: async (resource, api, config) => {
+    const cache = await api.caches.value;
+    return !cache.extractThumbnail && cache.extractThumbnail !== false;
+  }},
+  async (resource, api, config) => {
+    const vault = resource.vault;
+    const helper = createThumbnailHelper(vault);
+    const thumbnail = await helper.getBestThumbnailAtSize(
+      api.resource,
+      config.width
+        ? {
+            width: config.width,
+            height: config.height || config.width,
+          }
+        : {
+            width: 256,
+            height: 256,
+          },
+      config.dereference || false
+    );
+
+    if (thumbnail?.best) {
+      return {
+        meta: { thumbnail: thumbnail.best },
+        caches: { extractThumbnail: true },
+      };
+    }
+    else {
+      const thumbnail = await helper.getBestThumbnailAtSize(
+        api.resource, {
+              width: 256,
+              height: 256,
+            },
+        config.dereference || false
+      );
+
+      if (thumbnail?.best) {
+        return {
+          meta: { thumbnail: thumbnail.best },
+          caches: { extractThumbnail: true },
+        };
+      }
+    }
+
+    return {
+      caches: { extractThumbnail: false },
+    };
+  },
+)

apps/static-site/src/iiif.ts

@@ -24,8 +24,10 @@ export async function loadCollection(slug: string) {
 
 export async function loadCollectionMeta(slug: string) {
   const resp = await fetch(`${IIIF_URL}${slug}/meta.json`);
+
   if (resp.ok) {
-    return resp.json();
+    const json = await resp.json();
+    return json;
   }
 }