Search code examples
jspadobeaem

Adobe cq 5.5 Dialog box with drag & drop images functionality


I have been working on Adobe CQ5.5 custom components development. The problem I am facing is to add multiple drag and drog images in a dialog box to be mapped to jcr content.


Solution

  • Sounds like you're trying to have two image tabs in one component dialog. The easiest way to do this is just to copy the image node from /libs/foundation/components/page/dialog/items/tabs/items/image into your dialog using CRXDE lite.

    There's a catch however. If you try to put two images in one component dialog, you will notice that the dialog does not properly display one of the images (probably whatever one is not named “image”). I ran into this issue adding a page thumbnail image in addition to the default image.

    There are two reasons for this misbehavior. First, the requestSuffix property of the second image must be different than the first. You would think this would be sufficient to fix the problem, and it should be, but for some reason CQ helpfully doesn’t create a sling:resourceType property on (these particular) image content nodes, so the request still won’t resolve properly in the dialog. It appears to be inferred correctly in the case of the node named “image”, but not in any other case. This means you have to go manually add this property:

    sling:resourceType=foundation/components/image
    

    to the second image’s content node. Again, you will also need to change the value of the requestSuffix property in the image dialog properties to something else, for example: “/thumbnail.img.png”. The slash at the start of the thumbnail one is also necessary. (the default value is “.img.png”—the default image component appears to get special treatment so this isn’t an obvious fix)