Image filters and rounded corners

Monday 29 May 2006 2:04:14 am

Hi!

Using image filters in image.ini is there any way to add rounded borders to images. I've been looking around here to find any documentations explaining the different filtes available to image aliases, but haven't found any :(

Since these images usualy will be jpegs, there are no way to just crop with a rounded border effects (cutting with rounded corners), but instead the corners of the image has to be filled with some color that matches the sites background color.

Any ideas, thoughts anyone?

Friday 09 February 2007 12:25:10 am

Hi Børge

According to http://www.imagemagick.org/Usage/thumbnails/#soft_edges you should be able to pass the appropriate parameters to convert to do what you require. I suspect that your success will depend on the version of ImageMagick you have installed on your system.

Adding the following to image.ini may do the trick

[ImageMagick]
Filters[]=roundedborder=-matte -virtual-pixel transparent -channel A -blur 0x8 

[small]
Filters[]=geometry/scaledownonly=100;100
Filters[]=roundedborder=

I've not tested this as I don't have a sserver with a version of convert that suports the required flags.

HTH

Cheers
Bruce

My Blog: http://www.stuffandcontent.com/
Follow me on twitter: http://twitter.com/brucemorrison
Consolidated eZ Publish Feed : http://friendfeed.com/rooms/ez-publish

Friday 09 February 2007 3:05:10 am

There would be no special template code for this. Just make sure you name the correct alias.

Friday 09 February 2007 3:21:59 am

Wherever a node is available, by default or by fetch.

{attribute_view_gui image_class=small attribute=$node.data_map.image_attribute.content.data_map.image}

Just change the image_class and image_attribute to fit your needs.

Monday 12 February 2007 5:32:44 pm

Thanks for your responses - it sounds like the most flexible solution to this problem would be to use the draw command, which was detailed next on the page Bruce cited

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

but it's pretty complicated.

I think for my purposes (the resulting image has to be of a set size) I could use the composite command to overlay a mask on the image (after resizing and cropping it).

Does anyone know the syntax for getting a second image, the mask, in the Ezpublish filters section?

Paul Bolger

Paul Bolger

Wednesday 14 February 2007 5:08:24 pm

Hi Bruce

By 'composite' I was meaning using the composite command:

http://www.imagemagick.org/script/command-line-options.php#composite

which allows you to pull in a second image and overlay it onto the current image.
I'm not sure if it would work, but the first problem in trying it is that I'm not sure what the current directory is - if image.ini told Imagemagick to go look for a second image to overlay, where would Imagemagick look?

I'll give your suggestion a try, but I'm unclear of the current location in this context - ExecutablePath=/path/to/myconverter/ - were is '/' ?

BTW: and this is more for the benefit of the thread than anything else: This page

http://ez.no/download/ez_publish/changelogs/ez_publish_3_3/new_image_system

has some good information on image filters in image.ini which doesn't seem to appear anywhere else.

It probably should be added to the documentation - how does one go about requesting this?

regards
Paul Bolger

Paul Bolger

Thursday 15 February 2007 7:41:11 pm

Ok, this is driving me crazy...

I have an entry in [ImageMagick]
Filters[]=rounded=-composite %1

I have an entry in [AliasSettings]
AliasList[]=bighighlights

and I have an alias

[bighighlights]
Filters[]=geometry/scalewidth=156
Filters[]=geometry/crop=156;90;0;0
Filters[]=rounded=/var/www/html/...the rest of the path.../design/news_site/images/picmask.png

..and I have the mask image in the correct directory - !

Can anyone spot the problem?

Thanks

Paul Bolger

Saturday 17 February 2007 6:26:41 am

Hi Bruce

Was in the middle of writing a more complete description of what was, and was not, happening yesterday when the power failed, I lost the lot, and we all ended up going home. Anyhow, tried your last suggestion on a local installation and, after the obligatory three hours of messing around, got it to work. The filter setting I ended up using was

Filters[]=roundedborder=-compose dst-over -composite -gravity NorthWest C:\eZpublish\ezpublish\design\plain_site\images\rightsize.png

Thanks for your help and patience. I have a couple of details to sort out, after which I'll tie the thread off with a howto.

regards
Paul Bolger

Paul Bolger

Sunday 18 February 2007 5:15:33 pm

@paul
Yeeha! Glad to hear! Got a URL so we can see the results?

@michele
I think you are talking about something else. There are plenty of sites out there with designs that incorporate rounded corners. Some solutions are better than others.

Cheers
Bruce

My Blog: http://www.stuffandcontent.com/
Follow me on twitter: http://twitter.com/brucemorrison
Consolidated eZ Publish Feed : http://friendfeed.com/rooms/ez-publish