Adrian Rossouw
2006
03
05

Google Summer of Code : ImageMagick Support

Blog
created on 周三, 2006-05-03 08:20

This year I have made time to be a mentor in the Google Summer of Code program.

Every year google pays students to spend their summers developing open source software. Last year Drupal had 11 student projects, and we got some really amazing developers out of it too. (I'm looking at you webchick *g*)

I currently have one SoC proposal up, and it's a project very near and dear to me. I am talking of course about a proper integration layer with the ImageMagick binary.

A better description of what would be possible with this after the jump :

What follows is a very simple demonstration of the power of said imagemagick module, if kept simple enough.

Take this theme that I am using. It's called Leaf. Of all the ported themes, I think I like this one the most, but what do I have to do if I want to customize it.

Leaf contains the following images :

  1. Background gradient
  2. Header image 2 3 4
  3. Footer image

Although I am simplifying this for purposes of the example. Each of these final images, could be rebuilt using the imagemagick module, and the entire site design could change at the user's choice.

It's a very simple thing to make a css stylesheet, which actually contains php (a style template), that allows you to manipulate the colours and images that the stylesheet points to. In that case, you would simply have to select a single colour (the bottom of the gradient), and the top of the gradient would be 33% darker than the top. We already have an awesome color picker widget written by Steven Wittens, that I have converted to a FAPI element.

An example of this in practice is the Kubrick Header generator for WordPress. It uses the exact same functionality on the back end, but in this case, any theme developer can provide the recipe for configuring their theme.

As you can see , the header image already has a bunch of alternate images available for it, but it's not that complex either. You have three layers to it. The background, which is the same as the top of the gradient, you have the content, which can be any stock image, and you have the border. By choosing a new theme colour, you alter the bottom layer.

You could also choose to alter the middle layer, as seen in Kubrickr once again for WordPress. Kubrickr has the added feature that it sources images from flickr,
but a properly written style module, would be able to source images from anywhere. Uploaded images, images in flickr, images attached to the node you are viewing (why not put the main story picture directly in the site
layout, the same way tv.com does it for each of it's show sections).

The bottom layer, is recreated by just combining the white rounded corner layer, with the color you selected originally.

A really cool feature, that is actually not that hard to implement, is to find pictures that are near the colour you selected in the colour picker, as can be seen on the Flickr ColrPickr.

Additionally, how about doing the reverse and doing analysis of a logo or stock image that was uploaded, and try and find good colour schemes out of that (note: this will most likely require some hand tweaking *g*).

The kicker of all this is, through the magic of AJAX, there's no reason you would even need to reload the page. It could be written in such a way that it all happens right in front of you. That's not the kind of feature I'd enable for thousands of users on limited hardware, but it's still great to have that ability =)

These are the kinds of features we are on the cusp of being able to support in Drupal, if we just had the stable base of a properly developed ImageMagick module to build upon. ImageMagick is a powerful beast, and if we manage to Drupalise enough of it's functionality, we could build some truly amazing things with it.

Update: I found this DHTML image cropper / resizer I thought I would just link here too Speeding Rhino. That would be great for an interface for cropping images.

回复

此内容将保密,不会被其他人看见。
  • 行和段被自动切分。
  • Avast! This website be taken over by pirates on September 19th. Yarr!
  • Allowed HTML tags: <a> <p> <br> <i> <b> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Glossary terms will be automatically marked with links to their descriptions
  • 网页地址和电子邮件地址将会被自动转换为链接。

更多格式化选项信息