Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Images in responsive Website

Avatar

Avatar
Boost 5
Level 2
Tarek_Lablack
Level 2

Likes

6 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
View profile

Avatar
Boost 5
Level 2
Tarek_Lablack
Level 2

Likes

6 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
View profile
Tarek_Lablack
Level 2

22-07-2019

UseCase 1:

Use AT VEC to replace images in Header and Teaser in a responsive website

Business users / non-technical users should be able to run A/B test for images in header, teaser or YouTube Videos. For their responsive website they are using images in different ratios / renditions / qualities implemented as html standards like srcset-attribute. So, attributes with several URLs are rendered (in some cases by using DynamicMedia).

Examples:

<img src="https://sxgxx.scene7.com/customerx/Panel" srcset="https://sxgxx.scene7.com/customerx/Panel?$E32-S$ 576w,https://sxgxx.scene7.com/customerx/Panel?$E32-XL$ 1200w,https://sxgxx.scene7.com/customerx/Panel?$E32-XS$ 320w,https://sxgxx.scene7.com/customerx/Panel?$E32-L$ 992w,https://sxgxx.scene7.com/customerx/Panel?$E32-M$ 768w" data-asset-id="1234">

<div class="js-srcset hero_img" data-srcset-xs="https://sxgxx.scene7.com/customerx/oranges?$E21-XS$" data-srcset-sm="https://sxgxx.scene7.com/customerx/oranges?$E21-S$" data-srcset-md="https://sxgxx.scene7.com/customerx/oranges?$E21-M$" data-srcset-lg="https://sxgxx.scene7.com/customerx/oranges?$E21-L$" data-srcset-xl="https://sxgxx.scene7.com/customerx/oranges?$E21-XL$" title="image" data-asset-id="1234" style="background-image: url(“https://sxgxx.scene7.com/customerx/oranges?$E21-XL$”);">

<picture class="a-image a-image--ratio-xl-21x7 a-image--ratio-l-21x7 a-image--ratio-m-21x7 a-image--ratio-s-21x7 a-image--ratio-21x7 a-image--loaded"><source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xl1440/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xl2880/r21-7.jpeg 2x" media="(min-width: 1440px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xl1440/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xl2880/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/l1024/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/l2048/r21-7.jpeg 2x" media="(min-width: 1024px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/l1024/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/l2048/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/m768/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/m1536/r21-7.jpeg 2x" media="(min-width: 768px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/m768/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/m1536/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/s480/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/s960/r21-7.jpeg 2x" media="(min-width: 480px)" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/s480/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/s960/r21-7.jpeg 2x"> <source data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x"> <img alt="" data-srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x" srcset="/content/dam/test-3-2560x1120.jpg.resize.jpeg/xs320/r21-7.jpeg 1x, /content/dam/test-3-2560x1120.jpg.retina.resize.jpeg/xs640/r21-7.jpeg 2x" class="a-image__item lazyloaded"></picture>

<img class="lazyloaded" data-src="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png" data-srcset="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.325.244.png 325w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.780.585.png 780w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png 1280w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1920.1440.png 1920w" data-sizes="x" alt="test" data-srcset-webp="" sizes="x" srcset="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.325.244.png 325w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.780.585.png 780w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png 1280w,/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1920.1440.png 1920w" src="/content/dam/master/teaser.png/_jcr_content/renditions/original.web.1280.960.png">

Issue:

VEC will not replace all the urls just the src attribute -> A/B Tests does not work in responsive design

Proposed workaround:

  1. Edit HTML and replace all urls -> Not applicable for business analysts
  2. Create modification an replace urls via CSS selector -> Not applicable for business analysts
  3. Create HTML Offers with code snipplets -> Doubles effort and developer is needed for each new image

UseCase 2:

Sharing images from AEM with AT over Experience Cloud

Issue: All assets are loaded in a flat hierarchy. That breaks down the performance. It’s not possible to just offer assets for a specific tenant. Also the folder structure which is still there in Experience Cloud Assets is removed.

Customer Rating: Not usable for high amount of assets (> 10k). Business analysts working on target will not be able to work in AEM to move / delete assets in a “shared with target” folder. BA should be able to use whole assets catalog for a country.