Image scaling with Jahia part 1

In the previous blog post about the rule engine we have illustrated how it interacts with Jahia and shown that the rule engine acts upon changes within the content repository and is integrated at a JCR event listening level. Since all content is stored within the JCR this also includes images so it’s possible to do image manipulation each time a user uploads content into Jahia.

One of the reasons why we might manipulate a image is to ensure that we don’t send back enormously large images uploaded by the content managers and re-scale them back to a maximum size. Other reasons why we want to manipulate a image is when we want to watermark or when a module requires a image to be re-scaled to some predefined size like thumbnails or always square, like profile images.

Image manipulation in the document manager

During installation of Jahia, you might have noticed a question on the Document Management Tools dialog what sort of tools you have available. One of them is your Image Magick installation and you can set this to the path of your IM installation: If you missed this during installation and the install tool didn’t found it’s location correctly you can always set it later.

Simple edit the file tomcat/webapps/ROOT/WEB-INF/etc/config/jahia.properties and modify the variables under Image conversion Service

######################################################################
### Image conversion Service #########################################
######################################################################
# The image service to use
# Native java service : "ImageJAndJava2DImageService"
# Set to "ImageMagickImageService" to use ImageMagick. You'll then have to set
# the imageMagick path
imageService = ImageMagickImageService
# The path to image magick and exiftools
# For windows : C:\\Programs\\ImageMagick;C:\\Programs\\exiftool
imageMagickPath = /opt/local/bin

For image manipulation Jahia can use both Image Magick or GraphicsMagick and the library im4java is used. If for some reason it’s impossible to install any of the two libraries Jahia can use a native version, but be aware that some functions image manipulation function might not work very well due to it’s limited capabilities, notably transparent PNG’s might show odd results.

Jahia’s default thumbnails rule

As you may have noticed, Jahia already has a built in rule to process any updated image and store extracted meta data in the JCR, additionally what happens is that Jahia will create two thumbnails of size 150 and 350px so in the backend it can show previews of uploaded images. To see what Jahia created for you simply go to the URL http://localhost:8080/tools/jcrBrowser.jsp. Then under /sites/<sitename>/files find a image and click on that image.

There are two thumbnail nodes created for a uploaded image from my digital camera. You can even call them up by appending to the node path of the image the ’t’ parameter. For example: http://localhost:8080/files/{workspace}/sites/mySite/files/DSC06733.jpg?t=thumbnail2

Examples

Let’s create some example to demonstrate some of the concepts.

Example 1:

Task: When a image is uploaded, rescale this image to 800px Re-sizing a photo is common practise whenever you upload general photo’s and you want to display a smaller size, and a bigger size, but not the uploaded version that can potentially be big.

This is very simple to do, Jahia already has a build in image service we can use, all we have to do is create a rule for this task. I actually just copied the rule over from /webapps/ROOT/modules/default/META-INF/rules.drl and modified it to fit my needs

rule "Blog Image Scaling - 800px"
    salience 25
    when
        A file content has been modified
             - the mimetype matches image/.*
    then
        > long timer = System.currentTimeMillis();
        Create an image "800px" of size 800
        Dispose image
        Log "Blog Image Scaling 800px : Image " + node.getPath() + " updated in " + (System.currentTimeMillis() - timer) + " ms"
end

When we upload the image, now a 800px version will be created and can be called with the following URL: http://localhost:8080/files/{workspace}/sites/mySite/files/DSC06733.jpg?t=800px

Example 2:

Task: Create a Crop-scaled version of a image of an image
Crop scaling is often required for profile style pictures. This will ensure that nobody can upload incorrectly sized photo’s and that a profile page always looks nice and tidy. Essentially it take’s the maximum square of a image and scale’s it down to a required size.

Again we need a rule for this but unfortunately there wasn’t a ready made consequence for us. Luckily, we can still call the ImageService directly and do our task, here is how it will look like:

rule "Blog Image Scaling - square 120px"
    salience 25
    when
        A file content has been modified
             - the mimetype matches image/.*
    then
        > long timer = System.currentTimeMillis();
        > imageService.addThumbnail(node, "sq120px", 120, true, drools);
        Dispose image
        Log "Blog Image Scaling square 120px : Image " + node.getPath() + " updated in " + (System.currentTimeMillis() - timer) + " ms"
end

To load the square thumbnail we can use this URL: http://localhost:8080/files/{workspace}/sites/mySite/files/DSC06733.jpg?t=800px

In the next blog post we will take this a step further be creating our own node type and re-scale a image according to the user settings. We will also create a special folder where you can upload images and they will be re-sized to a size as set by a administrator.
 

This blogpost has been written by R. van Twisk