Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

Reindition always coming in JPEG format

Avatar

Level 3

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.

1 Accepted Solution

Avatar

Correct answer by
Employee

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}

 

 

View solution in original post

4 Replies

Avatar

Community Advisor

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.


Aanchal Sikka

Avatar

Level 3

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

Avatar

Correct answer by
Employee

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}