Uploading thumbnail for a page from DAM in AEM 6.3 | Community
Skip to main content
manish_anand
manish_anand
Level 3
December 11, 2017
Solved

Uploading thumbnail for a page from DAM in AEM 6.3

  • December 11, 2017
  • 31 replies
  • 21311 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by rmahendra

    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,

    31 replies

    Show previous replies
    G
    Galaxy30
    November 13, 2018

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

      priyankabiswal-
      priyankabiswal-
      Level 2
      January 17, 2019

      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
        kalyan_chakrav1
        Level 2
        February 12, 2019

        Hi Priyanka,

        Could you please give the assetpicker complete path.

        Thanks & Regards,

        Kalyan

          priyankabiswal-
          priyankabiswal-
          Level 2
          February 16, 2019

          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
            kalyan_chakrav1
            Level 2
            February 17, 2019

            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

              K
              kalyanc42390873
              Level 2
              May 6, 2019

              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

                K
                kalyanc42390873
                Level 2
                May 6, 2019

                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
                  PriyankaBiswal
                  Level 2
                  May 6, 2019

                  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
                    PriyankaBiswal
                    Level 2
                    May 6, 2019

                    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

                      K
                      kalyanc42390873
                      Level 2
                      May 6, 2019

                      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

                        Show more replies
                        Terms & ConditionsAccessibility statement

                        Loading footer...