Images with round corners

Sunday 23 August 2009 8:48:36 am

Hi

Anyone knows how to make round corners with image magick and using the built in image handling system in eZ?

I have read in the forum about some solutions using one large mask and then composing this with your image. Problem is that I don't know the exact size of the image so we need to use one image/mask for each corner.

With plain image magick it would be something like this:

composite -gravity NorthEast rounded-ne.png lake.png lake-1.png
composite -gravity NorthWest rounded-nw.png lake-1.png lake-2.png
composite -gravity SouthEast rounded-se.png lake-2.png lake-3.png
composite -gravity SouthWest rounded-sw.png lake-3.png lake-4.png

Now the questions is how to merge this with how eZ handles images.

Any ideas?

Fredrik

http://www.areadigital.org

Custom google maps with eZ Publish

http://www.meresverige.dk
http://dsbfirst.meresverige.dk

Sunday 23 August 2009 8:00:45 pm

Hi Heath

Thanks for the swift answer.

This is actually the same article i started with. This approach is fairly straight forward and after some tweaking I manged to get this to work.

The main disadvantage is that the mask and the image needs to be exactly the same size. Meaning that you need to work with fixed size images. This is ok for some of our project but many projects have a fixed image width but a flexible height. All dependent on the original image ratio.

So what I need is an approach where 4 corner images/masks are composed on the image creating the mask.

Any ideas?

Fredrik

http://www.areadigital.org

Custom google maps with eZ Publish

http://www.meresverige.dk
http://dsbfirst.meresverige.dk

Sunday 23 August 2009 9:20:15 pm

<i>http://stackoverflow.com/questions/718314/rounding-corners-of-pictures-with-imagemagick
http://ez.no/developer/forum/setup_design/rounded_corners_on_images
http://ajaxian.com/archives/googles-rounded-corner-generator
http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=8401
</i>

eZpedia community documentation project: http://ezpedia.org

Friday 20 November 2009 5:20:41 am

One solution is to use PostParameters to round the corners of *ALL* images. This is because the PostParameters setting isn't escaped onto the command line, as are the Filters. I couldn't get the ImageMagick command line options used for rounding to pass properly through the escaping using Filters.

Formats that don't support transparency don't display the rounded corners, thus, .jpgs are unchanged, unless you choose to use one of the 'rounded' aliases.

ez/settings/override/image.ini.append.php

<?php /* #?ini charset="utf-8"?

[AliasSettings]
AliasList[]=rounded-small
AliasList[]=rounded-medium
AliasList[]=rounded-large

[rounded-small]
MIMEType=image/png
Reference=small

[rounded-medium]
MIMEType=image/png
Reference=medium

[rounded-large]
MIMEType=image/png
Reference=large

[ImageMagick]
IsEnabled=true
ExecutablePath=/usr/local/bin
Executable=convert
ExecutableUnix=convert

# This line causes ALL images to have their corners rounded. Only .gifs and .pngs will display with rounded corners, .jpgs
# will display with sharp corners, because they don't support transparency. If a .jpg image is uploaded, the display class
# must be set to one of the above for the rounded corner version to display.
#
# The PostParameters settings must also be applied before the destination file name, modify /var/www/html/ez/lib/ezimage/classes/ezimageshellhandler.php
#
# Thanks to: http://www.imagemagick.org/Usage/thumbnails/#rounded
PostParameters=\( +clone -threshold -1 -draw "fill black polygon 0,0 0,10 10,0 fill white circle 10,10 10,0" \( +clone -flip \) -compose Multiply -composite \( +clone -flop \) -compose Multiply -composite \) +matte -compose CopyOpacity -composite

*/ ?>

I modified /var/www/html/ez/lib/ezimage/classes/ezimageshellhandler.php to place the Filters and PostParameters between the source and destination filenames, because this is how I usually work with ImageMagick.

/var/www/html/ez/lib/ezimage/classes/ezimageshellhandler.php

if ( $filters !== false )
{
foreach ( $filters as $filterData )
{
$argumentList[] = $this->textForFilter( $filterData );
}
}

/* Move PostParameters up before the destination file is named */
if ( $this->PostParameters )
$argumentList[] = $this->PostParameters;

$destinationURL = $destinationMimeData['url'];

Finally, although I tried to use the debug settings to output the commandline, I didn't have any luck. To support development, I added the following line to the same file:

file_put_contents('/tmp/eZ.out',$systemString."\n",FILE_APPEND);

/* Added just before the execution */
system( $systemString, $returnCode );[/