[F] Event, News, & Related list items have optional featuredImage

- Uses `featuredImage` first, `hero` if no `featuredImage`, placeholder image as fallback
lsst-epo · Mar 6, 2024 · 8c9ba24 · 8c9ba24
1 parent 6963895
commit 8c9ba24
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 22 deletions.
diff --git a/components/dynamic/EventList/index.js b/components/dynamic/EventList/index.js
@@ -42,6 +42,7 @@ const EventList = ({
                   endDate,
                   description,
                   id,
+                  hero,
                   image,
                   eventType,
                   registrationCloseDate,
@@ -82,7 +83,7 @@ const EventList = ({
                             }
                           : null
                       }
-                      image={image?.[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
@@ -51,6 +51,7 @@ const NewsList = ({
                     description,
                     subtitle,
                     id,
+                    hero,
                     image,
                     images: releaseImages,
                     newsAssets,
@@ -70,7 +71,11 @@ const NewsList = ({
                           }
                         : null
                     }
-                    image={image?.[0] || makeReleaseFeature(releaseImages)?.[0]}
+                    image={
+                      image?.[0] ||
+                      makeReleaseFeature(releaseImages)?.[0] ||
+                      hero?.[0]
+                    }
                     isFeature={canShowFeatured && page === 1 && i === 0}
                     link={uri}
                     pretitle={

diff --git a/components/dynamic/RelatedList/index.js b/components/dynamic/RelatedList/index.js
@@ -30,17 +30,19 @@ const RelatedList = ({
         <>
           {entries?.length > 0 && (
             <Grid columns={cols}>
-              {entries.map(({ id, description, image, title, uri }, i) => (
-                <Tile
-                  key={id}
-                  image={image?.[0]}
-                  link={uri}
-                  text={striptags(description)}
-                  title={title}
-                  titleTag={"h2"}
-                  type={gridType}
-                />
-              ))}
+              {entries.map(
+                ({ id, description, hero, image, title, uri }, i) => (
+                  <Tile
+                    key={id}
+                    image={image?.[0] || hero?.[0]}
+                    link={uri}
+                    text={striptags(description)}
+                    title={title}
+                    titleTag={"h2"}
+                    type={gridType}
+                  />
+                )
+              )}
             </Grid>
           )}
         </>

diff --git a/lib/api/fragments/content-blocks.js b/lib/api/fragments/content-blocks.js
@@ -342,6 +342,11 @@ export const relatedContentFragment = `
             uri
             ... on pages_pages_Entry {
               description
+              hero {
+                ...on heroes_Asset {
+                  ${getImageFields("crop", 900, 550)}
+                }
+              }
               image: featuredImage {
                 ...on contentImages_Asset {
                   ${getImageFields("crop", 900, 550)}
@@ -350,11 +355,16 @@ export const relatedContentFragment = `
             }
             ...on news_post_Entry {
               description: teaser
-              image: hero {
+              hero {
                 ...on heroes_Asset {
                   ${getImageFields("crop", 900, 550)}
                 }
               }
+              image: featuredImage {
+                ...on contentImages_Asset {
+                  ${getImageFields("crop", 900, 550)}
+                }
+              }
             }
             ...on investigations_investigation_Entry {
               uri
@@ -711,8 +721,8 @@ export const relatedContentNewsFragment = `
             ...on news_post_Entry {
               date
               description: teaser
-              image: hero {
-                ...on heroes_Asset {
+              image: featuredImage {
+                ...on contentImages_Asset {
                   ${getImageFields("crop", 900, 550)}
                 }
               }

diff --git a/lib/api/fragments/event.js b/lib/api/fragments/event.js
@@ -14,11 +14,16 @@ export const eventFragment = `
       startDate
       endDate: date
       description
-      image: hero {
+      hero {
         ...on heroes_Asset {
           ${getImageFields("crop", 400, 400)}
         }
       }
+      image: featuredImage {
+        ...on contentImages_Asset {
+          ${getImageFields("crop", 400, 400)}
+        }
+      }
       eventType {
         id
         title
@@ -48,8 +53,8 @@ export const eventFragmentFull = `
           ${getImageFields("crop", 1920, 1067)}
         }
       } 
-      featuredImage: hero {
-        ...on heroes_Asset {
+      featuredImage {
+        ...on contentImages_Asset {
           ${getImageFields("crop", 800, 800)}
         }
       }

diff --git a/lib/api/fragments/news-post.js b/lib/api/fragments/news-post.js
@@ -11,11 +11,16 @@ export const newsPostFragment = `
       dateCreated
       description: teaser
       pressReleaseId
-      image: hero {
+      hero {
         ...on heroes_Asset {
           ${getImageFields("crop", 900, 550)}
         }
       }
+      image: featuredImage {
+        ...on contentImages_Asset {
+          ${getImageFields("crop", 900, 550)}
+        }
+      }
       postType {
         id
         title
@@ -58,8 +63,8 @@ export const newsPostFragmentFull = `
         }
       }
       heroCaption: captionRichText 
-      featuredImage: hero {
-        ...on heroes_Asset {
+      featuredImage {
+        ...on contentImages_Asset {
           ${getImageFields("crop", 800, 800)}
         }
       }