AEM 6510 - Show Filename and not Title in Asset Details and Properties Page

Goal

Show file name (with extension) and not title (dc:title) in Properties and Details page

Demo | Package Install | Github


Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-show-file-name-in-asset-properties

2) Create node /apps/eaem-show-file-name-in-asset-properties/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [dam.gui.admin.coral], String[] property dependencies with value lodash.

3) Create file (nt:file) /apps/eaem-show-file-name-in-asset-properties/clientlib/js.txt, add

                        show-file-name.js

4) Create file (nt:file) /apps/eaem-show-file-name-in-asset-properties/clientlib/show-file-name.js, add the following code

(function ($, $document) {
    $document.on("foundation-contentloaded", showFileName);

    function showFileName(){
        var fileName = window.Dam.Util.getUrlParam("item");

        if(isAssetDetailsPage()){
            fileName = window.location.pathname;
        }

        if(_.isEmpty(fileName)){
            return;
        }

        var $title = $(".granite-title");

        if(_.isEmpty($title)){
            return;
        }

        fileName = fileName.substring(fileName.lastIndexOf("/") + 1);

        $title.find("[role=heading]").html(fileName);
    }

    function isAssetDetailsPage(){
        return window.location.pathname.startsWith("/assetdetails.html");
    }
}(jQuery, jQuery(document)));