@amplience/dynamic-content-accelerators
Version:
Amplience DC Frontend modules, using HTML Service
26 lines (25 loc) • 4.2 kB
HTML
{{#if image.image}}
<picture class="amp-dc-image">
{{#each (JSONparse mediaQueries)}}
<source srcset="//{{../image.image.defaultHost}}/i/{{../image.image.endpoint}}/{{encodeURI ../image.image.name}}{{#if ../image.seoText}}/{{../image.seoText}}{{/if}}?fmt=webp&upscale=true&w={{this.width}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../image.roundel }}{{#if this.x1}}{{>acc-template-banner-poi name=../image.image.name settings=this.x1}}{{/if}} 1x,
//{{../image.image.defaultHost}}/i/{{../image.image.endpoint}}/{{encodeURI ../image.image.name}}{{#if ../image.seoText}}/{{../image.seoText}}{{/if}}?fmt=webp&upscale=true&w={{multiply this.width 2}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../image.roundel}}{{#if this.x2}}{{> acc-template-banner-poi name=../image.image.name settings=this.x2}}{{/if}} 2x"
media="({{#if @last}}min-width{{else}}max-width{{/if}}: {{this.query}}px)"
type="image/webp">
<source srcset="//{{../image.image.defaultHost}}/i/{{../image.image.endpoint}}/{{encodeURI ../image.image.name}}{{#if ../image.seoText}}/{{../image.seoText}}{{/if}}?upscale=true&w={{this.width}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../image.roundel}}{{#if this.x1}}{{> acc-template-banner-poi name=../image.image.name settings=this.x1}}{{/if}} 1x,
//{{../image.image.defaultHost}}/i/{{../image.image.endpoint}}/{{encodeURI ../image.image.name}}{{#if ../image.seoText}}/{{../image.seoText}}{{/if}}?upscale=true&w={{multiply this.width 2}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../image.roundel}}{{#if this.x2}}{{> acc-template-banner-poi name=../image.image.name settings=this.x2}}{{/if}} 2x"
media="({{#if @last}}min-width{{else}}max-width{{/if}}: {{this.query}}px)"
>
{{#if @last}}
{{#with (first (JSONparse ../mediaQueries) 1)}}
<img
src="//{{../../image.image.defaultHost}}/i/{{../../image.image.endpoint}}/{{encodeURI ../../image.image.name}}{{#if ../../image.seoText}}/{{../../image.seoText}}{{/if}}?{{> acc-template-roundel roundel=../../image.roundel}}{{#if this.0.x1}}{{> acc-template-banner-poi name=../../image.image.name settings=this.0.x1}}{{/if}}"
srcset="//{{../../image.image.defaultHost}}/i/{{../../image.image.endpoint}}/{{encodeURI ../../image.image.name}}{{#if ../../image.seoText}}/{{../../image.seoText}}{{/if}}?upscale=true&fmt=webp&w={{this.0.width}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../../image.roundel}}{{#if this.0.x1}}{{> acc-template-banner-poi name=../../image.image.name settings=this.0.x1}}{{/if}} 1x,
//{{../../image.image.defaultHost}}/i/{{../../image.image.endpoint}}/{{encodeURI ../../image.image.name}}{{#if ../../image.seoText}}/{{../../image.seoText}}{{/if}}?upscale=true&fmt=webp&w={{multiply this.0.width 2}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../../image.roundel}}{{#if this.0.x2}}{{> acc-template-banner-poi name=../../image.image.name settings=this.0.x2}}{{/if}} 2x,
//{{../../image.image.defaultHost}}/i/{{../../image.image.endpoint}}/{{encodeURI ../../image.image.name}}{{#if ../../image.seoText}}/{{../../image.seoText}}{{/if}}?upscale=true&w={{this.0.width}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../../image.roundel}}{{#if this.0.x1}}{{> acc-template-banner-poi name=../../image.image.name settings=this.0.x1}}{{/if}} 1x,
//{{../../image.image.defaultHost}}/i/{{../../image.image.endpoint}}/{{encodeURI ../../image.image.name}}{{#if ../../image.seoText}}/{{../../image.seoText}}{{/if}}?upscale=true&w={{multiply this.0.width 2}}{{#if this.widthPercents}}%{{/if}}{{> acc-template-roundel roundel=../../image.roundel}}{{#if this.0.x2}}{{> acc-template-banner-poi name=../../image.image.name settings=this.0.x2}}{{/if}} 2x"
class="amp-dc-image-pic {{../../classNames}}" {{#if ../../image.imageAltText}} alt="{{../../image.imageAltText}}" {{/if}} />
{{/with}}
{{/if}}
{{/each}}
</picture>
{{/if}}