Thursday, April 30, 2015

Dispatcher caching issue while displaying the image renditions in Adobe Experience Manager(AEM)

We are using the image renditions to display the images for different devices in Adobe Experience Manager(AEM).

The HTML5 Adaptive image is used as shown below to display the images for different devices.

<img src="/content/dam/Albin/Untitled.jpg" srcset="/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,/content/dam/Albin/Untitled.jpg" alt="Sample Image">

/content/dam/Albin/Untitled.jpg - Original image
/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png - Rendition for 1x devices.

If the image is first accessed from the mobile devices then Untitled.jpg folder is created to cache the renditions image(rendition images will be matched for mobile devices) - /content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png

While the image is getting accessed from desktop browsers then dispatcher will try to return the folder Untitled.jpg as image(/content/dam/Albin/Untitled.jpg - original image will be matched for desktop browsers) so the image link will be broken in browser.

In other hand, if the image is first accessed from desktop browser then dispatcher caches Untitled.jpg as image. The subsequent request to the renditions image will not find the images in dispatcher cache so the image will be retrieved from publisher for rendering(rendition images will not be cached in this scenario as untitled.jpg is created as a image).

 Refer the following post To resolve the issue

https://www.albinsblog.com/2015/04/how-to-use-html5-adaptive-image-in-AdobeCQ5.html



2 comments:

  1. Hi Albin

    How were you able to solve this issue? I checked the link mentioned;
    http://www.albinsblog.com/2015/04/how-to-use-html5-adaptive-image-in-AdobeCQ5.html
    I have the same problem; the image cq5dam.thumbnail.319.319.png gets cached prior to the original image; and hence the link to download the image is broken.
    Can you tell me how to fix this?

    Thanks

    ReplyDelete
  2. Here is the best solution I have come up with so far on this problem. Rewrite requests that have no rendition in the URL to the "original" rendition URL. This prevents the dispatcher from returning the 403 error. However, the "original" rendition URL is not cacheable because it has no file extension. So I don't like it much, but it's better than getting a 403 sometimes.

    RewriteCond %{REQUEST_URI} "^/content/dam" [NC]
    RewriteCond %{REQUEST_URI} !"jcr_content/renditions" [NC]
    RewriteCond %{REQUEST_URI} !"jcr:content/renditions" [NC]
    RewriteRule ^/content/dam/(.*\.png|.*\.jpg)$ /content/dam/$1/_jcr_content/renditions/original [R=301,L,NE,NC]

    ReplyDelete