Basic Adaptive Image Custom Component

[jamesnb1982]

I'm trying to create a custom adaptive image component by copying the directory:

/libs/foundation/components/adaptiveimage

and pasting it into my project directory:

/apps/myproject/components/content/adaptiveimage

When I place my custom component into a parsys, it is not functioning as the original does. It will always choose the high resolution image and it won't fetch a different resolution on page resize like the original.

This happens regardless of whether I set the sling:resourceSuperType to /libs/foundation/components/adaptiveimage or if I delete the adaptiveimage.jsp from my custom component.

I understand this may be happening because the java AdaptiveImageComponentServlet (com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet) located in /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl does not work with my custom component because of it's location.

However, I am unable to determine how to make it function with my custom adaptive image. How is this done?

[user2797012]

Name your config file as com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet.xml  and place it in config folder in your app.  The trick here is to have the sling.servlet.resourceTypes property.  This property should include the path to your custom adaptive image component (highlighted in yellow in below sample – for a custom comp in path /apps/APPNAME/components/content/adaptiveimage).

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

    jcr:primaryType="sling:OsgiConfig"

    adapt.supported.widths="[320,480,476,620]"

    sling.servlet.resourceTypes="[foundation/components/adaptiveimage,APPNAME/components/content/adaptiveimage]"/>

[jamesnb1982]

Kanika Gera wrote...

Name your config file as com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet.xml  and place it in config folder in your app.  The trick here is to have the sling.servlet.resourceTypes property.  This property should include the path to your custom adaptive image component (highlighted in yellow in below sample – for a custom comp in path /apps/APPNAME/components/content/adaptiveimage).

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

    jcr:primaryType="sling:OsgiConfig"

    adapt.supported.widths="[320,480,476,620]"

    sling.servlet.resourceTypes="[foundation/components/adaptiveimage,APPNAME/components/content/adaptiveimage]"/>

This worked perfectly. Thank you. It gives me something to start from. Just wondering what will happen if I try to change the supported resolutions. Will I have to change code in the servlet? If I do will it affect the original component negatively or be overwritten in an AEM version update?

I used CRX/DE lite for this, so it worked a little differently. It involved creating a "sling:OsgiConfig" node named "com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet.xml" under apps/myproject/config.

I added a String named "adapt.supported.widths" with the "Multi" button clicked and added the values 320, 480, 476, and 620.

I added another Multi String named "sling.servlet.resourceTypes" and added the values "foundation/components/adaptiveimage" and "myproject/components/content/adaptiveimage"

After that, I could see the image resolution changing for my custom component when I resized the browser window.

[user2797012]

This worked perfectly. Thank you. It gives me something to start from. Just wondering what will happen if I try to change the supported resolutions. Will I have to change code in the servlet? If I do will it affect the original component negatively or be overwritten in an AEM version update?

>> I will suggest overlaying it.

I used CRX/DE lite for this, so it worked a little differently. It involved creating a "sling:OsgiConfig" node named "com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet.xml" under apps/myproject/config.

>> This should be fine. 

[jamesnb1982]

I'm noticing that in Publish the adaptive image that I implemented successfully in Author using this method does not work. The image will resize in publish but will only request the "high" image resolution. I've checked to see if it is just calling it "high" when in fact the actual resolution is low. When I look closely at the image when I resize it to the same level on author and publish you can see a difference between author which shows a much lower res image and publish which shows a much higher res image.

Could this have something to do with the fact that we've created a node with the type "sling:OsgiConfig" named "com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet.xml" under apps/myproject/config?

Perhaps publish doesn't have access to this node as it's in the apps directory? Have I missed something else here?

[anjalishyamsund]

Hi,

Were you able to fix this? Encountering the same issue!