Merge pull request #3700 from owid/homepage-thumbnail-size

🐛 increase the resolution of homepage intro primary thumbnails
owid · Jun 10, 2024 · 6002b04 · 6002b04
2 parents 572c04a + 9e34b7d
commit 6002b04
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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: {