Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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 🙂