4 Replies Latest reply on May 20, 2013 6:44 AM by Mshajiahmed

    Re-size an image in using the Image class?

    stewa52 Level 1

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

        • 2. Re: Re-size an image in using the Image class?
          orotas Level 4

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




          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/1323947520848.jpg


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

          • 3. Re: Re-size an image in using the Image class?
            Sham HC Level 7

            Good info. Thanks for right direction.

            • 4. Re: Re-size an image in using the Image class?
              Mshajiahmed Level 4

              There is a default servlet available which does resizing, you can find this here

              /libs/foundation/src/impl/src/main/java/com/day/cq/wcm/foundation/profile/impl/ProfileImag es.java

              This works fine if you use default version and call image like this

              <img  src="/content/dam/geometrixx/portraits/scott_reynolds.jpg.prof.thumbnail.jpg">

              I have created another thread for extension of this servlet, please view the following thread