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
Solved! Go to Solution.
Views
Replies
Total Likes
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:
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:
@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.