<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments |  AEM Community Blog Seeding in Adobe Experience Manager Discussions</title>
    <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-cloud-service-show-image-previews-in-path-field-and/m-p/405420#M28617</link>
    <description>&lt;P&gt;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.&lt;/P&gt;</description>
    <pubDate>Tue, 27 Apr 2021 06:37:25 GMT</pubDate>
    <dc:creator>CedricHuesler</dc:creator>
    <dc:date>2021-04-27T06:37:25Z</dc:date>
    <item>
      <title>AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments |  AEM Community Blog Seeding</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-cloud-service-show-image-previews-in-path-field-and/m-p/405174#M28606</link>
      <description>&lt;P&gt;&lt;IMG style="margin-right: auto; margin-left: auto; width: 100%; height: auto;" class="image-1 jive-image" src="https://1.bp.blogspot.com/-Gej01yiFqFM/YIMEARCLVQI/AAAAAAAA9C0/H0BQ1GdVuosrSpAE1gHe4mdMfAcBD-N9QCLcBGAsYHQ/w640-h254/424-no-image-preview.png" border="0" alt="BlogImage.jpg" /&gt;&lt;/P&gt;
&lt;H3&gt;&lt;FONT size="5"&gt;&lt;A href="http://experience-aem.blogspot.com/2021/04/aem-cloud-service-show-image-previews-path-field-multifield-content-fragments.html" target="_blank"&gt;AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments&lt;/A&gt; &lt;/FONT&gt;&lt;FONT size="3"&gt;by Sreekanth Choudry Nalabotu&lt;/FONT&gt;&lt;/H3&gt;
&lt;H3&gt;&lt;FONT size="5"&gt;Abstract&lt;/FONT&gt;&lt;/H3&gt;
&lt;PRE style="white-space: pre-wrap; word-break: keep-all; background: bisque; font-family: inherit;"&gt;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 &amp;gt; 0){
$fieldWrapper.find("." + IMAGE_PREVIEW_CARD).remove();
}

$.ajax(imageUrl).done(function(){
$(getCardContent(imageUrl, fileName)).appendTo($fieldWrapper);
});
}
}

function getCardContent(imageUrl, fileName){
return '&lt;/PRE&gt;
&lt;DIV class="' + IMAGE_PREVIEW_CARD + '"&gt;' + '' + '&lt;IMG src="' + imageUrl + '" border="0" /&gt;' + '' + '' + fileName + '' + '' + '' + '&lt;/DIV&gt;
&lt;PRE style="white-space: pre-wrap; word-break: keep-all; background: bisque; font-family: inherit;"&gt;';
}

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 &amp;gt; 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) &amp;gt;= 0)
|| (window.location.pathname.indexOf(EDITOR_PAGE) &amp;gt;= 0);
}
}(jQuery, jQuery(document)));
&lt;/PRE&gt;
&lt;H3&gt;&lt;FONT size="5"&gt;Read Full Blog&lt;/FONT&gt;&lt;/H3&gt;
&lt;H3&gt;&lt;FONT size="3"&gt;&lt;A href="http://experience-aem.blogspot.com/2021/04/aem-cloud-service-show-image-previews-path-field-multifield-content-fragments.html" target="_blank"&gt;AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments&lt;/A&gt;&lt;/FONT&gt;&lt;/H3&gt;
&lt;H3&gt;&lt;FONT size="5"&gt;Q&amp;amp;A&lt;/FONT&gt;&lt;/H3&gt;
&lt;P&gt;&lt;FONT size="3"&gt;Please use this thread to ask the related questions.&lt;/FONT&gt;&lt;/P&gt;</description>
      <pubDate>Fri, 08 Oct 2021 14:28:06 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-cloud-service-show-image-previews-in-path-field-and/m-p/405174#M28606</guid>
      <dc:creator>kautuk_sahni</dc:creator>
      <dc:date>2021-10-08T14:28:06Z</dc:date>
    </item>
    <item>
      <title>Re: AEM Cloud Service - Show Image Previews in Path Field and Multifield of Content Fragments |  AEM Community Blog Seeding</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-cloud-service-show-image-previews-in-path-field-and/m-p/405420#M28617</link>
      <description>&lt;P&gt;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.&lt;/P&gt;</description>
      <pubDate>Tue, 27 Apr 2021 06:37:25 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-cloud-service-show-image-previews-in-path-field-and/m-p/405420#M28617</guid>
      <dc:creator>CedricHuesler</dc:creator>
      <dc:date>2021-04-27T06:37:25Z</dc:date>
    </item>
  </channel>
</rss>

