eZ Publish Rounded Image Corners

Nutshell explanation:

Make these changes to allow rounded image corners under eZ publish.

All .gifs and .pngs will have their corners rounded.
No .jpgs will have their corners rounded, unless you use the rounded aliases below, which force the output type to .png.

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

<?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

*/ ?>

/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'];

… same file … to help you see the command being executed …


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

Generate Backgrounds with ImageMagick

Link is to a page that has daily dynamically generated background tile images, with a gradient overlay.

A fun way to make a site more interesting, especially for those with limited design skills. :)

Let Go of Logic and "It Should"

Sometimes, code doesn’t do what it is supposed to, or what you expect. This is particularly common with open source code you didn’t write.

You can’t change the basic code architecture or data structures.

Key techniques to adapt and recover with javascript are instanceof and typeof. This allows you to test if an object or property has been created or assigned, and what type it is, then you can use it properly. Often, the best way to find out what types are being used is FireBug.

Take the time to look for examples in the code, so you don’t have to figure it all out from scratch. Usually, modifications to open source code involve code similar to that which is already in there, for example reassigning values.

IE, objects, and commas

Using objects with javascript, under IE requires attention to commas.

If you have an AJAX application that won’t load, and the error message is difficult to match up with the code, or not descriptive, one of the best things to check is the objects for trailing commas.

The code below will run fine in FF, but will not load in IE, because of the trailing comma after the second object in the array.


object={"object":"value","array":[{"v":"one"},{"v":"two"},]};

Be sure to check any JSON data sent back from the server, as well as that which is assigned or dynamically generated in javascript.

Brute force debugging with alert statements may be helpful.

Rounded Rectangle Container - Images and HTML

The objective of this page was to find an efficient way to create a rounded rectangle that would dynamically resize based on content.

The width is fixed, but the height is variable.

Notes

  • Border for center area uses a CSS border attribute instead of an image. It just works better. It also reduces the HTTP request count by 2.
  • The color code used (#77777777) is for approximately 50% opacity.
  • The header is a gradient, chopped for good contrast.
  • ImageMagick commands are included.