eZ Community » Blogs » A Fowler » Rounded corners for user avatars

By

A Fowler

Rounded corners for user avatars

Tuesday 22 November 2011 9:11:22 pm

  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

I believe I have found an improvement for creating images with rounded corners.  Although various methods for doing this are discussed on these forums, there are various drawbacks, such as the need to use an image mask, or having to apply the filter to all images.

The approach documented below uses only an ImageMagick filter specified in image.ini.append.php, and does not need an image mask file.  It also adjusts to different image sizes automatically, even to rectangular sizes (though it has a fixed corner radius size which you can specify).  Because it's a filter, you can use it on any image alias you like.

Its main downside appears to be that it can only output PNG images-- but I prefer PNG anyways, especially for images this small.  And in many cases, with rounded corners you want the transparency that PNG provides.

I used the commands at http://www.imagemagick.org/Usage/thumbnails/#rounded, which I found after browsing a link from one of the other discussions on how to do this.  By experimentation, I discovered the commands from that link would work if you simply removed the backslashes in front of the parentheses when you copy the commands into the filter line.

Here are the settings in image.ini.append.php (UPDATED with feedback from Patrizio Bekerle's comment):

[ImageMagick]
# Filter adapted from http://www.imagemagick.org/Usage/thumbnails/#rounded
# Takes one numeric parameter, for the corner radius
Filters[]=corners/rounded=( +clone -alpha extract -draw 'fill black  polygon 0,0 0,%1 %1,0 fill white circle %1,%1 %1,0' ( +clone -flip )  -compose Multiply -composite ( +clone -flop ) -compose Multiply  -composite ) -alpha off -compose CopyOpacity -composite
 
[AliasSettings]
AliasList[]=avatar
 
[avatar]
Reference=
Filters[]=
Filters[]=geometry/scaleheightdownonly=50
Filters[]=cropcenter=50;50;0;0
# Calling the filter above with a corner radius of 5
Filters[]=corners/rounded=5
# Force conversion to PNG
MIMEType=image/png

A key aspect of this is that the "avatar" alias is output as PNG, as instructed by the MIMEType line in the imagealias configuration above.  When I tried outputting JPEG, the corners were square, probably because outputting as JPEG ignores any alpha information.  With the MIMEType line above, the imagealias will output PNG whether the source image is PNG or JPEG.

Also, make sure you have a recent version of ImageMagick on your server.  I have tested it to work on ImageMagick 6.5+, and NOT to work on ImageMagick 6.2.x.  I'm not sure about the 6.3 - 6.4 versions.

Links consulted:

Proudly Developed with from