Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

Avatar

Administrator

BlogImage.jpg

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Reply

Avatar

Employee

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.