Merge pull request #4279 from owid/cloudflare-images-fixes

🐛 fix cloudflare image UI issues
owid · Dec 10, 2024 · 1e6370d · 1e6370d
2 parents e212fa7 + e5836d6
commit 1e6370d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 32 deletions.
diff --git a/site/Lightbox.tsx b/site/Lightbox.tsx
@@ -37,18 +37,6 @@ function getActiveSourceImgUrl(img: HTMLImageElement): string | undefined {
     return undefined
 }
 
-// Cloudflare Images URLs end in w=1000, so we need to extract the filename from the URL
-// e.g. https://imagedelivery.net/owid-id/the-filename.png/w=1000 -> the-filename.png
-function getFilenameFromCloudflareUrl(url: string | undefined) {
-    if (!url) return undefined
-    const regex = /\/([^\/]+)\/w=/
-    const match = url.match(regex)
-    if (match) {
-        return match[1]
-    }
-    return undefined
-}
-
 const Lightbox = ({
     children,
     containerNode,
@@ -217,7 +205,8 @@ export const runLightbox = () => {
             const highResSrc = img.getAttribute("data-high-res-src")
             // If the image is a Gdoc Image with a smallFilename, get the source that is currently active
             const activeSourceImgUrl = getActiveSourceImgUrl(img)
-            const imgFilename = getFilenameFromCloudflareUrl(activeSourceImgUrl)
+            const imgFilename =
+                img.getAttribute("data-filename") || "owid-image"
 
             const imgSrc = highResSrc
                 ? // getAttribute doesn't automatically URI encode values, img.src does

diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
@@ -88,6 +88,8 @@ export default function Image(props: {
     const isSmall = useMediaQuery(SMALL_BREAKPOINT_MEDIA_QUERY)
     const image = useImage(filename)
     const smallImage = useImage(smallFilename)
+    const activeImage = isSmall && smallImage ? smallImage : image
+
     const renderImageError = (name: string) => (
         <BlockErrorFallback
             className={className}
@@ -99,32 +101,25 @@ export default function Image(props: {
     )
 
     const handleDownload = useCallback(async () => {
-        let src = ""
-        let filename = ""
-        if (image) {
-            src = makeSrc(image)
-            filename = image.filename
-        }
-        if (isSmall && smallImage) {
-            src = makeSrc(smallImage)
-            filename = smallImage.filename
-        }
+        if (!activeImage) return
+        const { filename } = activeImage
+        const src = makeSrc(activeImage)
         if (src && filename) {
             const response = await fetch(src)
             const blob = await response.blob()
             triggerDownloadFromBlob(filename, blob)
         }
-    }, [image, smallImage, isSmall])
+    }, [activeImage])
 
-    if (!image || !image.cloudflareId) {
+    if (!activeImage || !activeImage.cloudflareId) {
         if (isPreviewing) {
             return renderImageError(filename)
         }
         // Don't render anything if we're not previewing (i.e. a bake) and the image is not found
         return null
     }
 
-    const alt = props.alt ?? image.defaultAlt
+    const alt = props.alt ?? activeImage.defaultAlt
     const isInteractive = containerType !== "thumbnail" && shouldLightbox
     const maybeLightboxClassName = isInteractive ? LIGHTBOX_IMAGE_CLASS : ""
 
@@ -135,10 +130,10 @@ export default function Image(props: {
         return `${CLOUDFLARE_IMAGES_URL}/${image.cloudflareId}/w=${image.originalWidth}`
     }
 
-    const imageSrc = makeSrc(image)
+    const imageSrc = makeSrc(activeImage)
     const sourceProps = generateSourceProps(
         smallImage,
-        image,
+        activeImage,
         CLOUDFLARE_IMAGES_URL
     )
 
@@ -161,10 +156,11 @@ export default function Image(props: {
                     alt={alt}
                     className={maybeLightboxClassName}
                     loading="lazy"
+                    data-filename={activeImage.filename}
                     // There's no way of knowing in advance whether we'll be showing the image or smallImage - we just have to choose one
                     // I went with image, as we currently only use smallImage for data insights
-                    width={image.originalWidth ?? undefined}
-                    height={image.originalHeight ?? undefined}
+                    width={activeImage.originalWidth ?? undefined}
+                    height={activeImage.originalHeight ?? undefined}
                 />
             </picture>
             {isInteractive && (

diff --git a/site/gdocs/components/KeyInsights.tsx b/site/gdocs/components/KeyInsights.tsx
@@ -363,7 +363,7 @@ export const KeyInsights = ({
                                                     />
                                                 </div>
                                             </div>
-                                            <div className="span-cols-7 span-md-cols-12">
+                                            <div className="key-insight__asset-container span-cols-7 span-md-cols-12">
                                                 {renderAssetForInsight({
                                                     filename,
                                                     url,

diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
@@ -331,7 +331,8 @@ h3.article-block__heading {
     }
 }
 
-.article-block__image {
+.article-block__image,
+.key-insight__asset-container {
     width: 100%;
     margin: 32px 0;