Core Image Component - Adaptive Servlet

Avatar

Avatar
Affirm 5
Level 3
Rajashankar
Level 3

Likes

19 likes

Total Posts

31 posts

Correct reply

8 solutions
Top badges earned
Affirm 5
Boost 10
Affirm 3
Ignite 1
Validate 1
View profile

Avatar
Affirm 5
Level 3
Rajashankar
Level 3

Likes

19 likes

Total Posts

31 posts

Correct reply

8 solutions
Top badges earned
Affirm 5
Boost 10
Affirm 3
Ignite 1
Validate 1
View profile
Rajashankar
Level 3

20-07-2020

Hi,

I have a basic question on Responsive Feature provided with Core Image Component. 

 

When the size of screen changes the soruce of image also changes accoridngly with respect to the width defined in template design for image component

Example:

<img class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="" src="/content/we-retail/language-masters/en/products/equipment/_jcr_content/root/responsivegrid/image.coreimg.82.300.png/1595274233631/wknd-logo-dk.png">

 

My Doubt is

a) was the servlet everytime fectching the original image component and applies the width Size thereby compressing and displaying it

or

b) Is the adaptive servlet picking up image from different rendition of the available image based on nearly matching width?

Rajashankar_0-1595279071873.png

 

 

I know the ACS Commons Named Image Servlet picks up original image and applies different sizing/cropping etc on top of that at run time is the Adaptive Servlet works same way?

 

Please suggest

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

21-07-2020

Hi @Rajashankar 

 

Wcm Core Image Component works in the similar way acs commons one. If you look at the image page path :

<img class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="" src="/content/we-retail/language-masters/en/products/equipment/_jcr_content/root/responsivegrid/image.coreimg.82.300.png/1595274233631/wknd-logo-dk.png">

 

This basically calls the Core Adaptive Servlet which depending upon the factory OSGI configuration ""AEM Core WCM Components Adaptive Image Servlet Mapping Configuration"" and for "coreimg" selector applies different rules for transformation.
Screenshot from 2020-07-21 15-43-08.png

 

You can refer https://helpx.adobe.com/in/experience-manager/6-3/sites/developing/using/responsive.html#Understandi... and https://github.com/adobe/aem-core-wcm-components/wiki/the-adaptive-image-servlet to read more on how adaptive servlet works and how can you define different transformation configuration.

 

Hope it helps!

Thanks!

Nupur

Answers (1)

Answers (1)

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

21-07-2020