From 8bbd9224d4ce76f10e60d550b410d092c4b3a8f4 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Thu, 29 Aug 2024 14:42:22 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20data=20insight=20atom=20fe?=
 =?UTF-8?q?ed=20image=20height=20/=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/components/AtomArticleBlocks.tsx | 32 +++++++++------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/site/gdocs/components/AtomArticleBlocks.tsx b/site/gdocs/components/AtomArticleBlocks.tsx
index 28c529e6955..9e6d5bd98e6 100644
--- a/site/gdocs/components/AtomArticleBlocks.tsx
+++ b/site/gdocs/components/AtomArticleBlocks.tsx
@@ -9,7 +9,6 @@ import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 import {
     getFilenameExtension,
     getFilenameWithoutExtension,
-    isNull,
     LARGEST_IMAGE_WIDTH,
 } from "@ourworldindata/utils"
 
@@ -83,28 +82,25 @@ function Image({
     const filenameWithoutExtension = encodeURIComponent(
         getFilenameWithoutExtension(image.filename)
     )
-    const resizedWidth = match(image.originalWidth)
-        .when(
-            (width) => isNull(width),
-            () => ""
-        )
-        .when(
-            (width) => width <= LARGEST_IMAGE_WIDTH,
-            () => ""
-        )
-        .when(
-            (width) => width > LARGEST_IMAGE_WIDTH,
-            () => `_${LARGEST_IMAGE_WIDTH}`
-        )
-        .otherwise(() => "")
+    const widthSuffix =
+        image.originalWidth && image.originalWidth > LARGEST_IMAGE_WIDTH
+            ? `_${LARGEST_IMAGE_WIDTH}`
+            : ""
+    const aspectRatio =
+        image.originalWidth && image.originalHeight
+            ? image.originalWidth / image.originalHeight
+            : null
+    const height = aspectRatio
+        ? Math.round(LARGEST_IMAGE_WIDTH / aspectRatio)
+        : undefined
 
     const extension = getFilenameExtension(image.filename)
     return (
         <img
-            src={`${BAKED_BASE_URL}${IMAGES_DIRECTORY}${filenameWithoutExtension}${resizedWidth}.${extension}`}
+            src={`${BAKED_BASE_URL}${IMAGES_DIRECTORY}${filenameWithoutExtension}${widthSuffix}.${extension}`}
             alt={alt ?? image.defaultAlt}
-            width={image.originalWidth ?? undefined}
-            height={image.originalHeight ?? undefined}
+            width={LARGEST_IMAGE_WIDTH}
+            height={height}
         />
     )
 }