|
Tuesday 20 February 2007 4:19:06 pm
Hi OOzy Bruce Morrison and I have managed to get rounded corners working with ImageMagick. I've written a howto, which may get updated. But here it is:
**************************************************************
Rounded corners on images 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/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine but as the final image size is pre-determined there is no need to add the corners individually. 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. 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. 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:
[ImageMagick]
Filters[]=rounded=-compose dst-over -composite -gravity NorthWest /var/www/html/ ... more path goes here ... /design/news_site/images/picmask.png 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:
[AliasSettings]
AliasList[]=mypicturewitharoundedborder Finally, add the filters to the alias;
[mypicturewitharoundedborder]
Filters[]=geometry/scalewidth=156 Filters[]=geometry/crop=156;90;0;0
Filters[]=rounded= The first two filters resize the image to a width of 156px and then crop it to 156px by 90px. This means no matter what a user uploads they will get the same image size. The final filter applies the mask. Save and upload the ini file, go to your EzPublish content edit interface, 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! Thanks to Bruce Morrison from DesignIT for his invaluable help in wrangling ImageMagick's sometimes slightly-less-than-intuitive command line syntax.
Paul Bolger
|