Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Use OOB Image core component in multifield.

Avatar

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile
Umesh_Thakur
MVP

27-07-2020

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

  

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct Reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct Reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

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

Answers (2)

Answers (2)

Avatar

Avatar
Boost 250
MVP
ChitraMadan
MVP

Likes

271 likes

Total Posts

165 posts

Correct Reply

67 solutions
Top badges earned
Boost 250
Establish
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 250
MVP
ChitraMadan
MVP

Likes

271 likes

Total Posts

165 posts

Correct Reply

67 solutions
Top badges earned
Boost 250
Establish
Ignite 1
Give Back 5
Give Back 3
View profile
ChitraMadan
MVP

27-07-2020

Avatar

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

232 likes

Total Posts

294 posts

Correct Reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

232 likes

Total Posts

294 posts

Correct Reply

67 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile
Shashi_Mulugu
MVP

27-07-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.

 

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>