AEM 6550 - Extend AEM Asset Picker to select Image Smart Crops and Video Dynamic Renditions | AEM Community Blog Seeding

[kautuk_sahni]

AEM 6550 - Extend AEM Asset Picker to select Image Smart Crops and Video Dynamic Renditions by Sreekanth Choudry Nalabotu

Abstract

AEM Asset Picker (http://localhost:4502/aem/assetpicker) out of the box does not show Dynamic Renditions for selecting them in third party applications (using iframe). This post is on extending the Asset Picker to show (and select) Video Renditions (encodes) and Image Smart Crops...


Solution
1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-asset-selector-show-dyn-renditions

2) Create the following nt:file /apps/eaem-asset-selector-show-dyn-renditions/smart-crop-renditions/smart-crop-renditions.jsp to return the smart crop renditions of an image as JSON

<%@include file="/libs/granite/ui/global.jsp"%>

<%@page session="false"
import="java.util.Iterator,
org.apache.sling.commons.json.JSONObject,
com.adobe.granite.ui.components.Config,
com.adobe.granite.ui.components.Tag"%>
<%@ page import="com.adobe.granite.ui.components.ds.ValueMapResource" %>

<%
Config cfg = cmp.getConfig();
ValueMap dynVM = null;
JSONObject dynRenditions = new JSONObject();

response.setContentType("application/json");

for (Iterator items = cmp.getItemDataSource().iterator(); items.hasNext();) {
JSONObject dynRendition = new JSONObject();

dynVM = ((ValueMapResource)items.next()).getValueMap();

String name = String.valueOf(dynVM.get("breakpoint-name"));

dynRendition.put("name", name);
dynRendition.put("image", dynVM.get("copyurl"));
dynRendition.put("url", dynVM.get("copyurl"));

dynRenditions.put(name, dynRendition);
}

dynRenditions.write(response.getWriter());
%>


3) Set the datasource for Image Smart Crops /apps/eaem-asset-selector-show-dyn-renditions/smart-crop-renditions/renditions/datasource@sling:resourceType = dam/gui/components/s7dam/smartcrop/datasource



4) Create the following nt:file /apps/eaem-asset-selector-show-dyn-renditions/video-dyn-renditions/video-dyn-renditions.jsp to return the encodes of a video as JSON


<%@include file="/libs/granite/ui/global.jsp"%>

<%@page session="false"
import="org.apache.sling.commons.json.JSONObject"%>
<%@ page import="org.apache.sling.api.SlingHttpServletRequest" %>
<%@ page import="com.day.cq.dam.api.Asset" %>
<%@ page import="com.day.cq.dam.api.renditions.DynamicMediaRenditionProvider" %>
<%@ page import="com.day.cq.dam.api.Rendition" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.List" %>

<%
response.setContentType("application/json");

SlingHttpServletRequest eaemSlingRequest = slingRequest;
String contentPath = eaemSlingRequest.getRequestPathInfo().getSuffix();

Resource currentResource = eaemSlingRequest.getResourceResolver().getResource(contentPath);
Asset asset = (currentResource != null ? currentResource.adaptTo(Asset.class) : null);

JSONObject dynRenditions = new JSONObject();

if( (asset == null) || !(asset.getMimeType().startsWith("video/")) || (asset.getMetadata("dam:scene7ID") == null)) {
dynRenditions.write(response.getWriter());
return;
}

DynamicMediaRenditionProvider dmRendProvider = sling.getService(DynamicMediaRenditionProvider.class);
String s7Domain = String.valueOf(asset.getMetadata("dam:scene7Domain"));
String scene7FileAvs = String.valueOf(asset.getMetadata("dam:scene7FileAvs"));

HashMap<String, Object> rules = new HashMap<String, Object>();
rules.put("remote", true);
rules.put("video", true);

List dmRenditions = dmRendProvider.getRenditions(asset, rules);
JSONObject dynRendition = new JSONObject();
String image = null, avsName = scene7FileAvs.substring(scene7FileAvs.lastIndexOf("/") + 1);

dynRendition.put("url", getScene7Url(s7Domain, scene7FileAvs));
dynRendition.put("image", getRendThumbnail(s7Domain, scene7FileAvs));
dynRendition.put("name", avsName);

dynRenditions.put(avsName, dynRendition);

for (Rendition dmRendition : dmRenditions) {
dynRendition = new JSONObject();

image = dmRendition.getPath();

if(image.endsWith(".mp4")){
image = image.substring(0, image.lastIndexOf(".mp4"));
}

dynRendition.put("name", dmRendition.getName());
dynRendition.put("image", getRendThumbnail(s7Domain, image));
dynRendition.put("url", getScene7Url(s7Domain, dmRendition.getPath()));

dynRenditions.put(dmRendition.getName(), dynRendition);
}

dynRenditions.write(response.getWriter());
%>

<%!
private static String getScene7Url(String s7Domain, String rendPath){
return s7Domain + "/s7viewers/html5/VideoViewer.html?asset=" + rendPath;
}

private static String getRendThumbnail(String s7Domain, String rendPath){
return s7Domain + "/is/image/" + rendPath + "?fit=constrain,1&wid=200&hei=200";
}
%>


5) Create node /apps/eaem-asset-selector-show-dyn-renditions/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.gui.damadmin.assetselector], String[] property dependencies with value lodash.


6) Create file (nt:file) /apps/eaem-asset-selector-show-dyn-renditions/clientlib/js.txt, add

col-view-show-dyn-renditions.js

7) Create file (nt:file) /apps/eaem-asset-selector-show-dyn-renditions/clientlib/col-view-show-dyn-renditions.js,

Read Full Blog

AEM 6550 - Extend AEM Asset Picker to select Image Smart Crops and Video Dynamic Renditions

Q&A

Please use this thread to ask the related questions.