We have written our own picture component to display renditions based on the user's device size. The Adobe documentation (http://docs.adobe.com/docs/en/cq/5-6-1/developing/mobile/responsive.html#Implementing%20Adaptive%20I... suggests the HTML output below.
Our approach is causing dispatcher errors as when the original image is accessed and cached by the dispatcher, then subsequent requests to the rendition images causing a folder to be created in the same location as the image.
Adobe documentation suggested HTML output:
<div data-picture>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div> <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png' data-media="(min-width: 769px)"></div> <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png' data-media="(min-width: 481px)"></div> </div>
Our component outputs this:
<picture> <!--[if IE 9] > <video style="display: none;"><![endif]--> <source srcset="/content/dam/sample-image.jpg/jcr:content/renditions/cq5dam.web.1600.9600.jpeg" media="(min-width: 992px)"> <source srcset="/content/dam/sample-image.jpg/jcr:content/renditions/cq5dam.web.780.4680.jpeg" media="(max-width: 991px)"> <!--[if IE 9]></video><![endif]--> <img srcset="/content/dam/sample-image.jpg" alt="Some alt text."> </picture>
How should I fix this? I don't want to use the Adaptive Image servlet to resize image on the fly.
