Expand my Community achievements bar.

SOLVED

Having Thumbnail icons in assets, based on metadata properties in AEM Assets

Avatar

Community Advisor

Hi dear Community,

i am facing a challenge here that gives me the vibe of,
"Í can't be the only person to have this problem.
Other people probably had the same issue and there is already a solution!
No need to reinvent the wheel here."

So i come to you, asking humbly for your wisdom.

The AEM Assets (AEMaaCS i might add) already has OOTB some icons based on metadata.
For example - a small red flag for assets that are expired.
A green thumbs up icon for assets that have the property ./jcr:content/metadata/dam:status = approved
A red thumbs down icon for assets that have the property ./jcr:content/metadata/dam:status = rejected
A grey clock icon for assets that have the property./jcr:content/metadata/dam:status = Changes Requested

and so on...
Icons.png

 

I would like to do something similar for assets that have the property ./jcr:content/metadata/xmpRights:WebStatement
To make it more visible which pictures and documents have to be handled with a extra bit of precaution.
I have read that there are more icons, but i do not know which, where to find them and if there already is something like a red exclamation mark for example, how to make the AEM to show this icon on assets that have the metadata xmpRights:WebStatement
or to have a made up example on: "dam:status = TermsOfService" .

I would appreciate your input a lot. 
You are the best!


PS: My first Idea was it to create a workflow that overlays the thumbnail with a watermark, but the watermark workflow is not very helpful.
It has two approaches, none of them seem to work for us.
One based on a Image Processing profile that only applies to every picture in a folder, and, as expected, it only creates an additional rendition, that has not impact on the Thumbnail.
Second, the other watermark workflow which seems to be only working for JPGs and PNG files. We only use TIFs.
None of the two watermarking solution the system offers does us any good.
I think there is a lot of room for improvement with both of these.
They only add text or a png based of a value that has to be given in font size. 
Better would be a value based of % of the canvas size.

In a smaller picture the words will go out of the frame, in a very big picture the watermark will be to small. Not very practical.
Or at least something like the watermarks in every image stock site - like a repeating pattern all over the image.
Maybe there is such an option that i did not find, but this is just the side-rant of this cry for help.
Having extra icons would be super duper, using the already existing icons based on our needs would be super.
Any ideas dear reader? Please let me know.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Adilos-Cantuerk,

This is possible. In general implementation of card for assets can be found under /libs/dam/gui/coral/components/admin/contentrenderer/card/asset/propertyList.jsp. To modify this view, e.g. by adding new icon, you should overlay above path (as a result you should have apps/dam/gui/coral/components/admin/contentrenderer/card/asset/propertyList.jsp) and make modification under overlay, like that:

dam-overlay.jpg

You will have to add new coral-card-property element that will represent new icon. Of course with appropriate condition base on property value or any logic you wish. Here is very simple example just to add additional icon:

alert-icon.jpg

And final result:

assets-gui.jpgLast but not least list of available icons you can find under https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Icon....

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @Adilos-Cantuerk,

This is possible. In general implementation of card for assets can be found under /libs/dam/gui/coral/components/admin/contentrenderer/card/asset/propertyList.jsp. To modify this view, e.g. by adding new icon, you should overlay above path (as a result you should have apps/dam/gui/coral/components/admin/contentrenderer/card/asset/propertyList.jsp) and make modification under overlay, like that:

dam-overlay.jpg

You will have to add new coral-card-property element that will represent new icon. Of course with appropriate condition base on property value or any logic you wish. Here is very simple example just to add additional icon:

alert-icon.jpg

And final result:

assets-gui.jpgLast but not least list of available icons you can find under https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Icon....

Avatar

Community Advisor

Thanks you very much!

I will try this out immediately.