by Dheeraj Khanna


November 27, 2013

I recently got a requirement in which I had to build a component in which the user can Drag and Drop 2 main images (e.g.: hero) and 3 sub images ( icons,buttons,logos etc). The main requirement was being able to preview these images while the author is creating content for that page.

I got it working after few trials and I am sharing the same.

Environment: CQ561

1. Create a single image component extending the OOTB (xtype=’html5smartimage’) image component. This should be fairly simple and if you need any information on this leave a comment and I can help.

Screen Shot 2013-11-27 at 4.37.12 PM


2. Now create another tab in your component structure by copy/pasting your current working image cq:Panel. For E.g.: in my case I copied /apps/blog/components/content/hero/dialog/items/items/imagetab1 and pasted it under /apps/blog/components/content/hero/dialog/items/items/ to create /apps/blog/components/content/hero/dialog/items/items/imagetab2

Screen Shot 2013-11-27 at 4.42.23 PM


3. Next to avoid confusion I also renamed the image cq:Widget at /apps/blog/components/content/hero/dialog/items/items/imagetab2/items/image to /apps/blog/components/content/hero/dialog/items/items/imagetab2/items/image4

Screen Shot 2013-11-27 at 4.44.59 PM


4. Now we will have to update the properties under image4 cq:Widget (/apps/blog/components/content/hero/dialog/items/items/imagetab2/items/image4) to make this work.


table { }td { padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 12pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri,sans-serif; vertical-align: bottom; border: medium none; white-space: nowrap; }

Property Name New Value
cropParameter ./image4/imagecrop
fileNameParameter ./image4/fileName
fileReferenceParameter ./image4/fielReference
name ./image4/image4file
rotateParameter ./image4/imageRotate

Screen Shot 2013-11-27 at 5.12.56 PM


5. Now when you go back to your content page you should have 2 different tabs and both having the image drag and drop functionality. You can extend this concept for more images as long as you make sure the properties are updated correctly for the image cq:Widget.

Screen Shot 2013-11-27 at 5.19.22 PM                                            Screen Shot 2013-11-27 at 5.19.11 PM


  • By Mary - 12:03 AM on December 2, 2013  

    Thanks so much for this. I’ve been working on this all day, and this is clearer than many examples I have seen.

    My real issue is how to capture the image paths for these different images in the page or component preview – we use “fileReference” and that will only work for one image.

    Can you extend this to show how it is called in a page?

    Many Thanks, Mary

    • By Dheeraj Khanna - 2:23 PM on December 3, 2013  

      Hope this helps. Try this snippet of code in your component’s jsp.

      Node node = null;
      PropertyIterator props=null;
      if (node.getProperties()!=null)
      props = node.getProperties();
      for (Node n1 : JcrUtils.getChildNodes(node)){
      String imagePath = n1.getPath().toString();
      Resource imageResource = resourceResolver.getResource(imagePath);
      Node imageNode = imageResource.adaptTo(Node.class);
      ValueMap imageNodeProps = imageResource.adaptTo(ValueMap.class);
      String imageName = null;
      imageName= imageNodeProps.get("fileReference", "None");