Reindition always coming in JPEG format

[rohankalra]

I have added reindition in AEM and displaying Image by using this ${properties.fileReference}/jcr:content/renditions/{renditionName}.jpeg Now if i am applying rendition to a particular Image and publishing it is converting to JPEG only how can it work in such a way that when we upload PNG png reindition should come otherwise JPEG should come.

[aanchal-sikka]

hello @rohankalra 

There must be a way by which you are resolving ${renditionName}. Hopefully its a Sling Model.

You can reuse the same sling model, to generate full path to the rendition and use it as it is in HTL. 

- Get asset path from fileReference

- Resolve the desired rendition.

- Use full path in HTL, that is resolved from Model

Just FYI, the Image component already takes case of choosing the best rendition. May be there is a specific reason, why you are resolving it via code.

[rohankalra]

The reinditions values are fixed as We are migrating and we are not able to use Image component

[DPrakashRaj]

Check this thread on which similar question was asked https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/image-extensions-for-rendi...

let me know if it’s answer your question

[Nishant-Singh · Accepted solution]

Hi @rohankalra you can use javascript use api to check if the resource exist or not.

1. create a js file in same component where your AEM sightly code is.

use below 

"use strict";
use(["/libs/wcm/foundation/components/utils/ResourceUtils.js"], function (ResourceUtils) {
var path=this.pngpath;  
  ResourceUtils.getResource(this.jpegpath)
  .then(function (node) {
    path = node.path;
  });
  return path;
});

2. in your sightly code use below code

<sly data-sly-test.jpegpath="${properties.fileReference}/jcr:content/renditions/{renditionName}.jpeg"/>
<sly data-sly-test.pngpath="${properties.fileReference}/jcr:content/renditions/{renditionName}.png"/>
<sly data-sly-use.imagepath="${'example.js' @ jpegpath=jpegpath,pngpath=pngpath}"></sly>
   ${imagepath.path}