Re-size an AEM image using the Image class

[Community_Admin]

Is there a way to resize an image using the com.day.cq.wcm.foundation.Image class?  I wanted to extend the foundation image componet and have it resize to a specific height and width.  Is there a way to change the size of the image before you call image.draw(out) ?

[Community_Admin]

Try using ImageHelper to get a resized layer & then apply

http://dev.day.com/docs/en/cq/current/javadoc/com/day/cq/commons/Image Helper.html

[Community_Admin · Accepted solution]

You also don't want to insert you resizing efforts prior to calling the image.draw method. The draw method doesn't actually render the image,  it draws the HTML img tag that your components print out. If you were to use the ImageHelper to get the layer and resize it that would not actually change the size of the image.

Now that img tag will contain a URL to the image, and that URL will generally look something like this (unless you have customized your image components):

/path/to/your/page/_jcr_content/par/textimage/image.img.jpg/1323947520 848.jpg

This URL is going to trigger a script or servlet that will be responsible for rendering the image. In the example above because the textimage component extends the parbase component and because URL includes the img selector it will end up triggering the servlet at /libs/foundation/components/parbase/img.GET.java. If you go into CRXDE Lite you can go to this file and look at the source code of this servlet and see an example of how it uses the layer to resize the image if that author edited the image in the smart image widget.

You can also see example of servlets that resize and image ot specific preset sizes (as you want to do) you can look at /apps/geometrixx-outdoors/components/product/image/thumbnail.GET.java and /apps/geometrixx-outdoors/components/product/image/nav.GET.java.

So what you would want to do is something like this:

1. Create your own component at /apps/mysite/components/foo
2. Create a servlet at /apps/mysite/components/foo/bar.GET.java - put your logic to resize the image here based on some of the examples
3. Create your component JSP at /apps/mysite/components/foo/foo.jsp
4. Create your component's dialog and in this dialog include a smart image widget - make sure you store your image on component node, not a sub-node. If you store your image on a sub-node you need to make sure the sub-node includes the same resource type as your main node).
5. In your component JSP when you create your foundation Image object make sure to image.setSelector("bar") before you call image.draw()

That should result in an image URL that looks like /path/to/your/page/_jcr_content/par/textimage/image.bar.jpg/132394752 0848.jpg

Those steps aren't tested - so I may have missed something or mistyped something, but it should point you in the right direction.