Uploading thumbnail for a page from DAM in AEM 6.3

[manish_anand]

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?

[Galaxy30]

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

[priyankabiswal-]

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

Thumbnail Preview

Hope this helps!

Thanks,

Priyanka

[kalyan_chakrav1]

Hi Priyanka,

Could you please give the assetpicker complete path.

Thanks & Regards,

Kalyan

[priyankabiswal-]

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

[kalyan_chakrav1]

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

[kalyanc42390873]

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

[kalyanc42390873]

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

[PriyankaBiswal]

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.

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

[PriyankaBiswal]

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

[kalyanc42390873]

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.

Thanks & Regards,

Kalyan

[kalyan_chakrav1]

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