Use OOB Image core component in multifield.

[Umesh_Thakur]

Dear Members,

I have a requirement to use image in a multifield and all those authored image needs to be loaded lazily, so for this I wanted to use OOB image core component in my component as it supports lazy loading.

I am facing problem with the implementation - when I make my component a proxy of core component it adds one asset tab through that only I am able to add image but not in multifield so can anyone please help me with the solution to use OOB image core component in multifield.

Thanks

Umesh Thakur

[vanegi · Accepted solution]

Please check if this solution suites your requirement-

Experiencing Adobe Experience Manager - Day CQ: AEM 62 - Touch UI Composite Image Multifield

It uses granite/ui/components/foundation/form/fileupload and works fine on 6.4.3.

Here is a sample implementation that you can refer to:

<file
	jcr:primaryType="nt:unstructured"
	sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
	autoStart="{Boolean}false"
	class="cq-droptarget"
	fieldLabel="Image asset"
	fileNameParameter="./fileName"
	fileReferenceParameter="./fileReference"
	mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
	multiple="{Boolean}false"
	name="./file"
	title="Upload Image Asset"
	uploadUrl="${suffix.path}"
	useHTML5="{Boolean}true"/>

aem-core-wcm-components/.content.xml at master · adobe/aem-core-wcm-components · GitHub

Alternatively, you can use granite/ui/components/coral/foundation/form/fileupload, if applicable:

FileUpload — Granite UI 1.0 documentation

[ChitraMadan]

Hi @Umesh_Thakur ,

Please check these 2 posts, if they help

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/image-drag-and-drop-in-aem...

http://experience-aem.blogspot.com/2019/04/aem-6440-touch-ui-composite-image-multifield.html

[Shashi_Mulugu]

@Umesh_Thakur You create a container component say "Image Gallery" with a Responsive grid/parsys inside it, allow only image inside it to be authored using policy.

Spoiler

<sly data-sly-test="${wcmmode.edit}" data-sly-use.allowed="com.day.cq.wcm.foundation.AllowedComponentList"></sly>
<div data-sly-use.api="com.day.cq.wcm.foundation.model.responsivegrid.ResponsiveGrid" class="${api.cssClass} ${allowed.cssClass}">
<sly data-sly-test.isAllowedApplicable="${allowed.isApplicable}"
data-sly-test="${isAllowedApplicable}"
data-sly-use.allowedTemplate="/libs/wcm/foundation/components/parsys/allowedcomponents/allowedcomponents-tpl.html"
data-sly-call="${allowedTemplate.allowedcomponents @ title=allowed.title, components=allowed.components}"></sly>
<sly data-sly-test="${!isAllowedApplicable}" data-sly-repeat.child="${api.paragraphs}" data-sly-resource="${child.path @ resourceType=child.resourceType, decoration='true', cssClassName=child.cssClass}" />

<sly data-sly-test="${!isAllowedApplicable && wcmmode.edit}"
data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/responsivegrid/new', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}" />
</div>