Updates

HeroImage.html

@@ -225,7 +225,7 @@ <h4 class="name" id="HeroImage">
         <p class="tag-source">
             <a href="molecules_hero-image_hero-image.tsx.html" class="button">View Source</a>
             <span>
-                <a href="molecules_hero-image_hero-image.tsx.html">molecules/hero-image/hero-image.tsx</a>, <a href="molecules_hero-image_hero-image.tsx.html#line48">line 48</a>
+                <a href="molecules_hero-image_hero-image.tsx.html">molecules/hero-image/hero-image.tsx</a>, <a href="molecules_hero-image_hero-image.tsx.html#line49">line 49</a>
             </span>
         </p>
 

Image.html

@@ -469,7 +469,7 @@ <h5>Parameters:</h5>
         <p class="tag-source">
             <a href="atoms_image_image.tsx.html" class="button">View Source</a>
             <span>
-                <a href="atoms_image_image.tsx.html">atoms/image/image.tsx</a>, <a href="atoms_image_image.tsx.html#line64">line 64</a>
+                <a href="atoms_image_image.tsx.html">atoms/image/image.tsx</a>, <a href="atoms_image_image.tsx.html#line75">line 75</a>
             </span>
         </p>
 

atoms_image_image.tsx.html

@@ -144,6 +144,7 @@ <h1>atoms/image/image.tsx</h1>
 import { LightboxGallery } from "../lightbox-gallery";
 import { base64FallbackImage } from "../../helpers/image-helpers";
 import { Head } from "../index";
+import get from "lodash.get";
 
 export const BaseImage = ({
   metadata,
@@ -155,6 +156,7 @@ <h1>atoms/image/image.tsx</h1>
   lightbox = true,
   story,
   useFallbackImage = false,
+  disableImgPreload = false,
   ...rest
 }: ImageTypes) => {
   const cdnImage = config.publisherConfig["cdn-image"];
@@ -181,20 +183,35 @@ <h1>atoms/image/image.tsx</h1>
     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 (
     &lt;Fragment>
-      &lt;Head>
-        &lt;style>{`
+      {isHeroImage &amp;&amp; !disableImgPreload &amp;&amp; imgSrc ? (
+        &lt;Head>
+          &lt;link rel="preload" as="image" href={imgSrc} fetchPriority="high" />
+          &lt;style>{`
+        .hero-image img{
+          object-fit: contain;
+        }
+      `}&lt;/style>
+        &lt;/Head>
+      ) : (
+        &lt;Head>
+          &lt;style>{`
           .hero-image img{
             object-fit: contain;
           }
         `}&lt;/style>
-      &lt;/Head>
+        &lt;/Head>
+      )}
       {lightbox ? (
         &lt;Fragment>
           &lt;LightboxGallery />

molecules_header-card_header-card.tsx.html

@@ -182,7 +182,7 @@ <h1>molecules/header-card/header-card.tsx</h1>
 
   return (
     &lt;div>
-      &lt;HeroImage />
+      &lt;HeroImage config={config} />
       &lt;Spacer token="xs" />
       &lt;HeaderCardContainer>
         &lt;Section section={story.sections[0]} />

molecules_hero-image_hero-image.tsx.html

@@ -166,20 +166,25 @@ <h1>molecules/hero-image/hero-image.tsx</h1>
   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 (
     &lt;>
       &lt;StyledDiv>
-        &lt;Image data-hero="true" metadata={metadata} slug={slug} alt={altText || caption || attribution || ""}>&lt;/Image>
+        &lt;Image
+          data-hero={"true"}
+          metadata={metadata}
+          slug={slug}
+          alt={altText || caption || attribution || ""}
+          disableImgPreload={disableImgPreload}>&lt;/Image>
       &lt;/StyledDiv>
       &lt;StyledFigcaption>
         {caption &amp;&amp; &lt;StyledCaption dangerouslySetInnerHTML={{ __html: `${caption}` + "&amp;nbsp;" }} />}

templates_generic-story_generic-story.tsx.html

@@ -219,7 +219,7 @@ <h1>templates/generic-story/generic-story.tsx</h1>
         &lt;TopSlot />
         &lt;Spacer token="s" />
         &lt;StoryContainer>
-          &lt;HeaderCard storyType="text" />
+          &lt;HeaderCard storyType="text" config={config} />
           &lt;WebEngage />
           &lt;Spacer token="m" />
           &lt;StoryCards />

templates_live-blog_live-blog.tsx.html

@@ -215,7 +215,7 @@ <h1>templates/live-blog/live-blog.tsx</h1>
         &lt;TopSlot />
         &lt;Spacer token="s" />
         &lt;StoryContainer>
-          &lt;HeaderCard storyType="live-blog" />
+          &lt;HeaderCard storyType="live-blog" config={config} />
           &lt;WebEngage />
           &lt;Spacer token="m" />
           &lt;LiveList>