Expand my Community achievements bar.

SOLVED

Use OOB Image core component in multifield.

Avatar

Community Advisor

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

  

1 Accepted Solution

Avatar

Correct answer by
Employee

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

View solution in original post

3 Replies

Avatar

Correct answer by
Employee

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

Avatar

Community Advisor

@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>