Use OOB Image core component in multifield. | Community
Skip to main content
Umesh_Thakur
Community Advisor
Umesh_ThakurCommunity Advisor
Community Advisor
July 27, 2020
Solved

Use OOB Image core component in multifield.

  • July 27, 2020
  • 3 replies
  • 1912 views

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

  

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by vanegi

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

3 replies

vanegi
Adobe Employee
vanegiAdobe EmployeeAccepted solution
Adobe Employee
July 27, 2020

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

    Shashi_Mulugu
    Community Advisor
    Shashi_MuluguCommunity Advisor
    Community Advisor
    July 27, 2020

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

     

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

      Terms & ConditionsAccessibility statement

      Loading footer...