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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Uploading thumbnail for a page from DAM in AEM 6.3

Avatar

Level 4

Hi All,

Is there any way to drag and drop an image as a thumnail for a page in page properties in 6.3.

Recently i migrated my application from 6.1 to 6.3.

we had this functionality in 6.1 but now we have only option to upload a thumnail but we cant use any asset from dam for thumbnails.

Any idea?? Am i missing something?

1 Accepted Solution

Avatar

Correct answer by
Employee

You could add a path browser(with name ./image/FileReference) in the page properties to select the image from dam. Something like this.

1373474_pastedImage_0.png

in AEM 63, page properties is opened in a different page instead of a dialog. So you don't have access to the content finder. I am not sure if there is any easier way to have drag and drop,

View solution in original post

0 Replies

Avatar

Level 1

This one is spot on, and instead of pathbrowser we can use pathfield, but your answer it spot on. Thanks.

Avatar

Level 2

You can try with commerce with/gui/components/common/assetpicker some additional clientLibs as mentioned below.

<assetpicker
 
jcr:primaryType="nt:unstructured"
 
jcr:title="Thumbnail"
 
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
 
<items jcr:primaryType="nt:unstructured">
 
<column
 
jcr:primaryType="nt:unstructured"
 
sling:resourceType="granite/ui/components/coral/foundation/container">
 
<items jcr:primaryType="nt:unstructured">
 
<section
 
jcr:primaryType="nt:unstructured"
 
sling:resourceType="/libs/granite/ui/components/coral/foundation/form/fieldset">
 
<items jcr:primaryType="nt:unstructured">
 
<thumbnail
 
jcr:primaryType="nt:unstructured"
 
sling:resourceType="cq/gui/components/coral/common/wcm/pagethumbnail"
 
page="${empty param.item ? requestPathInfo.suffix : param.item}"/>
 
<edit
 
jcr:primaryType="nt:unstructured"
 
sling:resourceType="commerce/gui/components/common/assetpicker"
 
name="./image/fileReference"
 
previewTarget=".foundation-layout-thumbnail-image coral-card-asset img"
 
text="Change"
 
type="image"/>
 
<charset
 
jcr:primaryType="nt:unstructured"
 
sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
 
ignoreData="{Boolean}true"
 
name="_charset_"
 
value="utf-8"/>
 
</items>
 
</section>
 
</items>
 
</column>
 
</items>
</assetpicker>

And the extraClientLibs property (multi) in your dialog node as below,

extraClientlibs="[cq.common.wcm,core.wcm.page.properties,cq.wcm.msm.properties,cq.authoring.editor.plugin.commerce]"

Output:

Asset Picker

1670074_pastedImage_0.png

Thumbnail Preview

1670081_pastedImage_2.png

Hope this helps!

Thanks,

Priyanka

Avatar

Level 2

Hi Priyanka,

Could you please give the assetpicker complete path.

Thanks & Regards,

Kalyan

Avatar

Level 2

Hi Kalyan,

The exact path of the asset picker component is /libs/commerce/gui/components/common/assetpicker .

Which is also, mentioned in the resourceType property of edit node in the above example.

Also, you can follow the instructions to use it in your application from the below Adobe blog.

How to allow page thumbnail selection from /content/dam

Thanks,

Priyanka

Avatar

Level 2

Hi Priyanka,

With the above approach using assetpicker iam getting 2 issues.

Issue 1 : I need to use ” Generate Preview ” along with asset picker.

Issue 2 : In the column view we need to update the uploaded image in the thumbnail tab of page properties.

Could you please help me on this.

Thanks & Regards,

Kalyan

Avatar

Level 3

Hi Priyanka,

When i use the assetpicker it is not working as click is not working for asset picker to display the dialog. Could you please help me on this.

Thanks & Regards,

Kalyan

Avatar

Level 3

Hi priyankabiswal-AtAznR​,

When i use the assetpicker it is not working as click is not working for asset picker to display the dialog. Could you please help me on this.

Thanks & Regards,

Kalyan

Avatar

Level 2

Basically you need to add the extraClientLibs property (multi) in your dialog node as below

extraClientlibs="[cq.common.wcm,core.wcm.page.properties,cq.wcm.msm.properties,cq.authoring.editor.plugin.commerce]"

Since cq.authoring.editor.plugin.commerce is reponsible for the Click event for Asset Picker.

1747166_pastedImage_8.png

You can follow ,

How to allow page thumbnail selection from /content/dam

How to use the AEM Asset Selector in a coral3 dialog? - Stack Overflow

Avatar

Level 2

Hi Kalyan,

Can you please attach a scrrenshot of the issue you are facing. Basically You need to hide one Thumbanil Tab from Page properties by using hideresource proerty.

Also, You can follow below blogs 

How to allow page thumbnail selection from /content/dam

How to use the AEM Asset Selector in a coral3 dialog? - Stack Overflow

Avatar

Level 3

Hi priyankabiswal-AtAznR​,

Followed steps as per the above. Asset picker is not working. I tried using pathtobrowser and pathtofield. It is working but it is not getting updated in the thumbnail icon when we select the image from the dialog of pageproperties and it is not getting updated with the new image of thumbnail in the columnpreview.PFA image screenshot.

assetpicker.png

assetpicker1.png

assetpicker2.PNG

Thanks & Regards,

Kalyan

Avatar

Level 2

Hi priyankabiswal-AtAznR​,

As the thumbnail image is not getting updated in the column view of the page. Could you please help me on this.

Thanks & Regards,

Kalyan