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?
Solved! Go to Solution.
You could add a path browser(with name ./image/FileReference) in the page properties to select the image from dam. Something like this.
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,
This one is spot on, and instead of pathbrowser we can use pathfield, but your answer it spot on. Thanks.
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
Hi Priyanka,
Could you please give the assetpicker complete path.
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,
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 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
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
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 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
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
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
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies