Get information about html5smartimage

[Jakolcz]

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.

[Jakolcz · Accepted solution]

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.

[ravindrareddydr]

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 

[Ojjis]

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

[Jakolcz]

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?

[Scott_Brodersen]

The Adaptive Image component is similar... some hints about how it works is here:

http://dev.day.com/docs/en/cq/current/developing/mobile/responsive.html#Understanding%20the%20Adapti...

scott

[Ojjis]

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

[Jakolcz]

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

[Ojjis]

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 :)