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

    CQ5 image gallery component

    suvasishm

      Hi,

       

      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.

       

      Thanks.

        • 1. Re: CQ5 image gallery component
          suvasishm Community Member

          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 Adobe Employee

            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 Community Member

              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
                JasonLLee

                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?

                 

                Thanks!

                Jason

                • 5. Re: CQ5 image gallery component
                  JasonLLee Community Member

                  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.setSelector(".img");

                  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 Community Member

                    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()%>">

                            </a>

                        </div>   

                     

                    <%  } %>

                     

                    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!!

                     

                    Thanks.

                    • 7. Re: CQ5 image gallery component
                      JasonLLee Community Member

                      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?

                       

                      Cheers!

                      Jason

                      • 8. Re: CQ5 image gallery component
                        suvasishm Community Member

                        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.