Adobe Experience Manager

Adobe Experience Manager

ANNOUNCEMENT: Service Pack 1 for Experience Manager 6.0 now available
  • -

Adobe Experience Manager (AEM) 6.0 Service Pack 1 (SP1) is now generally available.

It is recommended that all users of AEM 6.0 install SP1.

In addition to other fixes and improvements, SP1 corrects some issues which cause disk space to fill up rapidly in an Oak TarMK instance. If you have any questions or concerns about this issue, please join the discussion hereExperience Manager 6.0 - Oak TarMK uses too much disk space

You can download SP1 from Package Share.

For more information about SP1, see the release notes and join in on the discussion here: AEM 6.0 Service Pack

September 16, 2014
Get information about html5smartimage
Tags: CQ
Jakolcz asked... 05:17 AM | August 21, 2013

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

Thanks for any help.

Solved

03:43 AM

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.

Answers

05:38 AM

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

06:04 AM

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?

08:51 AM

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

08:41 AM

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 

09:59 AM

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%20Adaptive%20Image%20Component%20Servlet

 

scott

03:04 AM

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

04:37 AM

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:

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