Configuration changes of "Adobe CQ Adaptive Image Component Servlet" are not picked up while rendering the page

[Former Community Member]

I added an adaptive image component to a page and dropped an image into it. When I inspect the image element or view source the page, I see the following div tags:

<div data-picture="" data-alt="">
    <div data-src="/content/ecs/en/business/jcr:content/content/adaptiveimage.img.320.low.jpg/1391162070461.jpg" data-media="(min-width: 1px)"></div>                                        
    <div data-src="/content/ecs/en/business/jcr:content/content/adaptiveimage.img.320.medium.jpg/1391162070461.jpg" data-media="(min-width: 320px)"></div>  
    <div data-src="/content/ecs/en/business/jcr:content/content/adaptiveimage.img.480.medium.jpg/1391162070461.jpg" data-media="(min-width: 321px)"></div>  
    <div data-src="/content/ecs/en/business/jcr:content/content/adaptiveimage.img.476.high.jpg/1391162070461.jpg" data-media="(min-width: 481px)"></div>   
    <div data-src="/content/ecs/en/business/jcr:content/content/adaptiveimage.img.620.high.jpg/1391162070461.jpg" data-media="(min-width: 769px)"></div>  
    <div data-src="/content/ecs/en/business/jcr:content/content/adaptiveimage.img.full.high.jpg/1391162070461.jpg" data-media="(min-width: 1025px)"></div> 

    <noscript>
        &lt;img src='/content/ecs/en/business/_jcr_content/content/adaptiveimage.img.320.low.jpg/1391162070461.jpg' alt=''&gt;
    </noscript>
    <img alt="" src="/content/ecs/en/business/jcr:content/content/adaptiveimage.img.full.high.jpg/1391162070461.jpg">
</div>

The above div elements are generated based on the configuration of "Supported Widths" for "Adobe CQ Adaptive Image Component Servlet" in http://localhost:4502/system/console/configMgr. The configuration file for the same is "/apps/system/config/com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet.config".

The default configuration inside the file is: 

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

When I add a new configuration say, 768 or 980 from http://localhost:4502/system/console/configMgr its updated in the configuration file. But while rendering the page it is not generating the corresponding divs and images for these sizes.

I tried restarting the bundle and restarting the author instance. But it didn't workout.

Can anyone please let me know if I overlooked anything...

Your help would be greatly appreciated.

[Scott_Brodersen]

Is there a reason why you need to create a new servlet? You can simply use the existing one, and configure it to accept the image dimensions that your component uses.

[Scott_Brodersen · Accepted solution]

The servlet generates the image, however the component generates the html. I believe you need to overlay the component so that it generates url's with selectors that match how the servlet is configured.

http://dev.day.com/docs/en/cq/current/developing/mobile/responsive.html#Scaling%20Images%20for%20the...

scott