✨ use resized images in the data insights atom feed

owid · Aug 19, 2024 · 0fc9338 · 0fc9338
1 parent d29f58f
commit 0fc9338
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/@ourworldindata/utils/src/image.ts b/packages/@ourworldindata/utils/src/image.ts
@@ -9,6 +9,7 @@ import { match, P } from "ts-pattern"
 export const AUTHOR_BYLINE_WIDTH = 48
 export const THUMBNAIL_WIDTH = 100
 export const LARGE_THUMBNAIL_WIDTH = 350
+export const LARGEST_IMAGE_WIDTH = 1350
 
 export function getSizes(
     originalWidth: ImageMetadata["originalWidth"]
@@ -18,7 +19,7 @@ export function getSizes(
     const widths = [AUTHOR_BYLINE_WIDTH, THUMBNAIL_WIDTH]
     // start at large thumbnail and go up by 500 to a max of 1350 before we just show the original image
     let width = LARGE_THUMBNAIL_WIDTH
-    while (width < originalWidth && width <= 1350) {
+    while (width < originalWidth && width <= LARGEST_IMAGE_WIDTH) {
         widths.push(width)
         width += 500
     }

diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
@@ -299,6 +299,7 @@ export { PromiseSwitcher } from "./PromiseSwitcher.js"
 export {
     THUMBNAIL_WIDTH,
     LARGE_THUMBNAIL_WIDTH,
+    LARGEST_IMAGE_WIDTH,
     getSizes,
     generateSrcSet,
     getFilenameWithoutExtension,

diff --git a/site/gdocs/components/AtomArticleBlocks.tsx b/site/gdocs/components/AtomArticleBlocks.tsx
@@ -6,6 +6,11 @@ import { BAKED_BASE_URL } from "../../../settings/serverSettings.js"
 import { useImage } from "../utils.js"
 import ArticleBlock, { Container, getLayout } from "./ArticleBlock.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
+import {
+    LARGEST_IMAGE_WIDTH,
+    getFilenameExtension,
+    getFilenameWithoutExtension,
+} from "@ourworldindata/utils"
 
 export default function AtomArticleBlocks({
     blocks,
@@ -74,9 +79,13 @@ function Image({
     const smallImage = useImage(smallFilename)
     const image = smallImage || normalImage
     if (!image) return null
+    const filenameWithoutExtension = encodeURIComponent(
+        getFilenameWithoutExtension(image.filename)
+    )
+    const extension = getFilenameExtension(image.filename)
     return (
         <img
-            src={`${BAKED_BASE_URL}${IMAGES_DIRECTORY}${encodeURIComponent(image.filename)}`}
+            src={`${BAKED_BASE_URL}${IMAGES_DIRECTORY}${filenameWithoutExtension}_${LARGEST_IMAGE_WIDTH}.${extension}`}
             alt={alt ?? image.defaultAlt}
             width={image.originalWidth ?? undefined}
             height={image.originalHeight ?? undefined}