Uploading thumbnail for a page from DAM in AEM 6.3

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

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

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

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

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

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

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

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

Hi Priyanka,

Could you please give the assetpicker complete path.

Thanks & Regards,

Kalyan

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