8 Replies Latest reply on Feb 6, 2013 8:37 PM by suvasishm

    CQ5 image gallery component




      I'm a newbee in CQ5. I need to create an image gallery similar to http://goo.gl/RGBXs. How can I proceed towards that?


      I was thinking of taking a DAM folder path from the content author as an input and using that I would create the block by iterating all the images contained within that folder. Is that a correct way? If so, what API I can use to iterate through the image files contained in a DAM folder?


      Any help or response is highly appretiated.



        • 1. Re: CQ5 image gallery component
          suvasishm Level 1

          In other words, suppose I have path = "/content/dam/myproject/photo_gallery";


          How can I iterate through the assets (image files) within that path in the repository?

          • 2. Re: CQ5 image gallery component
            Sham HC Level 7

            Assuming resource pointing to /content/dam/myproject/photo_gallery  something like below should work


            Iterator<Resource> assetList=resolver.listChildren(resource);

                    while (assetList.hasNext()) {

                        Resource child = assetList.next();

                        Asset asset = child.adaptTo(Asset.class);

                         if (asset != null) {




            • 3. Re: CQ5 image gallery component
              suvasishm Level 1

              Hi Sham,


              Thanks for your response.


              I could solve it by the following way:


              String path = "/content/dam/hnodemo/photo_gallery";

              resource = resourceResolver.getResource(path);

              Node node = WCMUtils.getNode(resource);

              NodeIterator iterator = node.getNodes();


              while(iterator.hasNext()) {

                            Node child = iterator.nextNode();




              • 4. Re: CQ5 image gallery component

                Hi suvsm, now that you have the child node (the image in the DAM), what is the subsequent code to display the image.


                And did the image display properly on the publisher?




                • 5. Re: CQ5 image gallery component
                  JasonLLee Level 1

                  Hi Sham - I followed this style ofiginally too but I could not get the image to display.

                  Can you fill in the ... in your post, please?


                  my code below doesn't seem to work:


                  if (asset != null) {

                  Image myImage = new Image(asset or resource - you named it child)


                  image.draw(out);  //this doesn't work



                  and even just using the image.getSrc() in my image tag,


                  <ima src="<%=image.getSrc()%>/>


                  will not work properly if my the path to the DAM, /content/dam/* is blocked on the publisher.

                  • 6. Re: CQ5 image gallery component
                    suvasishm Level 1

                    Hi Jason,


                    Following is the code I used to display the image (bold letter) and it worked!!


                    Simply use child.getPath() to get image path.



                        while(iterator.hasNext()) {

                            Node child = iterator.nextNode();


                        <div class="someClass">

                            <a href="<%=child.getPath()%>">

                                <img src="<%=child.getPath()%>">




                    <%  } %>


                    and I used lightbox to show full image...and for that you need to have something like the following i.e. including necessary js libraries before the above code.


                    Hope it helps you!!



                    • 7. Re: CQ5 image gallery component
                      JasonLLee Level 1

                      Hi suvsm!  Thanks for replying!


                      I've done the same code too...which helps confirms that I'm not going crazy and my approach isn't totally wrong.


                      But if this works for you then you also know that the path to your DAM, "/content/dam/hnodemo/photo_gallery", is open to the world on your publisher, right?




                      • 8. Re: CQ5 image gallery component
                        suvasishm Level 1

                        Yes. But the physical path is in the repository which is access protected. So no worry what the world could see from the source code of the page.