Python’s PIL Module uses different versions of the Image.save() method depending on the format of the image being saved. sorl thumbnail uses the following call when it creates the final image output:

im.save(self.dest, quality=self.quality)

This call utilizes a parameter call quality which, according to the documentation is only available on JPEGs. Even changing the THUMBNAIL_EXTENSION in my settings.py file to “png” still didn’t make it maintain the alpha channel the way I had expected it to. Bug 56 is currently open for this issue at the sorl thumbnail project home.

The solution

I wanted to setup a way to pull the images off of the transparency resize them and then drop them on an opaque background of it’s own independent size.

So the first thing I did was to load in an image via PIL:

im = Image.open(filename)

So now that we’ve got our image we need to create the opaque background for it… right now we’ll just use a solid black one. Use the following PIL method call to create a background at an identical size to the original image:

bg = Image.new('RGBA', im.size, (0, 0, 0))

At this point I’ve got two images, im the logo file and bg the opaque black background. Using the PIL paste method I can stick there two together.

bg.paste(im)

which gives us the following image:

If you’re like me, you’re like – “WHAT THE HELL?!?! I just pasted a transparent PNG on a black background, why is it all white???” The answer is because you didn’t tell Python to maintain the alpha channel when it pasted.

The way that PIL deals with transparency when saving or pasting PNGs (that have a mode of “RGBA” or “P”) is to allow for a “transparency” parameter which is an integer from 0 – 255 which is sort of like a transparency tolerance for that image, and represents the “opaqueness” of the pixels to maintain transparency for. Since this is different for every image what we need to do is just maintain the value of the PNG we’re working with.

Note: that if you paste an “RGBA” image (WE ARE!), the alpha band is ignored in a paste. You can work around this by using the same image as both source image and mask – like we have below. More information at the PIL Handbook

Change the paste call to look like this:

bg.paste(im, (0, 0), im)

which produces this:

This call has two additional parameters. The first is is either a 2-tuple giving the upper left corner, a 4-tuple defining the left, upper, right, and lower pixel coordinate, or None (same as (0, 0)) for image we’re pasting in – for this we’re pasting it in at (0,0) – and the second is transparency value – which we’re just telling them use the the value from im.

Although close this still isn’t quite right. There are a bunch of extra transparent pixels which create the strips of blank vertical space on the top and bottom of the image… lets get rid of them.

Add the following code right below the first image.open call like this:

im = Image.open(filename)
 
#convert to black and white
invert = ImageChops.invert(im)
bw = im.convert("1")
bw = bw.filter(ImageFilter.MedianFilter)
 
# add a white bg and do a difference
diffbg = Image.new("1", im.size, 255)
diff = ImageChops.difference(bw, diffbg)
 
#use the difference to create a bounding box
bbox = diff.getbbox()
 
#crop to that bounding box
if bbox:
      im = im.crop(bbox)

and we get just the non-transparent parts of the original:

The next step is to be able to dynamically control the color of the opaque background. In order to do this we need to accept a new parameter which should be a hex color value encased in quotes. Change the line where you create the bg image to look like this (where bgcolor is the quoted hex color string):

bg = Image.new('RGBA', im.size, ImageColor.getcolor(bgcolor[1:-1], 'RGB'))

So if we passed the string “#FF0000″ as bgcolor we get this:

Which is rad. Now we want to pass in two different size values. The first one is a maximum width / maximum height tuple for the logo. Thsi value will be used to re-size the logo according to it’s aspect ratio to one of these maximum values. The second value is also a tuple and is the absolute width and height of the background image. Change your function to accept these 2 new parameters – I’m writing a custom Django Template tag which I will share at the end.

Now change the line where you create the bg image, with these two lines of code where logo_width and logo_height are the integer values of your logo size tuple, and the same for bg_width and bg_height:

im.thumbnail([logo_width, logo_height], Image.ANTIALIAS)
bg = Image.new('RGBA', (bg_width,bg_height,), ImageColor.getcolor(bgcolor[1:-1], 'RGB'))

So now we’ve got independent sizes, lets center the logo in the background. Replace the paste call from before with this code

image_width, image_height = im.size
xpos = (bg_width/2) - (image_width/2)
ypos = (bg_height/2) - (image_height/2)
 
bg.paste(im, (xpos, ypos), im)

so if we call the function like with the following parameters:

produces this image:

and calling it with these parameters:

produces this image:

and finally(!) calling the function with these parameters:

produces this image:

function getPostsByMeta($key, $value, $count = -1)
{
    global $wpdb;
 
    $sql = "SELECT DISTINCT wp_posts.post_title,
    wp_posts.ID FROM $wpdb->posts,
    $wpdb->postmeta 
    WHERE $wpdb->posts.ID = $wpdb->postmeta.post_id 
    AND $wpdb->posts.post_status = 'publish' 
    AND $wpdb->postmeta.meta_key = '$key' 
    AND $wpdb->postmeta.meta_value = '$value' 
    ORDER BY post_date DESC";
 
    $sql .= ($count != -1) ? " LIMIT ".$count : "" ; 
 
    return $wpdb->get_results($sql);
}

and then you can use it like this:

$news_home = getPostsByMeta('_tb_post_section', 'News', 3); 
 
<?php foreach ($news_home as $news) : ?>
    <!-- OUTPUT TEMPLATED HTML -->
<?php endforeach; ?>

PDF of my Keynote

Email Update Plugin Files

…. trust me. I have a lot more to say about Wordcamp, but I’ll have to get to it tomorrow – I’m exhausted. That was a LONG day.

URL: http://www.electroluxappliances.com/node58.aspx
AGENCY: Struck Creative / DDB-NY
LAUNCH: January 2008
ROLE: Lead Developer

I relied heavily upon Arthur Debert’s Bulk Loader to create this video and audio heavy media site. Media files load in the background and you view other content, to create as seemless an experience as possible.

URL: http://www.usedcarambush.com/
AGENCY: STRUCK Creative
LAUNCH: July 2008
ROLE: Lead Developer / Technical Architect

This was the last project that I worked on at STRUCK before I left for NEMO. The site is built entirely in ActionScript3 and I personally built the Papervision 3D powered van interior, and the media queue and streaming system.

URL: http://www.hp.com/voodoodna/
AGENCY: NEMO
LAUNCH: June 2008
ROLE: Lead Developer / Technical Architect

URL: http://thewilife.urbandaddy.com/
AGENCY: Left Fields Labs
LAUNCH: August 2008
ROLE: Lead Developer
TECHNOLOGIES: Flash

Flash based site for UrbanDaddy and Sony to help travelers locate Wi-Fi hot-spots in San Francisco and New York. ActionScript 3 that integrates with the flash-based Yahoo Maps API.

URL: http://utah.travel/
AGENCY: Struck Creative
LAUNCH: March 2008
ROLE: Lead Developer
TECHNOLOGIES: Flash, Python + Django

Flash based site I did while at Struck for the Utah Office of Tourism. The data is all dynamic and is pulled from a Django based CMS that allow the client to update the content at any time.

I’ll be talking about extending the functionality of Wordpress by writing custom plug-ins, and creating your own administration menus & functionality.

Registration is still open but they’re capping attendence at 150, and I hear that they’re pretty close – so if you wanna go register now.