AEM 6520 - AEM Assets Configure Default Thumbnails for Various File Types

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)));

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Hi, I want to use this functionality so that thumbnails will get generated for MP3 file types. I see it works but I don't see thumbnails in assetdetails page. Can you help?

    ReplyDelete
    Replies
    1. I am facing the same issue.Have you got the solution?

      Delete