Goal
In AEM Assets, configure default thumbnails for different file types and show them in List/Card/Column of Assets console, Search console
Demo | Package Install | Github
Thumbnail for MP3 - Product
Thumbnail for MP3 - Extension
Tools Extension
Configure Default Thumbnails
http://localhost:4502/apps/eaem-assets-default-thumbnails/select-default-thumbnails.html
Stored in CRX
/conf/global/settings/dam/eaem-thumbnails
Card View
List View
Column View
Search Results
Solution
1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-assets-default-thumbnails
2) Add a multifield renderer /apps/eaem-assets-default-thumbnails/thumbnail-multifield/thumbnail-multifield.jsp extending otb /libs/granite/ui/components/coral/foundation/form/multifield with the following code
<%@ page import="com.adobe.granite.ui.components.Value" %>
<%@include file="/libs/granite/ui/global.jsp" %>
<%
String THUMBNAILS_PATH = "/conf/global/settings/dam/eaem-thumbnails";
slingRequest.setAttribute(Value.CONTENTPATH_ATTRIBUTE, THUMBNAILS_PATH);
%>
<sling:include resourceType="/libs/granite/ui/components/coral/foundation/form/multifield" />
3) Create cq:Page /apps/eaem-assets-default-thumbnails/select-default-thumbnails for configuring the thumbnails for file extensions
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
jcr:mixinTypes="[sling:VanityPath]"
jcr:primaryType="nt:unstructured"
jcr:title="Experience AEM Default Thumbnails"
sling:resourceType="granite/ui/components/coral/foundation/page">
<head jcr:primaryType="nt:unstructured">
<favicon
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/page/favicon"/>
<viewport
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/admin/page/viewport"/>
<clientlibs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"
categories="[coralui3,granite.ui.coral.foundation,granite.ui.shell,dam.gui.admin.coral]"/>
</head>
<body
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/page/body">
<items jcr:primaryType="nt:unstructured">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form"
action="/conf/global/settings/dam/eaem-thumbnails"
foundationForm="{Boolean}true"
maximized="{Boolean}true"
method="post"
novalidate="{Boolean}true"
style="vertical">
<successresponse
jcr:primaryType="nt:unstructured"
jcr:title="Success"
sling:resourceType="granite/ui/components/coral/foundation/form/responses/openprompt"
open="/assets.html"
redirect="/apps/eaem-assets-default-thumbnails/select-default-thumbnails.html/conf/global/settings/dam/eaem-thumbnails"
text="Thumbnails configuration saved"/>
<items jcr:primaryType="nt:unstructured">
<type
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
name="./jcr:primaryType"
value="nt:unstructured"/>
<wizard
jcr:primaryType="nt:unstructured"
jcr:title="Configure Thumbnails"
sling:resourceType="granite/ui/components/coral/foundation/wizard">
<items jcr:primaryType="nt:unstructured">
<area
jcr:primaryType="nt:unstructured"
jcr:title="Configure Thumbnails"
sling:resourceType="granite/ui/components/coral/foundation/container"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<thumbnails
jcr:primaryType="nt:unstructured"
sling:resourceType="/apps/eaem-assets-default-thumbnails/thumbnail-multifield"
composite="{Boolean}true"
fieldLabel="Thumbnails">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./thumbnails">
<items jcr:primaryType="nt:unstructured">
<extension
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="File Extension (no period) eg. DOCX"
fieldLabel="File Extension"
name="./extension"/>
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldDescription="Select Image Path"
fieldLabel="Thumbnail Path"
name="./path"
rootPath="/content/dam"/>
</items>
</field>
</thumbnails>
</items>
</column>
</items>
</columns>
</items>
<parentConfig jcr:primaryType="nt:unstructured">
<prev
granite:class="foundation-wizard-control"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/anchorbutton"
href="/aem/start.html"
text="Cancel">
<granite:data
jcr:primaryType="nt:unstructured"
foundation-wizard-control-action="cancel"/>
</prev>
<next
granite:class="foundation-wizard-control"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/button"
text="Save"
type="submit"
variant="primary">
<granite:data
jcr:primaryType="nt:unstructured"
foundation-wizard-control-action="next"/>
</next>
</parentConfig>
</area>
</items>
</wizard>
</items>
</content>
</items>
</body>
</jcr:content>
</jcr:root>
4) Add a navigation item in Tools by creating node /apps/cq/core/content/nav/tools/eaem/asset-default-thumbnail with the following code
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<tools jcr:primaryType="nt:unstructured">
<eaem
jcr:primaryType="nt:unstructured"
jcr:title="Experience AEM"
id="experience-aem-tools">
<asset-default-thumbnails
jcr:description="Experience AEM Assets Default Thumbnails"
jcr:primaryType="nt:unstructured"
jcr:title="Assets Default Thumbnails"
href="/apps/eaem-assets-default-thumbnails/select-default-thumbnails.html/conf/global/settings/dam/eaem-thumbnails"
icon="asset"
id="eaem-assets-default-thumbnails"
size="XL"/>
</eaem>
</tools>
</jcr:root>
2) Create node /apps/eaem-assets-default-thumbnails/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.common.wcm], String[] property dependencies with value lodash.
3) Create file (nt:file) /apps/eaem-assets-default-thumbnails/clientlib/js.txt, add
default-thumbnails.js
4) Create file (nt:file) /apps/eaem-assets-default-thumbnails/clientlib/default-thumbnails.js, add the following code
(function ($, $document) {
var THUMBNAILS_PATH = "/conf/global/settings/dam/eaem-thumbnails/thumbnails.2.json",
LAYOUT_COL_VIEW = "column",
LAYOUT_LIST_VIEW = "list",
LAYOUT_CARD_VIEW = "card",
CONTAINER = ".cq-damadmin-admin-childpages",
FOUNDATION_COLLECTION_ITEM_ID = "foundationCollectionItemId",
DIRECTORY = "directory",
CORAL_COLUMNVIEW_PREVIEW = "coral-columnview-preview",
COLUMN_VIEW = "coral-columnview",
colViewListenerAdded = false,
DEFAULT_THUMBS = {};
loadDefaultThumbnails();
$document.on("foundation-contentloaded", showThumbnails);
$document.on("foundation-selections-change", function(){
getUIWidget(CORAL_COLUMNVIEW_PREVIEW).then(showThumbnailInColumnViewPreview);
});
function showThumbnails(){
if(isColumnView()){
addColumnViewThumbnails();
}else{
addCardListViewThumbnails();
}
}
function addCardListViewThumbnails(){
var cardThumbs = DEFAULT_THUMBS.card,
listThumbs = DEFAULT_THUMBS.list;
if(_.isEmpty(cardThumbs) || _.isEmpty(listThumbs)){
return;
}
$(".foundation-collection-item").each(function(index, item){
var $item = $(item),
isFolder = ($item.data("item-type") == DIRECTORY);
if(isFolder){
return;
}
var extension = getExtension($item.data(FOUNDATION_COLLECTION_ITEM_ID));
if(_.isEmpty(cardThumbs[extension])){
return;
}
var $img = $item.find("td:first > img");
if(!isRendition($img.attr("src"))){
$img.attr("src", listThumbs[extension]);
}
$img = $item.find("coral-card-asset > img");
if(!isRendition($img.attr("src"))){
$img.attr("src", cardThumbs[extension]);
}
});
}
function addColumnViewThumbnails(){
if(colViewListenerAdded){
return;
}
var $columnView = $(COLUMN_VIEW),
columnThumbs = DEFAULT_THUMBS.column;
if(_.isEmpty($columnView) || _.isEmpty(columnThumbs)){
return;
}
colViewListenerAdded = true;
$columnView[0].on("coral-columnview:navigate", showThumbnail);
_.each($columnView.find("coral-columnview-column"), function(colItem){
showThumbnail({ detail : { column: colItem } });
});
function showThumbnail(event){
$(event.detail.column).find("coral-columnview-item").each(function(index, item){
var $item = $(item),
extension = getExtension($item.data(FOUNDATION_COLLECTION_ITEM_ID));
var $img = $item.find("coral-columnview-item-thumbnail > img");
if(!isRendition($img.attr("src"))){
$img.attr("src", columnThumbs[extension]);
}
});
}
}
function showThumbnailInColumnViewPreview($colPreview){
var columnThumbs = DEFAULT_THUMBS.column;
if(_.isEmpty($colPreview)){
return;
}
var extension = getExtension($colPreview.data("foundationLayoutColumnviewColumnid"));
var $img = $colPreview.find("coral-columnview-preview-asset > img");
if(!isRendition($img.attr("src"))){
$img.attr("src", columnThumbs[extension]);
}
}
function getExtension(path){
var extension = "";
if(_.isEmpty(path) || !path.includes(".")){
return extension;
}
extension = path.substring(path.lastIndexOf(".") + 1);
return extension.toUpperCase();
}
function loadDefaultThumbnails(){
$.ajax( { url: THUMBNAILS_PATH, asyc: false }).done(handler);
var extension = "";
function handler(data){
if(_.isEmpty(data)){
return;
}
DEFAULT_THUMBS["card"] = {};
DEFAULT_THUMBS["list"] = {};
DEFAULT_THUMBS["column"] = {};
_.each(data, function(thumb){
if(_.isEmpty(thumb.extension)){
return;
}
extension = thumb.extension.toUpperCase();
DEFAULT_THUMBS["card"][extension] = thumb.path + "/jcr:content/renditions/cq5dam.thumbnail.319.319.png";
DEFAULT_THUMBS["column"][extension] = thumb.path + "/jcr:content/renditions/cq5dam.thumbnail.319.319.png";
DEFAULT_THUMBS["list"][extension] = thumb.path + "/jcr:content/renditions/cq5dam.thumbnail.48.48.png";
})
}
}
function isColumnView(){
return ( getAssetsConsoleLayout() === LAYOUT_COL_VIEW );
}
function getAssetsConsoleLayout(){
var $childPage = $(CONTAINER),
foundationLayout = $childPage.data("foundation-layout");
if(_.isEmpty(foundationLayout)){
return "";
}
return foundationLayout.layoutId;
}
function getUIWidget(selector){
if(_.isEmpty(selector)){
return;
}
var deferred = $.Deferred();
var INTERVAL = setInterval(function(){
var $widget = $(selector);
if(_.isEmpty($widget)){
return;
}
clearInterval(INTERVAL);
deferred.resolve($widget);
}, 100);
return deferred.promise();
}
function isRendition(imgSrc){
return (!_.isEmpty(imgSrc) && imgSrc.includes("/renditions/"));
}
}(jQuery, jQuery(document)));