Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Load image path from node

Avatar

Level 4

Hi,
I have image component with uploaded image in it and I need to get path to that image so I can output it somewhere else.

For example: I have following node: "/content/myproject/mysite/mypage/mysubpage/jcr:content/imgcomp/file/jcr:content" and I need to output this image to <img> tag in my page. What should I do to add this functionality to my code?

String path = properties.get("pathToNodes", "");      //get path to nodes i want to work with if(path.length() == 0){ out.println("Enter path to nodes"); return; } try{ Node node = resourceResolver.adaptTo(Session.class).getNode(path); NodeIterator iterator = node.getNodes(); String currentPath = currentPage.getPath(); String[] titles = new String[PER_PAGE]; String[] intros = new String[PER_PAGE]; String[] images = new String[PER_PAGE]; String[] links = new String[PER_PAGE]; int i = 0; for(int j = 0; iterator.hasNext(); j++){ /* We want to print only the content of nodes on one page. So if we are not reading the nodes we want we just skip them */ if(i < (pageNum*PER_PAGE)-PER_PAGE){ iterator.nextNode(); continue; /* If we've already read all the nodes we want we can break the for */ }else if(i > pageNum*PER_PAGE){ break; } Node tmpNode = iterator.nextNode(); String tmpPath = tmpNode.getPath(); if(tmpPath.contains("jcr:content")) continue; if(tmpPath.contains(currentPath)){ continue; } tmpNode = tmpNode.getNode("jcr:content"); String[] splitted = tmpPath.split("/"); for(int k = 4; j k splitted.length; k++){ links[i]+= "/"+splitted[k]; } links[i]+=".html"; titles[i] = tmpNode.getNode("ctitle").getProperty("text").getString(); intros[i] = tmpNode.getNode("intro clr").getProperty("text").getString(); i++; } }catch(Exception e){ log.error("Error during articles output. "+e.getMessage()); }

 

Thanks for any help

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hello, this is an example of how the normal cq way of drawing an image from an image component looks like.
I do not really undestand how and where you would have you above code but once you have the right node you could utilize this functionality in this way:

 

<% //First of we want to get the resource at the correct path.. this should be the path of the imagecomponent node Resource res = resourceResolver.getResource("path of the image node"); //Then we use the standard CQ image class to create a new image from this resource Image image = New Image(res); //These are the things that the default image component would add to an image image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image"); image.loadStyleData(currentStyle); image.setSelector(".img"); image.setDoctype(Doctype.fromRequest(request)); //... do more things if you want %> <%-- When you want to draw the image on the page later on --%> <div class="myimagediv"> <% //Here we utilize the draw method of image and draws the image to the page image.draw(out); %> </div>

 

The thing is that if you wanted to have that code and use it in a jsp page I would strongly reccomend that you implement a custom tag for this, alternatively you own handling java class for this that you could use to skip all that logic on the jsp level. It could then be that you get the image nodes from your own created class via:
 

//Simple example of a java class handling the logic... <% MyClass myClass = new Myclass(INIT PARAMETERS HERE); for(Image image : myClass.getImages()){ %> <div class="imageClass"> <%= image.draw(out) %> </div> <% } %>

I hope this helped you some..
More information would be avaliable on this page : http://dev.day.com/docs/v5_1/html-resources/cq5_howto_website/ch01s13.html

where they explain how you create an image component in CQ/AEM.

Regards
/Johan

View solution in original post

2 Replies

Avatar

Correct answer by
Level 7

Hello, this is an example of how the normal cq way of drawing an image from an image component looks like.
I do not really undestand how and where you would have you above code but once you have the right node you could utilize this functionality in this way:

 

<% //First of we want to get the resource at the correct path.. this should be the path of the imagecomponent node Resource res = resourceResolver.getResource("path of the image node"); //Then we use the standard CQ image class to create a new image from this resource Image image = New Image(res); //These are the things that the default image component would add to an image image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image"); image.loadStyleData(currentStyle); image.setSelector(".img"); image.setDoctype(Doctype.fromRequest(request)); //... do more things if you want %> <%-- When you want to draw the image on the page later on --%> <div class="myimagediv"> <% //Here we utilize the draw method of image and draws the image to the page image.draw(out); %> </div>

 

The thing is that if you wanted to have that code and use it in a jsp page I would strongly reccomend that you implement a custom tag for this, alternatively you own handling java class for this that you could use to skip all that logic on the jsp level. It could then be that you get the image nodes from your own created class via:
 

//Simple example of a java class handling the logic... <% MyClass myClass = new Myclass(INIT PARAMETERS HERE); for(Image image : myClass.getImages()){ %> <div class="imageClass"> <%= image.draw(out) %> </div> <% } %>

I hope this helped you some..
More information would be avaliable on this page : http://dev.day.com/docs/v5_1/html-resources/cq5_howto_website/ch01s13.html

where they explain how you create an image component in CQ/AEM.

Regards
/Johan

Avatar

Level 10

This article will help too. It talks about getting assets from the DAM and displaying the image:

http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-aem-dam-image-component.html