Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Get information about html5smartimage

Avatar

Level 4

I'm creating component with html5smartimage and few fields for aditional info. How can I get information(especially URL) about the image? I know how to access pathfield/textfield info but I don't know how to get html5smartimage info.
This is my html5smartimage
[img]html5smartimage.png[/img]

Thanks for any help.

1 Accepted Solution

Avatar

Correct answer by
Level 4

OK, I finally solved this... It was so simple that I should slap myself... The solution is this

String imgPath = properties.get("imageReference", "");

Thank all of you guys for trying to help me.

View solution in original post

8 Replies

Avatar

Correct answer by
Level 4

OK, I finally solved this... It was so simple that I should slap myself... The solution is this

String imgPath = properties.get("imageReference", "");

Thank all of you guys for trying to help me.

Avatar

Level 3

We can get Image info using

(1) properties.get("image/fileReference","");

(2) Image image = new Image(resource);

image.getFileReference();

check for more com.day.cq.wcm.foundation.Image

 

Note:

  1. CQ.html5.form.SmartImage image = properties.get("image", ""); -- you are not allowed to use widgets API as Java code

​you can use listeners and properties to get value using JS 

Avatar

Level 7

Have you checked the widget api ? There you can search for the class: Class CQ.html5.form.SmartImage

http://dev.day.com/docs/en/cq/5-6/widgets-api/output/CQ.html5.form.SmartImage.html


Theres quite a lot of info about it there if it is info about the xtype you are looking for.
Regards
Johan

Avatar

Level 4

Thanks for the response. But how can I work with this class? I've tried to use it in my component code but it doesn't work...

<% CQ.html5.form.SmartImage image = properties.get("image", ""); out.println("debug: "+image.getHeight()); %>

but I get this error

CQ.html5.form.SmartImage cannot be resolved to a type

How should I use it?

Avatar

Level 7

Ah ok, didnt really understand what you wanted to do.

Take a look at this. They are using a smartimage xtype for the logo example there:
http://dev.day.com/docs/en/cq/current/howto/website.html

 

<%@include file="/libs/foundation/global.jsp"%><% %><%@ page import="com.day.text.Text, com.day.cq.wcm.foundation.Image, com.day.cq.commons.Doctype" %><% /* obtain the path for home */ long absParent = currentStyle.get("absParent", 2L); String home = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent); /* obtain the image */ Resource res = currentStyle.getDefiningResource("imageReference"); if (res == null) { res = currentStyle.getDefiningResource("image"); } /* if no image use text link, otherwise draw the image */ %> <a href="<%= home %>.html"><% if (res == null) { %>Home<% } else { Image img = new Image(res); img.setItemName(Image.NN_FILE, "image"); img.setItemName(Image.PN_REFERENCE, "imageReference"); img.setSelector("img"); img.setDoctype(Doctype.fromRequest(request)); img.setAlt("Home"); img.draw(out); } %></a>

As you can see they have only used some of the different methods that the Image class have here.
For a full list of what to do with it you can take a look at:

http://dev.day.com/docs/en/cq/current/javadoc/com/day/cq/wcm/foundation/Image.html

/Johan

Avatar

Level 4

Ojjis wrote...

Ah ok, didnt really understand what you wanted to do.

Take a look at this. They are using a smartimage xtype for the logo example there:
http://dev.day.com/docs/en/cq/current/howto/website.html

 

 
  1. <%@include file="/libs/foundation/global.jsp"%><%
  2. %><%@ page import="com.day.text.Text,
  3. com.day.cq.wcm.foundation.Image,
  4. com.day.cq.commons.Doctype" %><%
  5. /* obtain the path for home */
  6. long absParent = currentStyle.get("absParent", 2L);
  7. String home = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);
  8. /* obtain the image */
  9. Resource res = currentStyle.getDefiningResource("imageReference");
  10. if (res == null) {
  11. res = currentStyle.getDefiningResource("image");
  12. }
  13. /* if no image use text link, otherwise draw the image */
  14. %>
  15. <a href="<%= home %>.html"><%
  16. if (res == null) {
  17. %>Home<%
  18. } else {
  19. Image img = new Image(res);
  20. img.setItemName(Image.NN_FILE, "image");
  21. img.setItemName(Image.PN_REFERENCE, "imageReference");
  22. img.setSelector("img");
  23. img.setDoctype(Doctype.fromRequest(request));
  24. img.setAlt("Home");
  25. img.draw(out);
  26. }
  27. %></a>

As you can see they have only used some of the different methods that the Image class have here.
For a full list of what to do with it you can take a look at:

http://dev.day.com/docs/en/cq/current/javadoc/com/day/cq/wcm/foundation/Image.html

/Johan

 

Thank you! But now I have much simplier problem... I can't get the Resource. I'm trying to do it like this
 

<% String propImage = properties.get("image/imageReference", "error"); out.println("propImage: "+propImage); //prints "error" Resource rsrc = resourceResolver.getResource(propImage); Resource res = currentStyle.getDefiningResource("imageReference"); if(rsrc != null) log.info("rsrc: "+rsrc.getPath()); else log.info("rsrc = null");    //this is in log if(res != null) log.info("res "+res.getPath()); else log.info("res = null");     //this in log %>

I have my html5smartimage set just like it's shown here: http://dev.day.com/docs/en/cq/current/howto/website.html which means
[img]http://dev.day.com/content/docs/en/cq/current/howto/website/_jcr_content/par/procedure_17/proc_par/s...

Avatar

Level 7
Ok. Here is how you can get it, This is purely based on the standard image component and it's jsp from CQ in which you use the settings:

[img]pic1.png[/img]

<% Image image = new Image(resource); image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image"); image.loadStyleData(currentStyle); image.setSelector(".img"); // use image script image.setDoctype(Doctype.fromRequest(request)); if (!currentDesign.equals(resourceDesign)) { image.setSuffix(currentDesign.getId()); } //Then you can get the path of the actual image like this //results in eg. /content/dam/mystuff/Images/mypicture.jpg String imagePath = (String) image.getFileReference(); %>

The image.getFileReference method is inherited from com.day.cq.commons.DownloadResource which has loads of other methods as well if you want to get more info about the image/file. Just browse through the documentation

Good luck :)