diff --git a/CHANGELOG.md b/CHANGELOG.md index 8836062..55e67d9 100644 --- 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 index a551ccd..0763d7d 100644 --- 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 index 676cfc5..94b706e 100644 --- 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 index d94df00..add0a8d 100644 --- 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 index f6f26e7..5882a8b 100644 --- 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') %>"<% } %>> diff --git a/src/template/random.mjs b/src/template/random.mjs index 16a76f6..066c41c 100644 --- 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') %>"<% } %>> diff --git a/src/template/single.mjs b/src/template/single.mjs index c9dc0f3..bac5b71 100644 --- 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') %>"<% } %>>