Added attributes width and height for images if a dimensions are …

…returned by the API
68publishers · Apr 4, 2024 · c8d78f9 · c8d78f9
1 parent d1eb427
commit c8d78f9
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `embed` mode for banners rendering. Embed banners are rendered in iframes and can be enabled via data attribute `data-amp-mode="embed"`.
 - Added a new JS client for use in iframes. It is not intended for direct use on a website.
 - Added the property `AMPClientFactory.version` that returns the package version in semver format.
+- Added attributes `width` and `height` for images if a dimensions are returned by the API.
 
 ### Changed
 - The package has been refactored from CommonJS to ESM.

diff --git a/src/banner/embed/embed-banner.mjs b/src/banner/embed/embed-banner.mjs
@@ -18,7 +18,7 @@ export class EmbedBanner extends Banner {
     }
 
     updatePositionData(data) {
-        const props = ['id', 'name', 'rotationSeconds', 'displayType', 'breakpointType'];
+        const props = ['id', 'name', 'rotationSeconds', 'displayType', 'breakpointType', 'dimensions'];
         const positionData = this.positionData;
 
         for (let prop of props) {

diff --git a/src/banner/managed/managed-banner.mjs b/src/banner/managed/managed-banner.mjs
@@ -160,6 +160,7 @@ export class ManagedBanner extends Banner {
             rotationSeconds: responseData['rotation_seconds'],
             displayType: responseData['display_type'],
             breakpointType: responseData['breakpoint_type'],
+            dimensions: responseData['dimensions'] || { width: null, height: null },
         });
 
         const banners = [];

diff --git a/src/banner/position-data.mjs b/src/banner/position-data.mjs
@@ -6,14 +6,19 @@ export class PositionData {
      * @param {int} rotationSeconds
      * @param {string|null} displayType
      * @param {string|null} breakpointType
+     * @param {{width: int|null, height: int|null}} dimensions
      */
-    constructor({ id, code, name, rotationSeconds, displayType, breakpointType }) {
+    constructor({ id, code, name, rotationSeconds, displayType, breakpointType, dimensions }) {
         this.id = id;
         this.code = code;
         this.name = name;
         this.rotationSeconds = rotationSeconds;
         this.displayType = displayType;
         this.breakpointType = breakpointType;
+        this.dimensions = {
+            width: dimensions.width || null,
+            height: dimensions.height || null,
+        }
     }
 
     static createInitial(code) {
@@ -24,6 +29,10 @@ export class PositionData {
             rotationSeconds: 0,
             displayType: null,
             breakpointType: null,
+            dimensions: {
+                width: null,
+                height: null,
+            },
         });
     }
 
@@ -47,6 +56,7 @@ export class PositionData {
             rotationSeconds: this.rotationSeconds,
             displayType: this.displayType,
             breakpointType: this.breakpointType,
+            dimensions: this.dimensions,
         }
     }
 }
diff --git a/src/template/multiple.mjs b/src/template/multiple.mjs
@@ -23,6 +23,8 @@ export default `
                                      src="<%= b.content.src %>"
                                      sizes="<%- b.content.sizes %>"
                                      alt="<%- b.content.alt %>"
+                                     <% if(null !== banner.positionData.dimensions.width) { %>width="<%- banner.positionData.dimensions.width %>"<% } %>
+                                     <% if(null !== banner.positionData.dimensions.height) { %>height="<%- banner.positionData.dimensions.height %>"<% } %>
                                      <% if('' !== b.content.title) { %>title="<%- b.content.title %>"<% } %>
                                      <% if(banner.options.has('loading') && index >= parseInt(banner.options.get('loading-offset', 0))) { %>loading="<%- banner.options.get('loading') %>"<% } %>>
                             </picture>

diff --git a/src/template/random.mjs b/src/template/random.mjs
@@ -20,6 +20,8 @@ export default `
                          src="<%= data.content.src %>"
                          sizes="<%- data.content.sizes %>"
                          alt="<%- data.content.alt %>"
+                         <% if(null !== banner.positionData.dimensions.width) { %>width="<%- banner.positionData.dimensions.width %>"<% } %>
+                         <% if(null !== banner.positionData.dimensions.height) { %>height="<%- banner.positionData.dimensions.height %>"<% } %>
                          <% if('' !== data.content.title) { %>title="<%- data.content.title %>"<% } %>
                          <% if(banner.options.has('loading')) { %>loading="<%- banner.options.get('loading') %>"<% } %>>
                 </picture>

diff --git a/src/template/single.mjs b/src/template/single.mjs
@@ -20,6 +20,8 @@ export default `
                          src="<%= data.content.src %>"
                          sizes="<%- data.content.sizes %>"
                          alt="<%- data.content.alt %>"
+                         <% if(null !== banner.positionData.dimensions.width) { %>width="<%- banner.positionData.dimensions.width %>"<% } %>
+                         <% if(null !== banner.positionData.dimensions.height) { %>height="<%- banner.positionData.dimensions.height %>"<% } %>
                          <% if('' !== data.content.title) { %>title="<%- data.content.title %>"<% } %>
                          <% if(banner.options.has('loading')) { %>loading="<%- banner.options.get('loading') %>"<% } %>>
                 </picture>