Forums / Setup & design / Images with round corners

Images with round corners

Author Message

Fredrik Ardmar

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

Heath

Sunday 23 August 2009 10:19:52 am

I found this related article on eZpedia

http://ezpedia.org/en/snippet/template_logic_and_settings_to_provide_rounded_corners_on_image_aliases

Cheers,
Heath

Brookins Consulting | http://brookinsconsulting.com/
Certified | http://auth.ez.no/certification/verify/380350
Solutions | http://projects.ez.no/users/community/brookins_consulting
eZpedia community documentation project | http://ezpedia.org

Fredrik Ardmar

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

Heath

Sunday 23 August 2009 9:08:08 pm

Fredrik,

Your welcome. If I can share I try to do it quickly so If I can't help I can do the next best thing, get out of the way.

In truth I just don't have time to go find the example I remember using before. I used to do so much custom image magic in years past, with all my examples dust to the wind.

I had hoped the article helps get some started. I hope it guides them along the path towards the next more complicated example. If you find one, do you mind adding a link in the article?

Best wishes. *steps to the side*

Cheers,
Heath

Brookins Consulting | http://brookinsconsulting.com/
Certified | http://auth.ez.no/certification/verify/380350
Solutions | http://projects.ez.no/users/community/brookins_consulting
eZpedia community documentation project | http://ezpedia.org

/dev/null

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

Fredrik Ardmar

Monday 24 August 2009 6:37:11 pm

Thanks for the great input..

As I see it the ImageMagick command needs to be executed in one command in order to run with in eZ? Also it has to be done without creating any temporary files or masks since these will be hard to clean up?

Anyone figured out how to add 4 separate corners in an image together with convert in one command? Then how to translate this into a filter for image.ini?

Fredrik

http://www.areadigital.org

Custom google maps with eZ Publish

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

Betsy Gamrat

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 );[/