Imagene gradient generator

Create beautiful gradient images controlled by Bezier control point colors.
The module supports 1-dimensional (1*h or w*1 px width/height) and 2-dimensional (w*h px) images.

Some examples:
http://dqxtech.net/blog/2012-01-30/imagene-sample-images

How it works:

• You edit one of your css files (or play with Firebug), and assign a new background image to something. The image url should be /sites/[sitename]/files/imagene/etc (see below).
• If the image does not exist, imagene will create it, based on parameters from the filename and path.
• The image will be stored in the respective location, so the same image doesn't have to be created again (similar to imagecache). This behaviour is controlled by permissions (see below).
• you can keep the new image where it is, or copy it around to use it somewhere else.

Benefit:

• No more pointless toying around with Gimp/Photoshop, no more pointless copying around of image files, no more pointless copying of color hex codes between css and Gimp/Photoshop.
• Change colors directly from your css file, by changing the url of the background image. Colors and image dimensions are encoded in the url in a transparent way.
• This way it becomes a lot easier to make sure the colors of your background image match well with the background color or other colors used in the css.

All parameters are encoded in the url:

• sites/%/files/imagene/gradient/10-eee-fff.png creates a 1x10 image, with a linear gradient from #eee to #fff.
• sites/%/files/imagene/gradient-xy/10x10--eee-fff--fff-fff.png creates a 2-dimensional linear gradient image with a grey corner in the top left.
• sites/%/files/imagene/gradient-x/20-ddf-f-f-f.png creates a 20x1 gradient from #ddf to #fff, with a cubic-Bezier transition. This way, you get a C² continuous transition, where the image ends and the white background begins.

Color shortcuts:

Colors are encoded in the same way as in css, with some additional abbreviations:

• "a70" = #aa7700
• "a0" = #a0a0a0
• "f" = "ff" = "fff" = #ffffff

Transparency gradients:

The alpha channel is treated in the same way as every color channel.

• "eeef" = color "eee" + transparency "f" (transparent)
• "eeeeee00" = color "eeeeee" + transparency "00" (opaque)
• gradient/20-aaf0-aaff.png creates an image with color "aaf" = #aaaaff (some kind of blue), that is opaque at the top, transparent at the bottom, and half-transparent in between, with a linear transition.

Grid extension shortcuts:

Usually you want an as-smooth-as-possible transition to the element's background color. So, for a white background, you would be writing a lot of "f" control points. There are some shortcuts to make this shorter to write.

• t = top, b = bottom, r = right, l = left
• --t_f = add one row of white (#f) to the top of the control grid.
• --rrb_eef = add two column of #eef to the right of the control grid, and one row of #eef at the bottom.
• --rr_x = clone the rightmost column, and append it on the right, 2 times.
• --rb_x = clone the rightmost column and append it right, then clone the bottom row and append it at the bottom.
• gradient-xy/30x30--faa--tttlll_f.png creates a red (#faa) upper right corner image, with a smooth cubic transition to the rest (#f = #fff), in x and y direction. This would be equivalent to gradient-xy/30x30--f-f-f-faa--f-f-f-f--f-f-f-f--f-f-f-f.png. Now consider your background color was not plain white, but something which needs all 6 or 8 characters!

File storage:

After first generation, the file will be stored in the respective directory, so it doesn't have to be generated again.

Permissions for leech prevention:

To prevent others from using your server as a farm for gradient images, and totally wasting your filesystem with all possible permutations of colors, imagene comes with two permissions:

• "see non-existing imagene images" can restrict people from using the server power to generate not-yet-existing images.
• "save imagene images" will prevent generated images from being saved to disk, thus protecting your disk space from being filled with junk.

The idea is that only a person with access to the css files will ever want to generate new images, so this person can be given the necessary permissions. Or, you can grant the permissions to everyone, as long as the site is on a dev server, and restrict to admins when it goes to production.