✨ prefer smallFilename for data insights

owid · Jan 14, 2025 · 5a222d7 · 5a222d7
1 parent 8b3042d
commit 5a222d7
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 11 deletions.
diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx
@@ -7,6 +7,7 @@ import {
     LinkedAuthor,
     uniqBy,
     getPaginationPageNumbers,
+    OwidGdocType,
 } from "@ourworldindata/utils"
 import { DataInsightBody } from "./gdocs/pages/DataInsight.js"
 import { dataInsightIndexToIdMap } from "./SiteConstants.js"
@@ -104,7 +105,9 @@ export const DataInsightsIndexPageContent = (
             }
         )
     return (
-        <DocumentContext.Provider value={{ isPreviewing }}>
+        <DocumentContext.Provider
+            value={{ isPreviewing, documentType: OwidGdocType.DataInsight }}
+        >
             <AttachmentsContext.Provider
                 value={{
                     imageMetadata,
@@ -117,10 +120,10 @@ export const DataInsightsIndexPageContent = (
                 }}
             >
                 <header className="data-insights-index-page__header grid grid-cols-12-full-width span-cols-14">
-                    <h2 className="span-cols-8 col-start-4 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12 display-2-semibold ">
+                    <h2 className="span-cols-6 col-start-5 col-md-start-4 span-md-cols-10 col-sm-start-2 span-sm-cols-12 display-2-semibold ">
                         Daily Data Insights
                     </h2>
-                    <p className="span-cols-8 col-start-4 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12 body-1-regular">
+                    <p className="span-cols-6 col-start-5 col-md-start-4 span-md-cols-8 col-sm-start-2 span-sm-cols-12 body-1-regular">
                         Bite-sized insights on how the world is changing,
                         published every weekday.
                     </p>

diff --git a/site/gdocs/DocumentContext.tsx b/site/gdocs/DocumentContext.tsx
@@ -1,5 +1,11 @@
+import { OwidGdocType } from "@ourworldindata/types"
 import { createContext } from "react"
 
-export const DocumentContext = createContext<{ isPreviewing: boolean }>({
+export const DocumentContext = createContext<{
+    isPreviewing: boolean
+    // Currently used in Image.tsx to always use smallFilename when viewing a data insight
+    documentType?: OwidGdocType
+}>({
     isPreviewing: false,
+    documentType: undefined,
 })
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
@@ -96,7 +96,9 @@ export function OwidGdoc({
                 linkedChartViews: get(props, "linkedChartViews", {}),
             }}
         >
-            <DocumentContext.Provider value={{ isPreviewing }}>
+            <DocumentContext.Provider
+                value={{ isPreviewing, documentType: props.content.type }}
+            >
                 <AdminLinks />
                 {content}
             </DocumentContext.Provider>

diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
@@ -2,6 +2,7 @@ import { useCallback, useContext } from "react"
 import {
     generateSourceProps,
     ImageMetadata,
+    OwidGdocType,
     triggerDownloadFromBlob,
 } from "@ourworldindata/utils"
 import cx from "classnames"
@@ -84,11 +85,14 @@ export default function Image(props: {
         "image--has-outline": hasOutline,
     })
 
-    const isPreviewing = useContext(DocumentContext).isPreviewing
+    const { isPreviewing, documentType } = useContext(DocumentContext)
+    const preferSmallimage = documentType === OwidGdocType.DataInsight
     const isSmall = useMediaQuery(SMALL_BREAKPOINT_MEDIA_QUERY)
     const image = useImage(filename)
     const smallImage = useImage(smallFilename)
-    const activeImage = isSmall && smallImage ? smallImage : image
+    const activeImage =
+        // If we're in a data insight, we always want to use the small image
+        (isSmall || preferSmallimage) && smallImage ? smallImage : image
 
     const renderImageError = (name: string) => (
         <BlockErrorFallback

diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx
@@ -161,8 +161,10 @@ const DataInsightCard = memo(function DataInsightCard({
             {firstImageBlock && (
                 <Image
                     className="latest-data-insights__card-left"
-                    filename={firstImageBlock.filename}
-                    smallFilename={firstImageBlock.smallFilename}
+                    filename={
+                        firstImageBlock.smallFilename ||
+                        firstImageBlock.filename
+                    }
                     containerType="span-5"
                     shouldLightbox={false}
                 />

diff --git a/site/gdocs/pages/DataInsight.tsx b/site/gdocs/pages/DataInsight.tsx
@@ -109,7 +109,7 @@ export const DataInsightBody = (
             <div
                 id={props.anchor}
                 className={cx(
-                    "span-cols-8 col-start-4 span-md-cols-10 col-md-start-3 span-sm-cols-14 col-sm-start-1 data-insight-body",
+                    "span-cols-6 col-start-5 span-md-cols-8 col-md-start-4 span-sm-cols-14 col-sm-start-1 data-insight-body",
                     {
                         "data-insight-body--has-tags": !!props.tags?.length,
                     }
@@ -163,7 +163,7 @@ export const DataInsightPage = (
 
     return (
         <div className="grid grid-cols-12-full-width data-insight-page">
-            <div className="span-cols-8 col-start-4 span-md-cols-10 col-md-start-3 col-sm-start-2 span-sm-cols-12 data-insight-breadcrumbs">
+            <div className="span-cols-6 col-start-5 span-md-cols-8 col-md-start-4 col-sm-start-2 span-sm-cols-12 data-insight-breadcrumbs">
                 <a href="/data-insights">Daily Data Insights</a>
                 <FontAwesomeIcon icon={faChevronRight} />
                 <span>{props.content.title}</span>