Abstract

Image processing is a very powerful feature of eZpublish. This article shows you how to combine 24 bit PNG images with ImageMagick via the eZpublish image alias system, and to produce images with pre-rendered rounded corners.

Approaches

There are a number of ways of approaching this problem.

It is possible to overlay a mask (a second image with a transparent centre) in an overlaid div, but this solution has one big drawback: Internet Explorer has patchy support for the only image format which has full alpha support, png24. Which means you are stuck with using a gif, and with jagged edges.

A much better way is to get ImageMagick, one of the graphics processors included with EzPublish, to do the work. It is theoretically possible to get ImageMagick to measure the picture and draw the mask, but this is complicated (if anyone gets it to work please let us know). These discussions may be a good starting place if you feel like taking this to the next level:

http://www.imagemagick.org/Usage/thumbnails/#rounded_border

This section of the ImageMagick useage manual gives details on this, but there are hurdles which would need to be overcome, such as getting ImageMagick in EzPublish to read external vector files (.mvg) and some more discussion here.

http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=8401

For my particular use case we needed the resulting images to conform to an exact size, so rather than tackling the really hard stuff I elected to get ImageMagick to pull a png24 matt image from the design directory and overlay it on the source image. This is a simpler version of the technique described here:

http://www-128.ibm.com/developerw...y/l-graf2/?ca=dgr-lnxw15GraphicsLine
 but as the final image size is pre-determined there is no need to add the corners individually.

Directions

This is what you need to do

Dependencies

The first thing you'll need to do is to establish whether the version of ImageMagick supports the -composite command. In the case of our host, Atvert Systems, we discovered that they were running the default version which shipped with the operating system - 6.0.7.1-16. (and this situation is quite likely for a professional hosting environment where system stability is more of a priority than having the latest versions of all components)

Luckily Karl, who runs Atvert, was very helpful in identifying the problem and he quickly upgraded ImageMagick to version 6.3.2.7-1, which supports the necessary commands.

Images

The next step is to make a test graphic, you can skip this if you are feeling really sure of yourself but I'd recommend it - you'll probably save yourself a few headaches. Make a two layer Photoshop (but make sure you convert the background layer to an normal one in PS's case) or Gimp file, put the word 'front' on one layer and the work 'back' on another, both with transparent backgrounds. Export the two layers as png24s with transparency. Put the 'front' one in your siteaccess images folder - that will eventually be your matt.

You now need to find out the 'fully qualified path' to that folder. It won't be the ftp path. In our case in involved prepending /var/www/html/ to the address you see in an ftp client. It's probably best to contact your hosting provider on this, unless you feel like a lot of guessing.

Settings

Next, open image.ini.append.php. you can do this in either the siteaccess copy or the override copy. Just don't do it in both ! :)

The first thing to add is the filter definition, it goes in the [ImageMagick]
 section:
 

 
This makes a filter called 'rounded', makes the destination go over the source, references the overlay to the top left corner and calls the matt image
The -gravity switch may not be necessary.
Next, make an alias for the image which will use the filter:
 

Finally, add the filters to the alias;

 
The final filter applies the mask.

Save and upload the ini file, go to your EzPublish Online Editor, choose an image (the 'back' one you made earlier) choose the mypicturewitharoundedborder alias from the dropdown and publish. When you are happy that it's working delete the 'front' image and replace it with one that does something useful!

Additional example:

A fully detailed implementation: Applying borders to eZ Publish images using ImageMagick

Special Thanks

Thanks to Bruce Morrison from DesignIT for his invaluable help in wrangling ImageMagick's sometimes slightly-less-than-intuitive command line syntax.