Closed justinedelson closed 6 years ago
One idea here could be to use the concept of URITemplate to complete the paths: https://tools.ietf.org/html/rfc6570
and to separate each configuration option to its own attribute, something like:
data-cmp-image-uritemplate=“{+basepath}.img{.size}.jpeg/10897423.jpeg”
data-cmp-image-basepath=“/path/to/resource”
data-cmp-image-smartsizes=“128, 256, 512, 1024, 2048”
data-cmp-image-lazyenabled=“true”
Since v2 of Image component we switched to data attribute bindings and got rid of the inline JSON: https://github.com/Adobe-Marketing-Cloud/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image#javascript-data-attribute-bindings
The image core component outputs a JSON structure as the
data-cmp-image
attribute on the<noscript>
element. This JSON contains the full paths to all of the dynamic image renditions, e.g.This output is hard to rewrite, e.g. using something like ACS AEM Commons Static Reference Rewriter (https://github.com/Adobe-Consulting-Services/acs-aem-commons/blob/master/bundle/src/main/java/com/adobe/acs/commons/rewriter/impl/StaticReferenceRewriteTransformerFactory.java) for serving images from cookie-less domains.
I'd suggest changing this structure to provide a single data attribute containing the basepath (which could then be rerwritten) and then have the JSON contains the paths relative to this base.
This could be simplified further, e.g. to put the timestamp in a separate JSON key and only use the numeric selector as the key; it just depends upon how much concatenation logic we want to embed in the JavaScript.