Create a custom rendition picker | Community
Skip to main content
W
warrenseine
January 26, 2016
Solved

Create a custom rendition picker

  • January 26, 2016
  • 6 replies
  • 1681 views

Hi,

I'm integrating a new component in AEM and would like to replace the default view in Touch UI with a custom JavaScript component based on the file extension. This is the closest I found from what I'd like to do, but I'd like to be able to view the component directly from the DAM or from an Asset Share.

I've found a way to do that by editing `renditionpicker.jsp` and injecting an <iframe> instead of an <img> tag. Unfortunately, this technique requires editing a core AEM component. That would break if another package edited this file too. I saw that there are a few another "pickers" (videopicker, s7previewer) in the "assetview" page (/libs/dam/gui/content/assets/assetpage/jcr:content/body/content/content/items/assetdetail/items/col1/items/assetview) but I'm unsure how I should add one.

What would be the best practice? Do you have some code example?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

You stated:

"I've found a way to do that by editing `renditionpicker.jsp` and injecting an <iframe> instead of an <img> tag. "

However - you said your concern was modifying content under /libs

Therefore, instead of modifying the component under /libs - overlay it and copy the node (and script) under /apps. Change the name of the component and now you have a component that meets your business requirements.

You are correct in that you should never change content under /libs. But overlaying a component is best practice in AEM. See this doc about Overlaying: 

https://docs.adobe.com/docs/en/aem/6-0/develop/platform/overlays.html

6 replies

smacdonald2008
smacdonald2008
January 26, 2016

You want to build a component to be used in the AEM UI as opposed to an AEM web page under /apps? 

I will look for examples. 

W
warrenseineAuthor
January 26, 2016

Yes, exactly.

Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
January 26, 2016

You can override getRenditions() method from RenditionPicker and implement your own rendition picker. Refer the custom picker link mentioned above by @scott

W
warrenseineAuthor
January 27, 2016

I already went through these examples. They look promising but there's one thing I don't understand: how do I use custom HTML code to display it? I don't see any example that actually changes the way AEM renders the rendition. I'd like to use an <iframe> instead of the default <img> tag that is used.

Thanks for your time.

smacdonald2008
smacdonald2008Accepted solution
January 27, 2016

You stated:

"I've found a way to do that by editing `renditionpicker.jsp` and injecting an <iframe> instead of an <img> tag. "

However - you said your concern was modifying content under /libs

Therefore, instead of modifying the component under /libs - overlay it and copy the node (and script) under /apps. Change the name of the component and now you have a component that meets your business requirements.

You are correct in that you should never change content under /libs. But overlaying a component is best practice in AEM. See this doc about Overlaying: 

https://docs.adobe.com/docs/en/aem/6-0/develop/platform/overlays.html

Terms & ConditionsAccessibility statement

Loading footer...