AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments | AEM Community Blog Seeding

[kautuk_sahni]

AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments by Sreekanth Choudry Nalabotu

Abstract

Goal
Show Image Previews in Content Fragment Editor, when selected using a Path Field or Path Field in Multifield...

Solution
Add a client library /apps/eaem-cs-cf-image-preview/clientlibs/image-preview with categories=dam.cfm.adminpage.v2 and the following logic in /apps/eaem-cs-cf-image-preview/clientlibs/image-preview/image-preview.js to add preview cards...

(function ($, $document) {
"use strict";

var _ = window._,
initialized = false,
EDITOR_PAGE = "/editor.html",
FRAGMENT_EDITOR_PAGE = "/mnt/overlay/dam/cfm/admin/content/v2/fragment-editor.html",
IMAGE_REF_SELECTOR = "foundation-autocomplete",
MF_SELECTOR = "coral-multifield",
IMAGE_PREVIEW_CARD = "eaem-image-preview-card";

if (!isFragmentEditorPage()) {
return;
}

init();

function init(){
if(initialized){
return;
}

initialized = true;

window.Dam.CFM.Core.registerReadyHandler(extendFragmentEditor);
}

function extendFragmentEditor(){
addImagePreviews();

addImagePreviewsInMF();
}

function addImagePreviewsInMF(){
$(MF_SELECTOR).each(function(index, mField){
Coral.commons.ready(mField, addImageCard);
});

$(MF_SELECTOR).on("coral-collection:add", function(event){
Coral.commons.ready(event.detail.item, handleMFAdd);
});

function handleMFAdd(mfItem){
$(mfItem).find("foundation-autocomplete").on("change", showImageInMF);
}

function addImageCard(mField){
var $multiField = $(mField);

_.each($multiField[0].items.getAll(), function(mfItem) {
var $content = $(mfItem.content),
$imgReference = $content.find("foundation-autocomplete");

$imgReference.on("change", showImageInMF);

showImageInMF.call($imgReference[0]);
});
}

function showImageInMF(){
var $imageField = $(this),
$fieldWrapper = $imageField.closest("coral-multifield-item"),
imageUrl = this.value,
fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);

imageUrl = imageUrl + "/_jcr_content/renditions/cq5dam.thumbnail.319.319.png";

if($fieldWrapper.find("." + IMAGE_PREVIEW_CARD).length > 0){
$fieldWrapper.find("." + IMAGE_PREVIEW_CARD).remove();
}

$.ajax(imageUrl).done(function(){
$(getCardContent(imageUrl, fileName)).appendTo($fieldWrapper);
});
}
}

function getCardContent(imageUrl, fileName){
return '

' + '' + '' + '' + '' + fileName + '' + '' + '' + '

';
}

function addImagePreviews(){
$(IMAGE_REF_SELECTOR).each(function(index, imageField){
Coral.commons.ready(imageField, function(){
showImage.call(imageField);
$(imageField).on("change", showImage);
});
});

function showImage(){
var $imageField = $(this),
$fieldWrapper = $imageField.parent(),
imageUrl = this.value,
fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);

if(!$fieldWrapper.hasClass("coral-Form-fieldwrapper")){
return;
}

if($fieldWrapper.find("." + IMAGE_PREVIEW_CARD).length > 0){
$fieldWrapper.find("." + IMAGE_PREVIEW_CARD).remove();
}

imageUrl = imageUrl + "/_jcr_content/renditions/cq5dam.thumbnail.319.319.png";

$.ajax(imageUrl).done(function(){
$(getCardContent(imageUrl, fileName)).appendTo($fieldWrapper);
});
}
}

function isFragmentEditorPage() {
return (window.location.pathname.indexOf(FRAGMENT_EDITOR_PAGE) >= 0)
|| (window.location.pathname.indexOf(EDITOR_PAGE) >= 0);
}
}(jQuery, jQuery(document)));

Read Full Blog

AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments

Q&A

Please use this thread to ask the related questions.

[CedricHuesler]

AEM as a Cloud Service 2021.04+ will add thumbnail preview for the Content Reference data type - look for the "Show Thumbnail" option in the Content Fragment Model Editor.