search

adobe / aem-core-wcm-components

Standardized components to build websites with AEM.
https://docs.adobe.com/content/help/en/experience-manager-core-components/using/introduction.html
Apache License 2.0
730 stars 736 forks source link

Core Image component's inline-JSON output is highly verbose, repetitive, and hard to rewrite #72

Closed justinedelson closed 6 years ago

justinedelson commented 6 years ago

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.

<noscript data-cmp-image="{&#34;smartImages&#34;:[&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.128.jpeg/1506620954214.jpeg&#34;,&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.256.jpeg/1506620954214.jpeg&#34;,&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.512.jpeg/1506620954214.jpeg&#34;,&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.1024.jpeg/1506620954214.jpeg&#34;,&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.1280.jpeg/1506620954214.jpeg&#34;,&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.1440.jpeg/1506620954214.jpeg&#34;,&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.1920.jpeg/1506620954214.jpeg&#34;,&#34;/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image.img.2048.jpeg/1506620954214.jpeg&#34;],&#34;smartSizes&#34;:[128,256,512,1024,1280,1440,1920,2048],&#34;lazyEnabled&#34;:true}">
    <img class="cmp-image__image" src="/content/we-retail/us/en/about-us/_jcr_content/root/responsivegrid/image.img.jpeg/1506620954214.jpeg" alt/>
</noscript>

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.

<noscript data-cmp-image-basepath="/content/we-retail/us/en/about-us/jcr%3acontent/root/responsivegrid/image" data-cmp-image-data="{&#34;smartImages&#34;:[&#34;.img.128.jpeg/1506620954214.jpeg&#34;,&#34;.img.256.jpeg/1506620954214.jpeg&#34;,&#34;.img.512.jpeg/1506620954214.jpeg&#34;,&#34;.img.1024.jpeg/1506620954214.jpeg&#34;,&#34;.img.1280.jpeg/1506620954214.jpeg&#34;,&#34;.img.1440.jpeg/1506620954214.jpeg&#34;,&#34;.img.1920.jpeg/1506620954214.jpeg&#34;,&#34;.img.2048.jpeg/1506620954214.jpeg&#34;],&#34;smartSizes&#34;:[128,256,512,1024,1280,1440,1920,2048],&#34;lazyEnabled&#34;:true}">
  <img class="cmp-image__image" src="/content/we-retail/us/en/about-us/_jcr_content/root/responsivegrid/image.img.jpeg/1506620954214.jpeg" alt/>

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.

richardhand commented 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”
vladbailescu commented 6 years ago

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