refactor: use hero for all opengraph and search images

lsst-epo · Sep 19, 2024 · a34e564 · a34e564
1 parent 89532d5
commit a34e564
Show file tree

Hide file tree

Showing 26 changed files with 119 additions and 107 deletions.
diff --git a/components/content-blocks/Callout/CalloutEntry/index.js b/components/content-blocks/Callout/CalloutEntry/index.js
@@ -50,7 +50,7 @@ export default function CalloutEntry({ callout }) {
     description,
     subtitle,
     hero,
-    image: featureImage,
+    image,
     images: releaseImages,
     entryType,
   } = entryWithRelease || entry[0];
@@ -63,8 +63,8 @@ export default function CalloutEntry({ callout }) {
     lang
   );
   const calloutImage =
-    featureImage?.[0] ||
-    makeReleaseFeature(releaseImages, "thumb700x")?.[0] ||
+    image?.[0] ||
+    makeReleaseFeature(releaseImages, "screen640")?.[0] ||
     hero?.[0];
 
   return (

diff --git a/components/content-blocks/GridBlock/CarouselGrid/index.js b/components/content-blocks/GridBlock/CarouselGrid/index.js
@@ -43,7 +43,7 @@ function CarouselGrid({
         title,
         description,
         plainText,
-        image: featureImage,
+        image,
         hero,
         images: releaseImages,
         mixedLink,
@@ -54,8 +54,8 @@ function CarouselGrid({
         <Tile
           key={id}
           image={
-            featureImage?.[0] ||
-            makeReleaseFeature(releaseImages, "thumb700x")?.[0] ||
+            image?.[0] ||
+            makeReleaseFeature(releaseImages, "screen640")?.[0] ||
             hero?.[0]
           }
           link={

diff --git a/components/content-blocks/GridBlock/NewsGrid.js b/components/content-blocks/GridBlock/NewsGrid.js
@@ -46,7 +46,7 @@ const NewsGrid = ({ items = [], limit, listTypeId, sectionHandle, pageId }) => {
                 description,
                 subtitle,
                 id,
-                image: featureImage,
+                image,
                 hero,
                 images: releaseImages,
                 newsAssets,
@@ -63,8 +63,8 @@ const NewsGrid = ({ items = [], limit, listTypeId, sectionHandle, pageId }) => {
                   button: t("read-more"),
                 }}
                 image={
-                  featureImage?.[0] ||
-                  makeReleaseFeature(releaseImages, "thumb700x")?.[0] ||
+                  image?.[0] ||
+                  makeReleaseFeature(releaseImages, "screen640")?.[0] ||
                   hero?.[0]
                 }
                 isFeature={i === 0}

diff --git a/components/dynamic/EventList/index.js b/components/dynamic/EventList/index.js
@@ -44,7 +44,7 @@ const EventList = ({
                   description,
                   id,
                   hero,
-                  image: featureImage,
+                  image,
                   eventType,
                   registrationCloseDate,
                   registrationOpenDate,
@@ -83,7 +83,7 @@ const EventList = ({
                             }
                           : null
                       }
-                      image={featureImage?.[0] || hero?.[0]}
+                      image={image?.[0] || hero?.[0]}
                       link={uri}
                       pretitle={
                         gridType === "events" && eventType?.[0]?.title

diff --git a/components/dynamic/NewsList/index.js b/components/dynamic/NewsList/index.js
@@ -53,7 +53,7 @@ const NewsList = ({
                     subtitle,
                     id,
                     hero,
-                    image: featureImage,
+                    image,
                     images: releaseImages,
                     newsAssets,
                     postType,
@@ -73,7 +73,7 @@ const NewsList = ({
                         : null
                     }
                     image={
-                      featureImage?.[0] ||
+                      image?.[0] ||
                       makeReleaseFeature(releaseImages)?.[0] ||
                       hero?.[0]
                     }

diff --git a/components/dynamic/RelatedList/index.js b/components/dynamic/RelatedList/index.js
@@ -37,7 +37,7 @@ const RelatedList = ({
                     id,
                     description,
                     hero,
-                    image: featureImage,
+                    image,
                     images: releaseImages,
                     title,
                     uri,
@@ -47,8 +47,8 @@ const RelatedList = ({
                   <Tile
                     key={id}
                     image={
-                      featureImage?.[0] ||
-                      makeReleaseFeature(releaseImages, "thumb700x")?.[0] ||
+                      image?.[0] ||
+                      makeReleaseFeature(releaseImages, "screen640")?.[0] ||
                       hero?.[0]
                     }
                     link={uri}

diff --git a/components/global/Body/index.js b/components/global/Body/index.js
@@ -6,7 +6,7 @@ import Header from "@/global/Header";
 import Footer from "@/global/Footer";
 import imageShape from "@/shapes/image";
 
-export default function Body({ children, description, featuredImage, title }) {
+export default function Body({ children, description, openGraphImage, title }) {
   return (
     <GlobalDataContext.Consumer>
       {({
@@ -29,12 +29,7 @@ export default function Body({ children, description, featuredImage, title }) {
 
         return (
           <>
-            <HtmlHead
-              title={title}
-              description={description}
-              featuredImage={featuredImage}
-              siteInfo={siteInfo}
-            />
+            <HtmlHead {...{ title, description, openGraphImage, siteInfo }} />
             <WideWidthContainer>
               <Header
                 navItems={headerNavItems}
@@ -65,6 +60,6 @@ Body.displayName = "Global.Body";
 Body.propTypes = {
   children: PropTypes.node,
   description: PropTypes.string,
-  featuredImage: PropTypes.arrayOf(imageShape),
+  openGraphImage: PropTypes.arrayOf(imageShape),
   title: PropTypes.string.isRequired,
 };
diff --git a/components/global/HtmlHead/index.js b/components/global/HtmlHead/index.js
@@ -7,11 +7,11 @@ import imageShape from "@/shapes/image";
 export default function HtmlHead({
   title,
   description,
-  featuredImage,
+  openGraphImage,
   siteInfo: { siteTitle, siteDescription, siteImage },
   children,
 }) {
-  const image = featuredImage?.[0] ? featuredImage[0] : siteImage?.[0];
+  const image = openGraphImage?.[0] ? openGraphImage[0] : siteImage?.[0];
   return (
     <Head>
       <title>{`${title} | ${siteTitle}`}</title>
@@ -104,6 +104,6 @@ HtmlHead.propTypes = {
   siteInfo: siteInfoShape,
   title: PropTypes.string,
   description: PropTypes.string,
-  featuredImage: PropTypes.arrayOf(imageShape),
+  openGraphImage: PropTypes.arrayOf(imageShape),
   children: PropTypes.node,
 };
diff --git a/components/templates/EventPage/index.js b/components/templates/EventPage/index.js
@@ -28,7 +28,7 @@ export default function EventPage({
     endTime,
     description,
     eventType = [],
-    featuredImage = [],
+    openGraphImage = [],
     hero = [],
     focalPointX,
     focalPointY,
@@ -45,7 +45,7 @@ export default function EventPage({
   const rootHomeLink = customBreadcrumbs.slice(-1)[0];
   const bodyProps = {
     description,
-    featuredImage,
+    openGraphImage,
     title,
   };
   const pageLink = {

diff --git a/components/templates/GalleryPage/index.js b/components/templates/GalleryPage/index.js
@@ -26,7 +26,7 @@ export default function GalleryPage({
       assetVariants,
       credit,
       customDateCreated,
-      featuredImage,
+      openGraphImage,
       galleryItemCategory,
       galleryItemTags,
       id,
@@ -53,7 +53,7 @@ export default function GalleryPage({
   const { t } = useTranslation();
   const bodyProps = {
     description: striptags(richTextDescription),
-    featuredImage,
+    openGraphImage,
     title,
   };
 
@@ -84,7 +84,7 @@ export default function GalleryPage({
     title,
   };
 
-  const image = featuredImage[0];
+  const image = openGraphImage[0];
 
   // localized dates
   const localizedMetadataDate = useDateString(metadataDate);

diff --git a/components/templates/GlossaryPage/index.js b/components/templates/GlossaryPage/index.js
@@ -25,7 +25,7 @@ export default function GlossaryPage({ data }) {
 
   const bodyProps = {
     description,
-    featuredImage: image,
+    openGraphImage: image,
     title,
   };
 

diff --git a/components/templates/NewsPage/index.js b/components/templates/NewsPage/index.js
@@ -23,7 +23,6 @@ export default function NewsPage({ data }) {
     contentBlocksNews = [],
     description,
     headline,
-    featuredImage = [],
     hero = [],
     focalPointX,
     focalPointY,
@@ -33,13 +32,21 @@ export default function NewsPage({ data }) {
     postTags,
     title,
     uri,
+    openGraphImage,
     images: releaseImages,
     videos: releaseVideos,
   } = entryWithRelease || data;
+
+  const heroImage =
+    hero?.length > 0 ? hero : makeReleaseFeature(releaseImages, "banner1920");
+
   const { t } = useTranslation();
   const bodyProps = {
     description: description || headline,
-    featuredImage,
+    openGraphImage:
+      openGraphImage?.length > 0
+        ? openGraphImage
+        : makeReleaseFeature(releaseImages, "screen640"),
     title,
   };
   const customBreadcrumbs = useCustomBreadcrumbs("News");
@@ -92,11 +99,7 @@ export default function NewsPage({ data }) {
       <Breadcrumbs breadcrumbs={[...customBreadcrumbs, pageLink]} />
       <NewsHero
         caption={heroCaption}
-        data={
-          hero?.length > 0
-            ? hero
-            : makeReleaseFeature(releaseImages, "banner1920")
-        }
+        data={heroImage}
         narrowCaption={showAside}
         {...{ focalPointX, focalPointY }}
       />

diff --git a/components/templates/Page/index.js b/components/templates/Page/index.js
@@ -28,7 +28,6 @@ export default function Page({
     description,
     dynamicComponent,
     eventFilter = [],
-    featuredImage,
     hero,
     focalPointX,
     focalPointY,
@@ -42,6 +41,7 @@ export default function Page({
     subHeroHeader,
     subHeroText,
     subHeroColorScheme,
+    openGraphImage,
     parent,
     showGuideNav,
     showSidebar,
@@ -58,7 +58,7 @@ export default function Page({
   const { t } = useTranslation();
   const bodyProps = {
     description,
-    featuredImage,
+    openGraphImage,
     title,
   };
   const pageLink = {

diff --git a/components/templates/SlideshowPage/index.js b/components/templates/SlideshowPage/index.js
@@ -16,13 +16,13 @@ import { containerFull, respond } from "@/styles/globalStyles";
 
 export default function SlideshowPage({
   data: {
-    entry: { featuredImage, id, description, title, uri, items },
+    entry: { openGraphImage, id, description, title, uri, items },
   },
 }) {
   const { t } = useTranslation();
   const bodyProps = {
     description: striptags(description),
-    featuredImage,
+    openGraphImage,
     title,
   };
 
@@ -40,7 +40,7 @@ export default function SlideshowPage({
       id,
       title,
       description,
-      image: featuredImage,
+      image: openGraphImage,
     },
     ...items,
   ];

diff --git a/components/templates/StaffPage/index.js b/components/templates/StaffPage/index.js
@@ -26,7 +26,7 @@ function getParentEntry(rootPages) {
 
 export default function StaffPage({
   data: {
-    featuredImage = [],
+    openGraphImage = [],
     id,
     uri,
     title,
@@ -43,7 +43,7 @@ export default function StaffPage({
   const parentUri = getParentUri(uri);
   const parentEntry = getParentEntry(rootPages);
   const bodyProps = {
-    featuredImage,
+    openGraphImage,
     title,
   };
   const pageLink = {