I worked with MotherJones to produce a Drupal application that lets users create their own versions of the latest MotherJones cover. MotherJones wanted users to be able to upload their own photos and overlay a cover of their choice and add some text to the final image. Using Imagecache, Imagecache Actions, CCK, and some custom jQuery, I built a simple system that allows users to do this- all before rendering the image.
You can check out the the application here: Climate Cover.
The node creation form is fairly straight forward- while it has its own template for the custom layout, it simply pulls the CCK fields along with some custom HTML. The cover choice is simply a select list with some jQuery to figure out the cover that the user chooses which replaces the cover in the preview box. Text is overlaid in a similar way. The only sneaky thing that is done here is the use of LiveQuery. LiveQuery allows jQuery to watch for changes in the DOM **after** the page is loaded. This means that once the image is uploaded by the user and we can see the preview of the image we can load this image into the preview box- something you can not do with jQuery versions earlier that 1.3.
On the backend, I used Imagecache's ability to define presets in code to generate all of the different combinations of user choices- this ends up being a preset for each of the covers and each of the text color choices. So in my case 2 presets per choice. I a function to define what colors of text and cover images are available (to populate the CCK field using the PHP option) and loop over all of these choices in the Imagecache preset function. This makes it easy to add new options which are automatically supported by both CCK and Imagecache. In addition to this, on the Forward page, I integrated the Votesmart API module to do lookups on US senators and representatives email address if they are publicly available- this lets users send to politicians in the US along with their friends.
| Attachment | Size |
|---|---|
| Picture 2.png | 271.96 KB |
Post new comment