Merge pull request #931 from Shinsina/explicit-image-sizing

Allow for explicit image sizing on Native-X promo cards and newsletter signups
parameter1 · Jul 12, 2024 · 06e109d · 06e109d
2 parents b801a99 + bfa02c1
commit 06e109d
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 4 deletions.
diff --git a/packages/marko-web-theme-monorail/browser/idx-newsletter-form/inline.vue b/packages/marko-web-theme-monorail/browser/idx-newsletter-form/inline.vue
@@ -3,7 +3,13 @@
     <div ref="lazyload" class="lazyload" />
     <div :class="bem()">
       <div v-if="imageSrc" :class="bem('left-col')">
-        <img :src="imageSrc" :srcset="imageSrcset" :alt="name">
+        <img
+          :src="imageSrc"
+          :srcset="imageSrcset"
+          :alt="name"
+          :width="imageWidth"
+          :height="imageHeight"
+        >
       </div>
       <div :class="bem('right-col')">
         <div v-if="!submitted" :class="bem('name')">
@@ -95,6 +101,14 @@ export default {
       type: String,
       default: null,
     },
+    imageWidth: {
+      type: String,
+      default: '',
+    },
+    imageHeight: {
+      type: String,
+      default: '',
+    },
     lang: {
       type: String,
       default: 'en',

diff --git a/packages/marko-web-theme-monorail/browser/idx-newsletter-form/pushdown.vue b/packages/marko-web-theme-monorail/browser/idx-newsletter-form/pushdown.vue
@@ -9,6 +9,8 @@
             :srcset="imageSrcset"
             :alt="name"
             :class="element('image')"
+            :width="imageWidth"
+            :height="imageHeight"
           >
         </div>
         <div :class="element('form-wrapper', ['col-12', 'col-md-6', 'col-lg-7'])">
@@ -91,6 +93,14 @@ export default {
       type: String,
       default: null,
     },
+    imageWidth: {
+      type: String,
+      default: '',
+    },
+    imageHeight: {
+      type: String,
+      default: '',
+    },
     initiallyExpanded: {
       type: Boolean,
       default: false,

diff --git a/packages/marko-web-theme-monorail/components/blocks/native-x-promo-card.marko b/packages/marko-web-theme-monorail/components/blocks/native-x-promo-card.marko
@@ -15,12 +15,20 @@ $ const placement = nxConfig.getPlacement({ name: placementName, aliases });
       <marko-web-element block-name=blockName name="row">
         <marko-web-element block-name=blockName name="col">
           <if(ads[0] && ads[0].hasCampaign)>
-            <theme-standard-promo-node ...convertAdToNode(ads[0]) />
+            <theme-standard-promo-node
+              ...convertAdToNode(ads[0])
+              image-width=input.imageWidth
+              image-height=input.imageHeight
+            />
           </if>
         </marko-web-element>
         <marko-web-element block-name=blockName name="col" modifiers=["last"]>
           <if(ads[1] && ads[1].hasCampaign)>
-            <theme-standard-promo-node ...convertAdToNode(ads[1]) />
+            <theme-standard-promo-node
+              ...convertAdToNode(ads[1])
+              image-width=input.imageWidth
+              image-height=input.imageHeight
+            />
           </if>
         </marko-web-element>
       </marko-web-element>

diff --git a/packages/marko-web-theme-monorail/components/identity-x/newsletter-pushdown.marko b/packages/marko-web-theme-monorail/components/identity-x/newsletter-pushdown.marko
@@ -38,6 +38,8 @@ $ const imageSrcset = imageSrc ? `${imageSrc}&dpr=2 2x` : null;
           disabled,
           imageSrc,
           imageSrcset,
+          imageWidth: input.imageWidth,
+          imageHeight: input.imageHeight,
           initiallyExpanded,
           lang,
           additionalEventData,

diff --git a/packages/marko-web-theme-monorail/components/nodes/standard-promo.marko b/packages/marko-web-theme-monorail/components/nodes/standard-promo.marko
@@ -1,7 +1,7 @@
 import { get } from "@parameter1/base-cms-object-path";
 import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
 
-$ const { node } = input;
+$ const { node, imageWidth, imageHeight } = input;
 
 $ const linkText = get(node, "linkText") || defaultValue(input.linkText, "Read More");
 $ const blockName = defaultValue(input.blockName, "pib-page-card");
@@ -31,6 +31,7 @@ $ const blockName = defaultValue(input.blockName, "pib-page-card");
         src=node.primaryImage.src
         srcset=[`${node.primaryImage.src}&dpr=2 2x`]
         alt=node.primaryImage.alt
+        attrs={ width: imageWidth, height: imageHeight }
       />
     </if>
   </marko-web-element>

diff --git a/packages/marko-web-theme-monorail/utils/site-idx-newsletter-menu-props.js b/packages/marko-web-theme-monorail/utils/site-idx-newsletter-menu-props.js
@@ -33,6 +33,8 @@ module.exports = ({ out, input }) => {
   return {
     ...((withImage && imageSrc) && { imageSrc }),
     ...((withImage && imageSrcset) && { imageSrcset }),
+    imageWidth: defaultValue(input.imageWidth, ''),
+    imageHeight: defaultValue(input.imageHeight, ''),
     siteName: config.website('name'),
     name,
     description,