fixing listing page hero images (#542)

* fixing asteroid watch index page * fixing heroImage field name on several templates * a few more field name fixes
nasa-jpl · Aug 14, 2024 · 5dc17d3 · 5dc17d3
1 parent 9620549
commit 5dc17d3
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 25 deletions.
diff --git a/packages/vue/src/components/BaseTimer/BaseTimer.vue b/packages/vue/src/components/BaseTimer/BaseTimer.vue
@@ -51,7 +51,7 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import dayjs, { Dayjs } from 'dayjs'
+import dayjs, { type Dayjs } from 'dayjs'
 import duration, { type Duration } from 'dayjs/plugin/duration'
 import minMax from 'dayjs/plugin/minMax'
 

diff --git a/packages/vue/src/components/HeroLarge/HeroLarge.stories.js b/packages/vue/src/components/HeroLarge/HeroLarge.stories.js
@@ -32,6 +32,26 @@ export const HeroLargeData = {
       url: 'https://picsum.photos/id/247/640/900'
     },
     alt: 'Robotics detail page hero image'
+  },
+  listingPageHeroImage: {
+    // beach
+    src: {
+      url: 'https://picsum.photos/id/973/1800/1200',
+      width: 1800,
+      height: 1200
+    },
+    // lake
+    srcSet:
+      'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+    // jungle
+    screenMd: {
+      url: 'https://picsum.photos/id/921/800/640'
+    },
+    // desert
+    screenSm: {
+      url: 'https://picsum.photos/id/247/640/900'
+    },
+    alt: 'Robotics detail page hero image'
   }
 }
 

