From 9e34b7dc8d05cdeb7a626703f1d9c8d8f9180bee Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Mon, 10 Jun 2024 13:14:37 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20increase=20the=20resolution=20of?=
 =?UTF-8?q?=20homepage=20intro=20primary=20thumbnails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/components/HomepageIntro.tsx | 12 +++++++++---
 site/gdocs/components/Image.tsx         | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/site/gdocs/components/HomepageIntro.tsx b/site/gdocs/components/HomepageIntro.tsx
index 94393a0ea58..7049c9b82e7 100644
--- a/site/gdocs/components/HomepageIntro.tsx
+++ b/site/gdocs/components/HomepageIntro.tsx
@@ -8,7 +8,7 @@ import { formatAuthors, groupBy } from "@ourworldindata/utils"
 import { Button } from "@ourworldindata/components"
 import { useLinkedDocument } from "../utils.js"
 import { DocumentContext } from "../OwidGdoc.js"
-import Image from "./Image.js"
+import Image, { ImageParentContainer } from "./Image.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
@@ -17,6 +17,7 @@ import { BAKED_BASE_URL } from "../../../settings/clientSettings.js"
 type FeaturedWorkTileProps = EnrichedBlockHomepageIntroPost & {
     isTertiary?: boolean
     className?: string
+    thumbnailSize?: ImageParentContainer
 }
 
 function FeaturedWorkTile({
@@ -28,6 +29,7 @@ function FeaturedWorkTile({
     url,
     filename,
     className = "",
+    thumbnailSize = "thumbnail",
 }: FeaturedWorkTileProps) {
     const { linkedDocument, errorMessage } = useLinkedDocument(url)
     const { isPreviewing } = useContext(DocumentContext)
@@ -74,7 +76,7 @@ function FeaturedWorkTile({
                 <Image
                     shouldLightbox={false}
                     filename={thumbnailFilename}
-                    containerType="thumbnail"
+                    containerType={thumbnailSize}
                 />
             )}
             {kicker && (
@@ -177,7 +179,11 @@ export function HomepageIntro({ className, featuredWork }: HomepageIntroProps) {
                 <div className="grid grid-cols-9 span-cols-9 span-md-cols-12 homepage-intro__featured-work-container">
                     <div className="homepage-intro__primary-tiles span-cols-6">
                         {primary.map((work, i) => (
-                            <FeaturedWorkTile key={i} {...work} />
+                            <FeaturedWorkTile
+                                thumbnailSize="span-6"
+                                key={i}
+                                {...work}
+                            />
                         ))}
                     </div>
                     <div className="homepage-intro__secondary-tiles span-cols-3 col-start-7">
diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
index e24452ba200..2f910b6a13f 100644
--- a/site/gdocs/components/Image.tsx
+++ b/site/gdocs/components/Image.tsx
@@ -31,7 +31,14 @@ const gridSpan6 = generateResponsiveSizes(6)
 const gridSpan7 = generateResponsiveSizes(7)
 const gridSpan8 = generateResponsiveSizes(8)
 
-type ImageParentContainer = Container | "thumbnail" | "full-width"
+export type ImageParentContainer =
+    | Container
+    | "thumbnail"
+    | "full-width"
+    | "span-5"
+    | "span-6"
+    | "span-7"
+    | "span-8"
 
 const containerSizes: Record<ImageParentContainer, string> = {
     ["default"]: gridSpan8,
@@ -46,6 +53,10 @@ const containerSizes: Record<ImageParentContainer, string> = {
     ["full-width"]: "100vw",
     ["key-insight"]: gridSpan5,
     ["author-header"]: gridSpan2,
+    ["span-5"]: gridSpan5,
+    ["span-6"]: gridSpan6,
+    ["span-7"]: gridSpan7,
+    ["span-8"]: gridSpan8,
 }
 
 export default function Image(props: {