AEM 6540 - Assets Dynamic Media Show Specific Rendition (Smart Crop) by default on opening Asset Details

Goal

AEM Asset details page - /assetdetails.html remembers the last rail (Renditions or Timeline etc..) by storing the value in cookie rail-cq-propertiespage; if the requirement is to show a specific rail on open eg. Renditions, further show a specific rendition eg. customer specific dynamic media Smart Crop Destination-Storycard-1305x555, try the following extension...

Demo | Package Install | Github

Solution

1) Create a filter apps.experienceaem.assets.EAEMSetDefaultRailCookie to set the cookie rail-cq-propertiespage value to renditions every time it's accessed...

package apps.experienceaem.assets;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.wrappers.SlingHttpServletRequestWrapper;
import org.osgi.framework.Constants;
import org.osgi.service.component.annotations.Component;

import javax.servlet.*;
import javax.servlet.http.Cookie;
import java.io.IOException;

@Component(
        service = Filter.class,
        immediate = true,
        name = "Experience AEM Default Rail Cookie Filter",
        property = {
                Constants.SERVICE_RANKING + ":Integer=-99",
"sling.filter.scope=COMPONENT"
        }
)
public class EAEMSetDefaultRailCookie implements Filter {
    public static String RAIL_CQ_PROPERTIES_PAGE = "rail-cq-propertiespage";

    public static String RENDITIONS = "renditions";

    public void init(FilterConfig filterConfig) throws ServletException {
    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        SlingHttpServletRequest slingRequest = (SlingHttpServletRequest) request;

        String requestURI = slingRequest.getRequestURI();

        if (!requestURI.startsWith("/assetdetails.html")) {
            chain.doFilter(request, response);
            return;
        }

        SlingHttpServletRequest defaultRailCookie = new EAEMDefaultRailServletRequestWrapper(slingRequest);
        chain.doFilter(defaultRailCookie, response);
    }

    public void destroy() {
    }

    private class EAEMDefaultRailServletRequestWrapper extends SlingHttpServletRequestWrapper {
        public EAEMDefaultRailServletRequestWrapper(final SlingHttpServletRequest request) {
            super(request);
        }

        @Override
        public Cookie getCookie(String cookieName) {
            if (!EAEMSetDefaultRailCookie.RAIL_CQ_PROPERTIES_PAGE.equals(cookieName)) {
                return super.getCookie(cookieName);
            }

            Cookie cookie = new Cookie(EAEMSetDefaultRailCookie.RAIL_CQ_PROPERTIES_PAGE, EAEMSetDefaultRailCookie.RENDITIONS);
            cookie.setPath("/");

            return cookie;
        }
    }

}

2) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-default-specific-rendition-asset-details

3) Create node /apps/eaem-default-specific-rendition-asset-details/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [dam.gui.smartcroprendition.list], String[] property dependencies with value lodash.

4) Create file (nt:file) /apps/eaem-default-specific-rendition-asset-details/clientlib/js.txt, add

                        show-default-rendition.js

5) Create file (nt:file) /apps/eaem-default-specific-rendition-asset-details/clientlib/show-default-rendition.js, add the following code

(function ($, $document) {
    var DEFAULT_RENDITION = "Destination-Storycard-1305x555", initialized = false;

    $document.on("foundation-contentloaded", showDefaultRendition);

    function showDefaultRendition(){
        if(!isAssetDetailsPage() || initialized){
            return;
        }

        var fileName = window.location.pathname;

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

        $('.smartcrop-renditions .each-rendition').each(function(e){
            initialized = true;

            var $smartRend = $(this), rendName;

            if ($smartRend.data("assetNotProcessed")){
                return;
            }

            rendName = $smartRend.find(".col1presetname").html();

            if(rendName.trim() !== DEFAULT_RENDITION){
                return;
            }

            $smartRend.click();
        });
    }

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