From 4d4f47d838f6cb760c8210ec16f60fab72f07375 Mon Sep 17 00:00:00 2001
From: gestchild <g.estchild@wellcome.ac.uk>
Date: Fri, 1 Nov 2024 14:16:46 +0000
Subject: [PATCH] create thumbnail from image service if there is no thumbnail
 service

---
 .../webapp/components/IIIFViewer/IIIFCanvasThumbnail.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/content/webapp/components/IIIFViewer/IIIFCanvasThumbnail.tsx b/content/webapp/components/IIIFViewer/IIIFCanvasThumbnail.tsx
index 889ec5f3ce..83935a1d04 100644
--- a/content/webapp/components/IIIFViewer/IIIFCanvasThumbnail.tsx
+++ b/content/webapp/components/IIIFViewer/IIIFCanvasThumbnail.tsx
@@ -2,6 +2,7 @@ import { FunctionComponent, useState } from 'react';
 import styled from 'styled-components';
 
 import { font } from '@weco/common/utils/classnames';
+import { iiifImageTemplate } from '@weco/common/utils/convert-image-uri';
 import LL from '@weco/common/views/components/styled/LL';
 import Space from '@weco/common/views/components/styled/Space';
 import { useUser } from '@weco/common/views/components/UserProvider/UserProvider';
@@ -78,6 +79,9 @@ const IIIFCanvasThumbnail: FunctionComponent<IIIFCanvasThumbnailProps> = ({
   const { user } = useUser();
   const role = user?.role;
   const isRestricted = canvas.hasRestrictedImage;
+  const urlTemplate = canvas.imageServiceId
+    ? iiifImageTemplate(canvas.imageServiceId)
+    : undefined;
 
   return (
     <IIIFViewerThumb>
@@ -97,7 +101,10 @@ const IIIFCanvasThumbnail: FunctionComponent<IIIFCanvasThumbnailProps> = ({
             <IIIFViewerImage
               highlightImage={highlightImage}
               width={canvas?.thumbnailImage?.width || 30}
-              src={canvas?.thumbnailImage?.url}
+              src={
+                canvas?.thumbnailImage?.url ||
+                (urlTemplate && urlTemplate({ size: '200,' }))
+              }
               srcSet=""
               sizes={`${canvas?.thumbnailImage?.width || 30}px`}
               alt=""