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
BedrockMission!

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

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

25-04-2021

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.

AEM AEMEBlogSeeding Experience Manager

Replies

Avatar

Avatar
Applaud 5
Employee
CedricHuesler
Employee

Likes

4 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
Boost 3
Give Back
Boost 1
Establish
View profile

Avatar
Applaud 5
Employee
CedricHuesler
Employee

Likes

4 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Applaud 5
Boost 3
Give Back
Boost 1
Establish
View profile
CedricHuesler
Employee

26-04-2021

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.