Basic Adaptive Image Custom Component | Community
Skip to main content
jamesnb1982
jamesnb1982
Level 2
September 23, 2016

Basic Adaptive Image Custom Component

  • September 23, 2016
  • 1 reply
  • 4463 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    1 reply

    K
    Adobe Employee
    KanikaGeraAdobe Employee
    Adobe Employee
    September 23, 2016

    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
      jamesnb1982Author
      Level 2
      September 25, 2016

      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.

      K
      Adobe Employee
      KanikaGeraAdobe Employee
      Adobe Employee
      September 26, 2016

      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. 

      Terms & ConditionsAccessibility statement

      Loading footer...