fix metadata images

Author: dipamsen

src/templates/challenge.js

@@ -18,19 +18,21 @@ import PiCharacter from '../images/characters/PiGuy_2.mini.svg';
 import SemiColonCharacter from '../images/characters/SemiColon_2.mini.svg';
 
 const Challenge = ({ data }) => {
-  const { challenge, contributionPlaceholderImage, challengePlaceholderImage } =
+  const { challenge, coverImage, challengePlaceholderImage } =
     data;
+  // generic placeholder for challenge videos, collage of screenshots of challenge thumbnails
   const challengesPlaceholder = challengePlaceholderImage
     ? challengePlaceholderImage.childImageSharp.gatsbyImageData
     : null;
-  const contributionsPlaceholder = contributionPlaceholderImage
-    ? contributionPlaceholderImage.childImageSharp.gatsbyImageData
+  // cover image for the challenge, fallbacks to placeholder
+  const cover = coverImage
+    ? coverImage.childImageSharp.gatsbyImageData
     : challengesPlaceholder;
   return (
     <Layout
       title={challenge.title}
       description={challenge.description}
-      image={contributionsPlaceholder}>
+      image={cover}>
       <Breadcrumbs
         className={css.breadcrumbs}
         breadcrumbs={[
@@ -49,7 +51,7 @@ const Challenge = ({ data }) => {
           video={challenge}
           variant="cyan"
           url={`/challenges/${challenge.slug}`}
-          placeholderImage={contributionsPlaceholder}
+          placeholderImage={cover}
         />
       </main>
 
@@ -66,7 +68,8 @@ const Challenge = ({ data }) => {
 
       <PassengerShowcasePanel
         contributions={challenge.showcase}
-        placeholderImage={contributionsPlaceholder}
+        // fallback to challenge cover image if no showcase cover image exists
+        placeholderImage={cover}
         submitButtonState={{ track: 'challenges', video: challenge.slug }}
       />
 
@@ -190,7 +193,7 @@ export const query = graphql`
         }
       }
     }
-    contributionPlaceholderImage: file(
+    coverImage: file(
       sourceInstanceName: { eq: "challenges" }
       extension: { in: ["jpg", "png"] }
       relativeDirectory: { eq: $slug }

src/templates/guide.js

@@ -166,15 +166,20 @@ const useLocalImages = (images) => {
 };
 
 const Guide = ({ data, children }) => {
-  const { mdx, images } = data;
+  const { mdx, images, coverImage } = data;
 
   const localImages = useLocalImages(images.nodes);
 
+  // cover image for the guide, falls back to final placeholder image
+  const guideCover = coverImage
+    ? coverImage.childImageSharp.gatsbyImageData
+    : localImages['placeholder.png'];
+
   return (
     <Layout
       title={mdx.frontmatter.title}
       description={mdx.frontmatter.description}
-      image={localImages['placeholder.png']}>
+      image={guideCover}>
       <Breadcrumbs
         className={css.breadcrumbs}
         breadcrumbs={[
@@ -243,6 +248,15 @@ export const query = graphql`
         }
       }
     }
+    coverImage: file(
+      sourceInstanceName: { eq: "guides" }
+      extension: { in: ["jpg", "png"] }
+      name: { eq: $slug }
+    ) {
+      childImageSharp {
+        gatsbyImageData
+      }
+    }
   }
 `;
 

src/templates/track-video.js

@@ -23,29 +23,32 @@ const Track = ({ pageContext, data }) => {
   const {
     track,
     video,
-    contributionPlaceholderImage,
+    coverImage,
     videoPlaceHolderImage,
     challengePlaceholderImage
   } = data;
 
-  const contributionsPlaceholder = contributionPlaceholderImage
-    ? contributionPlaceholderImage.childImageSharp.gatsbyImageData
+  // cover image for the video, falls back to final placeholder image
+  // used as a placeholder for showcase
+  const contributionPlaceholder = coverImage
+    ? coverImage.childImageSharp.gatsbyImageData
     : videoPlaceHolderImage
     ? videoPlaceHolderImage.childImageSharp.gatsbyImageData
     : null;
 
+  // generic placeholder for challenge videos, collage of screenshots of challenge thumbnails
   const challengesPlaceholder =
     challengePlaceholderImage.childImageSharp.gatsbyImageData;
 
-  const { trackPosition, isTrackPage } = pageContext;
-
+  // cover image for the track, falls back to video cover image and then to final placeholder image
   const trackImage = track.cover
     ? track.cover.file.childImageSharp.gatsbyImageData
-    : contributionsPlaceholder;
+    : contributionPlaceholder;
 
-  const videoImage = video.cover
-    ? video.cover.file.childImageSharp.gatsbyImageData
-    : trackImage;
+  // cover image for the video, falls back to track cover image
+  const videoImage = contributionPlaceholder ? contributionPlaceholder : trackImage;
+
+  const { trackPosition, isTrackPage } = pageContext;
 
   return (
     <Layout
@@ -105,7 +108,7 @@ const Track = ({ pageContext, data }) => {
 
           <PassengerShowcasePanel
             contributions={video.showcase}
-            placeholderImage={contributionsPlaceholder}
+            placeholderImage={contributionPlaceholder}
             headerType={isTrackPage ? 'h3' : 'h2'}
             submitButtonState={{
               track: video.canonicalTrack?.slug ?? 'challenges',
@@ -294,7 +297,7 @@ export const query = graphql`
         }
       }
     }
-    contributionPlaceholderImage: file(
+    coverImage: file(
       sourceInstanceName: { eq: $source }
       extension: { in: ["jpg", "png"] }
       relativeDirectory: { eq: $videoSlug }