fix(Hero image): preload image link (#473)

quintype · Sep 13, 2024 · c6e619e · c6e619e
1 parent a601e61
commit c6e619e
Show file tree

Hide file tree

Showing 16 changed files with 6,429 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@quintype/amp",
-  "version": "2.19.1",
+  "version": "2.19.2-fix-img-preload.3",
   "description": "Quintype's AMP component library for publisher apps to create amp layouts",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/atoms/image/image.tsx b/src/atoms/image/image.tsx
@@ -5,6 +5,7 @@ import { withConfig } from "../../context";
 import { LightboxGallery } from "../lightbox-gallery";
 import { base64FallbackImage } from "../../helpers/image-helpers";
 import { Head } from "../index";
+import get from "lodash.get";
 
 export const BaseImage = ({
   metadata,
@@ -16,6 +17,7 @@ export const BaseImage = ({
   lightbox = true,
   story,
   useFallbackImage = false,
+  disableImgPreload = false,
   ...rest
 }: ImageTypes) => {
   const cdnImage = config.publisherConfig["cdn-image"];
@@ -42,20 +44,35 @@ export const BaseImage = ({
     imgAttrs.alt = "fallback image";
   }
   if (!imgAttrs.src) return null;
-
   imgAttrs.layout = "responsive";
   imgAttrs.width = imgAspectRatio[0];
   imgAttrs.height = imgAspectRatio[1];
 
+  const isHeroImage: boolean = get(imgAttrs, ["data-hero"], "false") === "true";
+  const imgSrcSet = get(imgAttrs, ["srcset"]);
+  const imgSrcSetUrl = imgSrcSet?.split(" ")?.[0];
+  const imgSrc = imgSrcSetUrl || get(imgAttrs, ["src"]);
+
   return (
     <Fragment>
-      <Head>
-        <style>{`
+      {isHeroImage && !disableImgPreload && imgSrc ? (
+        <Head>
+          <link rel="preload" as="image" href={imgSrc} fetchPriority="high" />
+          <style>{`
+        .hero-image img{
+          object-fit: contain;
+        }
+      `}</style>
+        </Head>
+      ) : (
+        <Head>
+          <style>{`
           .hero-image img{
             object-fit: contain;
           }
         `}</style>
-      </Head>
+        </Head>
+      )}
       {lightbox ? (
         <Fragment>
           <LightboxGallery />

diff --git a/src/atoms/image/types.ts b/src/atoms/image/types.ts
@@ -12,6 +12,7 @@ export interface ImageTypes extends Common {
   lightbox?: string | boolean;
   useFallbackImage?: boolean;
   story?: Story;
+  disableImgPreload?: boolean;
 }
 
 interface ImageMetadata {

diff --git a/src/helpers/image-helpers/image-helpers.ts b/src/helpers/image-helpers/image-helpers.ts
@@ -6,14 +6,9 @@ export const getImgSrcAndSrcset = ({ opts, slug, metadata, aspectRatio, cdnImage
   const imgOpts = isGumlet ? { format: "auto", ...opts } : opts;
   const src = focusedImagePath({ opts: imgOpts, slug, metadata, aspectRatio, cdnImage });
   let srcset = "";
-  const srcsetOpts = [{ ...imgOpts, w: 640 }];
-  srcsetOpts.forEach((val, i) => {
-    if (i === srcsetOpts.length - 1) {
-      srcset += `${focusedImagePath({ opts: val, slug, metadata, aspectRatio, cdnImage })} ${val.w}w`;
-    } else {
-      srcset += `${focusedImagePath({ opts: val, slug, metadata, aspectRatio, cdnImage })} ${val.w}w, `;
-    }
-  });
+  const srcsetOpt = { ...imgOpts, w: 640 };
+  srcset += `${focusedImagePath({ opts: srcsetOpt, slug, metadata, aspectRatio, cdnImage })} ${srcsetOpt.w}w`;
+
   return { src, srcset };
 };
 

diff --git a/src/molecules/date/updated/__snapshots__/date-updated.test.tsx.snap b/src/molecules/date/updated/__snapshots__/date-updated.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DateUpdated should match snapshot 1`] = `
 <Component
-  formattedDate="about 4 years ago"
+  formattedDate="over 4 years ago"
   prepend="Story Updated:"
 />
 `;
diff --git a/src/molecules/header-card/header-card.tsx b/src/molecules/header-card/header-card.tsx
@@ -43,7 +43,7 @@ export const DefaultHeaderCard = ({ story, config, storyType }: HeaderCardProps)
 
   return (
     <div>
-      <HeroImage />
+      <HeroImage config={config} />
       <Spacer token="xs" />
       <HeaderCardContainer>
         <Section section={story.sections[0]} />

diff --git a/src/molecules/hero-image/hero-image.tsx b/src/molecules/hero-image/hero-image.tsx
@@ -27,20 +27,25 @@ const StyledFigcaption = styled.div`
   text-align: left;
   padding-top: 8px;
 `;
-export const HeroImageBase = ({ story }: HeroImageBaseTypes) => {
+export const HeroImageBase = ({ story, config }: HeroImageBaseTypes) => {
   const metadata: HeroImageMetadata = get(story, "hero-image-metadata", null);
   const slug: string | null = get(story, "hero-image-s3-key", null);
   if (!slug || !metadata) return null;
 
   const attribution: string | null = get(story, "hero-image-attribution", null);
   const caption: string | null = get(story, "hero-image-caption", null);
   const altText: string | null = get(story, "hero-image-alt-text", null);
-
+  const disableImgPreload: boolean = get(config, ["opts", "optimizeAmpHtml"], true);
 
   return (
     <>
       <StyledDiv>
-        <Image data-hero="true" metadata={metadata} slug={slug} alt={altText || caption || attribution || ""}></Image>
+        <Image
+          data-hero={"true"}
+          metadata={metadata}
+          slug={slug}
+          alt={altText || caption || attribution || ""}
+          disableImgPreload={disableImgPreload}></Image>
       </StyledDiv>
       <StyledFigcaption>
         {caption && <StyledCaption dangerouslySetInnerHTML={{ __html: `${caption}` + "&nbsp;" }} />}

diff --git a/src/molecules/hero-image/types.ts b/src/molecules/hero-image/types.ts
@@ -1,4 +1,6 @@
+import { Config } from "../../types/config";
 import { Story } from "../../types/story";
 export interface HeroImageBaseTypes {
   story: Story;
+  config?: Config;
 }
diff --git a/src/molecules/related-story-card/__snapshots__/related-story-card.test.tsx.snap b/src/molecules/related-story-card/__snapshots__/related-story-card.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`RelatedStoryCard should render default 1`] = `
   >
     <Component
       alt="image"
+      disableImgPreload={true}
       metadata={null}
       slug={null}
       useFallbackImage={true}

diff --git a/src/molecules/related-story-card/related-story-card.tsx b/src/molecules/related-story-card/related-story-card.tsx
@@ -61,11 +61,17 @@ export const RelatedStoryCard = ({ story, config }: RelatedStoryCardTypes) => {
       });
     }
   }
-
+  const disableImgPreload: boolean = get(config, ["opts", "optimizeAmpHtml"], true);
   return (
     <Wrapper>
       <StyledAnchor href={url}>
-        <Image metadata={imgMetadata} slug={imgS3Key} alt={imgAltText || imgCaption || imgAttr || "image"} useFallbackImage={true} />
+        <Image
+          metadata={imgMetadata}
+          slug={imgS3Key}
+          alt={imgAltText || imgCaption || imgAttr || "image"}
+          useFallbackImage={true}
+          disableImgPreload={disableImgPreload}
+        />
         <Headline>{headline}</Headline>
         <DateTime formattedDate={humanizedDate} />
         <Spacer token="s" />