diff --git a/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js b/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js
@@ -28,7 +28,7 @@ export const HomepageCarouselItemData = {
     externalLink: 'https://mars.nasa.gov',
     slideTitle: 'Creating Robots to go Where Humans Can’t',
     video: BaseVideoData,
-    image: {
+    listingPageHeroImage: {
       src: {
         url: 'https://picsum.photos/id/973/1800/1200',
         width: 1800,

diff --git a/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.vue b/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.vue
@@ -29,21 +29,21 @@
         />
       </video>
       <!-- change to v-if if image should load as fallback until video loads -->
-      <picture v-else-if="item.image && item.image.src">
+      <picture v-else-if="item.listingPageHeroImage && item.listingPageHeroImage.src">
         <source
           media="(min-width: 768px)"
-          :srcset="item.image.srcSet"
+          :srcset="item.listingPageHeroImage.srcSet"
         />
         <source
           media="(min-width: 420px)"
-          :srcset="item.image.screenMd?.url"
+          :srcset="item.listingPageHeroImage.screenMd?.url"
         />
-        <source :srcset="item.image.screenSm?.url" />
+        <source :srcset="item.listingPageHeroImage.screenSm?.url" />
         <img
           class="md:object-right object-cover object-bottom w-full h-full"
-          :src="item.image.src.url"
-          :width="item.image.src.width"
-          :height="item.image.src.height"
+          :src="item.listingPageHeroImage.src.url"
+          :width="item.listingPageHeroImage.src.width"
+          :height="item.listingPageHeroImage.src.height"
           alt=""
           loading="lazy"
           data-chromatic="ignore"
@@ -116,7 +116,7 @@ export interface Slide {
     fileOgg: string
     fileWebm: string
   }
-  image: Partial<ImageObject>
+  listingPageHeroImage: Partial<ImageObject>
 }
 
 export default defineComponent({

diff --git a/packages/vue/src/templates/PageVideoDetail/PageVideoDetail.stories.js b/packages/vue/src/templates/PageVideoDetail/PageVideoDetail.stories.js
@@ -17,7 +17,8 @@ export const BaseStory = {
   args: {
     data: {
       block: [],
-      body: 'How Earth satellites including the JPL-managed Topex/Poseidon are helping researchers track the movements and behaviors of sea lions and seals to keep them from extinction.',
+      videoDetailBody:
+        'How Earth satellites including the JPL-managed Topex/Poseidon are helping researchers track the movements and behaviors of sea lions and seals to keep them from extinction.',
       firstPublishedAt: '2001-12-03T08:00:00+00:00',
       id: '6723',
       label: 'Video',

diff --git a/packages/vue/src/templates/PageVideoDetail/PageVideoDetail.vue b/packages/vue/src/templates/PageVideoDetail/PageVideoDetail.vue
@@ -22,9 +22,9 @@
       :content="data.thumbnailImage.original"
     />
     <meta
-      v-if="data.summary || data.body"
+      v-if="data.summary || data.videoDetailBody"
       itemprop="description"
-      :content="data.summary || data.body"
+      :content="data.summary || data.videoDetailBody"
     />
     <div class="lg:container 3xl:px-0 lg:mt-12 px-5 mx-auto mt-5">
       <DetailHeadline
@@ -58,10 +58,10 @@
     <LayoutHelper indent="col-2">
       <div class="lg:grid grid-cols-10">
         <div
-          v-if="data.body"
+          v-if="data.videoDetailBody"
           class="col-span-7"
         >
-          <BlockText :text="data.body" />
+          <BlockText :text="data.videoDetailBody" />
           <hr class="border-gray-light-mid lg:my-8 my-5" />
           <div
             v-if="data.transcript"

diff --git a/packages/vue/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.stories.js b/packages/vue/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.stories.js
@@ -25,7 +25,28 @@ export const BaseStory = {
   name: 'PageAsteroidWatchIndex',
   args: {
     data: {
-      ...HeroLargeData,
+      description:
+        'Crawl, walk and even climb rock walls, this robot was designed to operate in extreme terrains.',
+      listingPageHeroImage: {
+        // beach
+        src: {
+          url: 'https://picsum.photos/id/973/1800/1200',
+          width: 1800,
+          height: 1200
+        },
+        // lake
+        srcSet:
+          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+        // jungle
+        screenMd: {
+          url: 'https://picsum.photos/id/921/800/640'
+        },
+        // desert
+        screenSm: {
+          url: 'https://picsum.photos/id/247/640/900'
+        },
+        alt: 'Robotics detail page hero image'
+      },
       title: 'Asteroid Watch',
       body: BlockStreamfieldData.body,
       latestAsteroidNews: BlockLinkCardCarouselData

diff --git a/packages/vue/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.vue b/packages/vue/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.vue
@@ -5,7 +5,7 @@
   >
     <HeroLarge
       :title="data.title"
-      :image="data.heroImage"
+      :image="data.listingPageHeroImage"
       has-overlay
     />
 

diff --git a/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.stories.js b/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.stories.js
@@ -39,7 +39,7 @@ export const BaseStory = {
       publicationDate: '2012-07-05T20:04:21+00:00',
       title: 'Milky Way',
       topicLabel: 'Stars and Galaxies',
-      description:
+      descriptionString:
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lorem non purus consequat rutrum. Nulla vel convallis urna, eu porta purus. In hendrerit odio id diam volutpat auctor. Curabitur imperdiet dolor ipsum, quis luctus quam hendrerit eu. Quisque gravida lacus velit, a tempor dolor facilisis interdum. Sed pharetra mi eget feugiat bibendum. Donec vel nisi non nisi ultrices pellentesque eget non massa. Proin hendrerit sodales auctor. Phasellus egestas tortor eget ullamcorper tempor. Cras quis mauris erat. Curabitur tempor quam eget tellus aliquam semper. Morbi fringilla sodales dapibus. Proin pellentesque turpis eu neque pretium, in sodales sem auctor.</p>'
     }
   }

diff --git a/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue b/packages/vue/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue
@@ -42,10 +42,10 @@
     >
       <div class="lg:grid grid-cols-10">
         <div
-          v-if="data.description"
+          v-if="data.descriptionString"
           class="col-span-7"
         >
-          <BlockText :text="data.description" />
+          <BlockText :text="data.descriptionString" />
         </div>
         <aside class="col-start-9 col-end-11">
           <div class="lg:pt-0 pt-8 mb-12">

diff --git a/packages/vue/src/templates/www/PagePodcastSeason/PagePodcastSeason.stories.js b/packages/vue/src/templates/www/PagePodcastSeason/PagePodcastSeason.stories.js
@@ -29,7 +29,7 @@ export const PagePodcastSeasonData = {
   summary:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in nibh mauris. Praesent vel tempus enim, a ultricies justo. Cras nec lorem quis lorem ullamcorper accumsan. Aliquam lacus tortor, vulputate sit amet purus vitae, accumsan maximus diam. Vivamus ac dui non sapien hendrerit elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
   featuredEpisode: HeroMediumData.feature,
-  heroImage: {
+  listingPageHeroImage: {
     // same dimensions used for HeroMedium
     src: {
       url: 'https://picsum.photos/id/247/1800/1200',

diff --git a/packages/vue/src/templates/www/PagePodcastSeason/PagePodcastSeason.vue b/packages/vue/src/templates/www/PagePodcastSeason/PagePodcastSeason.vue
@@ -10,7 +10,7 @@
         v-if="data.featuredEpisode"
         :custom-label="data.label"
         :feature="data.featuredEpisode"
-        :custom-image="data.heroImage"
+        :custom-image="data.listingPageHeroImage"
         cta="Listen Now"
       />
     </div>

diff --git a/packages/vue/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.vue b/packages/vue/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.vue
@@ -7,7 +7,7 @@
       eyebrow="Robotics at JPL"
       :title="data.title"
       :summary="data.description"
-      :image="data.heroImage"
+      :image="data.listingPageHeroImage"
     />
     <RoboticsDetailStats
       :mass="data.mass"

diff --git a/packages/vue/src/templates/www/PageTopicDetail/PageTopicDetail.stories.js b/packages/vue/src/templates/www/PageTopicDetail/PageTopicDetail.stories.js
@@ -32,7 +32,7 @@ export const TopicDetailData = {
   parentDisplayTitle: 'Solar System Exploration at JPL',
   strapline:
     'Robotic orbiters, landers and mobile laboratories explore Mars and communicate with Earth via the Deep Space Network.',
-  heroImage: {
+  listingPageHeroImage: {
     src: {
       url: 'https://picsum.photos/1800/1200',
       width: 1800,

diff --git a/packages/vue/src/templates/www/PageTopicDetail/PageTopicDetail.vue b/packages/vue/src/templates/www/PageTopicDetail/PageTopicDetail.vue
@@ -9,7 +9,7 @@
         :eyebrow="data.parentDisplayTitle"
         :title="data.displayTitle"
         :summary="data.strapline"
-        :image="data.heroImage"
+        :image="data.listingPageHeroImage"
       />
       <TopicDetailMissionCarousel
         v-if="data.title || data.featuredMissions"