Initially, the thumbnails we needed were just the easy kind: Either scaled down versions of the initial image, or cropped to a square and then scaled down. Those are easily created in a few lines of Python, and I had created a custom Django template tag to create them. Pretty soon, caching became important, too, and I added that as well.

For our most recent projects, the design necessitated thumbnails that had exactly specified dimensions. Here are some examples:

The code to create these kinds of thumbnails is a little trickier. Since I found no preexisting solution, I decided to roll my own, and now we’re sharing that solution with the world. I’ll talk a little about the algorithm first, if you just want the code, you can grab it right now on the Bitbucket page.

Also, if you aren’t interested in the technical details, you can skip the technical part and go directly to the part where we explain how to use this stuff.

The Technical Part™

So, how do we create an image that fits the correct dimensions, while still ensuring that as much as possible of the content of the original image fits?

First I tried comparing the individual sides of the image to those of the thumbnail, but that obviously resulted in nothing but lots and lots of edge cases: How do I have to scale the image if its width is slightly greater than the thumbnail’s but it’s a lot higher? What if it’s the other way round? What if the image is a rectangle and the thumbnail is a square?

The only comparable attribute of the image and thumbnail sizes is their ratio, obtained by dividing their width by their height. The ratio stays the same regardless of the actual width or height and is therefore ideal for determining exactly which part of the original image to crop. The cropped image can then be resized to obtain a thumbnail with exactly the desired dimensions.

If the thumbnail ratio is greater than the image ratio, the thumbnail is wider than the original image, and we keep the image’s width while cropping top and bottom.

If the thumbnail ratio is less than the image ratio, the thumbnail is taller than the original image, and keep the image’s height while cropping the sides.

(After cropping, we obviously resize the image to the exact thumbnail dimensions.)

The code for this is as follows (image is the original image, image.size[0] is the original image’s x size, x and y are the thumbnails dimensions):

    1 img_ratio = float(image.size[0]) / image.size[1]
    2 thumb_ratio = float(x) / y
    3 x = int(x); y = int(y)
    4
    5 if(img_ratio > thumb_ratio):
    6     c_width = x * image.size[1] / y
    7     c_height = image.size[1]
    8     originX = image.size[0] / 2 - c_width / 2
    9     originY = 0
   10 else:
   11     c_width = image.size[0]
   12     c_height = y * image.size[0] / x
   13     originX = 0
   14     originY = image.size[1] / 2 - c_height / 2
   15
   16 cropBox = (originX, originY, originX + c_width, originY + c_height)
   17 image = image.crop(cropBox)
   18 image.thumbnail([x, y], Image.ANTIALIAS)

Some comments:

• In the first two lines, we determine the image’s ratio and that of the thumbnail.
• Then we determine, according to the ratio, how wide the thumbnail would be, if it were as high as the image. (For image ratio > thumbnail ratio. Swap width and height for the other way round.)
• We create a tuple called cropBox, (line 16) which we fill with the coordinates of four corners of an imaginary box that covers as many of the image’s pixels as possible while retaining the desired ratio of the thumbnail.
• We crop the image based on the cropbox in line 17.
• Finally, in line 18, we resize the image, which now has the correct ratio, to the correct size as well, thereby creating the thumbnail.

We have some edges cases as well. An easy one is the ratio of the thumbnail being the same as the original image. In this case, the else statement in line 10 is executed, but it could just as well be the the if. Either way, the dimension that is calculated as a product of ratio and the other dimension will be correct.

Another edge case appears if one or both sides of the original image are smaller than the respective side or sides of the thumbnail. In this case, we use the length of the original image’s side length instead of the length as calculated by the ratio.

This creates images that might in fact be smaller than the desired dimensions, instead of scaling the image somehow to fit. We decided this would be better in most cases, since images that are enlarged usually appear blocky or mangled.

So we just cut the size off:

    1 if (image.size[0] < x):
    2     x = image.size[0]
    3 if (image.size[1] < y):
    4     y = image.size[1]

As for file saving and caching, we create a file name based on the original file’s name plus the dimensions, like image-640x480.png. If such a file already exists and its timestamp is newer than the original files (meaning the original has not been replaced by another version) we skip all the time consuming computations and simply return the existing image.

That’s all the code-explaining I will do today. For more, ask a question on Bitbucket or read the source code yourself.

The Part Where I Explain How To Use This Stuff™

Of course you can simply use the described algorithm to create your own image thumbnail template tag if you want. Or you can use it in your Python application without using Django. Or you can port it to C. Whatever.

Oh, by the way, you can use all the code in this blog entry and in the django-thumbnail code repository for free, regardless of wether you make money with it or not. No, you don’t have to make your code open to the general public or to us. You can think of breakthesystem when you need a serious website, a cool iPhone app or an awesome Mac application, though. Or you can buy me a beer. Just contact me for any of that.

And you should follow me on Twitter, obviously. :)

Okay, let’s go. I’m assuming you’ll have a model in your Django application that looks a bit like this, by the way:

class Picture(models.Model):
    title = models.CharField(max_length=255)
    image = models.ImageField(upload_to = "images/%Y-%m-%d")

First, install the template tag. To do that , download the file thumbnail.py and place it in YourDjangoProject/your_django_app/templatetags/tumbnail.py. You’ll probably have to create the templatetags folder. If you’ve just created it, you’ll also have to create an empty file called __init__.py in the templatetags folder.

In your template, add the statement {% load thumbnail %} somewhere before you actually use the thumbnail tag. You’ll need that statement only once, so I recommend placing it at the very top of your template. Then use the tag like this:

<a href="{{ picture.image.get_url }}">
    {{ picture.image|thumbnail:320x240 }}
</a>

This will create a thumbnail of 320 by 240 pixels that links to the original picture.

You can also do this:

<a href="{{ picture.image.get_url }}">
    {{ picture.image|thumbnail:320x0 }}
</a>

The above code will create a thumbnail that is 320 pixels wide. In other words, this is the image scaled down to a width of 320px. You can also use something like thumbnail:0x240 for a variable width and fixed height.

Finally, thumbnail.py can do one more trick:

<a href="{{ picture.image.get_url }}">
    {{ picture.image|thumbnail_with_max_side:320 }}
</a>

The above code will create a scaled down version of the image that is 320 pixels on the longer side, whichever one that is.

And that’s it. I hope you like it. You should now go to django-thumbnail’s Bitbucket homepage and have a look at the current source code, or comment, or follow the project. I probably won’t update this blog entry for new developments regarding django-thumbnail, so Bitbucket is where you should go.

This blog post is partly based on Rob Hudson’s Installing Django on Leopard post, which has helped me a lot in the past. Thanks, Rob!

Also, if you need help installing other tools on your machine, Dan Benjamin of hivelogic.com has created tutorials for installing MySQL, Git and Mercurial.

Prerequisites

Luckily, Snow Leopard brings everything with it that you need: Subversion and Python 2.6 are already pre-installed with the new OSX. This is especially important because as of now, 3 days after the release of OS X 10.6, there is no working version of Macports yet, which might otherwise help you install lots of command-line-tools for your mac.

Downloading Django

First, open your Terminal.app. It should be in the Utilities folder, located inside the Applications folder.

To download Django 1.1 using Subversion, first cd into the Python site-packages directory by pasting the following line into the terminal window and pressing enter:

cd /usr/local/lib/python2.6/site-packages

A few commentators rightfully point out that the correct path to the site-packages should be:

cd /Library/Python/2.6/site-packages/

And then download Django into the site packages directory using Subversion:

sudo svn co http://code.djangoproject.com/svn/django/tags/releases/1.1/django

Installing Django

Now Python should know about Django itself. You’ll only have to tell your system about the django-admin.py so that you can create new projects. To do this, create a symlink:

sudo ln -s /Library/Python/2.6/site-packages/django/bin/django-admin.py /usr/bin/django-admin.py

Cleaning Up

On American Macs, this should already be enough. On many other system, you’ll need one more thing to avoid the dreaded unknown locale: UTF-8 error.

We simple need to set two environment variables to tell your system about your input language. In your terminal, type

nano ~/.profile

which will open your profile file. If there is already something in the file, ignore it. Add these two lines:

export LC_ALL=de_DE.UTF-8
export LANG=de_DE.UTF-8

As you can see, the locale is now de_DE.UTF-8 which is the correct entry for me, as I live in Germany. For other countries, substitute “de_DE” by the correct code as taken from this list of locales.

Save the file by pressing Ctrl+x, then y. Finally, close your terminal and take a deep breath. You have just installed Django on Snow Leopard. Happy coding.

Huh?

In recent weeks, I’ve stumbled over so many Tools for managing code snippets, it’s not funny any more. Viusual Studio plugins, TextMate plugins, apps for Windows, apps for OSX, apps for the web… what’s the matter? Why is everybody suddenly horny for little snippets of code?

I’ve thought about trying out a code snippet application, but… I wouldn’t really know what to do with one. I have no fucking clue, really! Yes, of course, you’re supposed to enter little snippets of code that you think could be useful in the future, but I somehow have never come accross these.

I don’t really need snippets, do I?

Of course, I have code on my hard drive that I will definitely reuse. For example, I have a folder called CSS with CSS files to reset font and spacing settings and set grid systems. I also have a folder with an almost-finished CMS that will most certainly be included in more than one web-app of mine.

But that doesn’t really merit a whole App. So I don’t use one. And this is okay by me, or at least I think so.

But what if I’m missing out on something really cool?

What if there are indeed cool things to be said about Schnippets, and I just haven’t realized them? That would suck. Are you using a code snippet app? If so, what for? I’m looking forward to your ideas.

Stay tuned! I’ll be back.

I first tried to install the Radeon Omage Drivers from here, which helped a little, but still didn’t really work right: I was able to set some resolutions, but not all, and especially not 1680×1050, my external monitor’s native resolution.

The solution for that is simple: In Display Properties | Settings | Advanced | Displays, un-check the checkbox marked “Preserve Wide Aspect Ratio on attached displays.” Then it just works.

-DNDEBUG -g -O3 -Wall -Wstrict-prototypes -DWITH_APPINIT=1 -I/opt/local/include -I/opt/local/include/python2.5 -c _tkinter.c -o build/temp.macosx-10.3-i386-2.5/_tkinter.o
unable to execute -DNDEBUG: No such file or directory
error: command '-DNDEBUG' failed with exit status 1

Seems like the port doesn’t call gcc [args] to compile the binary, but only the [args], which often start with -DNDEBUG. (which, incidentally, is hard to google for, because of the minus sign.)

afb@macports.org has the reason for this:

It seems that those python ports are expecting $CC to be set in build as well as in configure, and fall back to random values such as “” or “cc” or “/usr/bin/gcc-4.0″ when it isn’t. This probably also explains why rerunning the build sometimes succeeds, if something else was adding a $CC to the environment that can be picked up as a lucky guess second time.

A workaround is setting the build.enc environment variable like so:

sudo su
password:
set build.env="CC=gcc"

and then run port. Here’s the ticket for more info.

And, before you laugh… yes, I kinda get Twitter now. And I like it.

PS: I couldn’t find a better picture for this post, so I used my new favourite image.

Bild von FelipeArte

You can either

• download the first 9 tracks for free from the NIN site
• download all for free from the Bittorrent site of your choice ;)
• pay $5 and download the full album (and support the artist)
• pay $10 and get the download plus a 2-disc digipak
• pay $75 or $300 for deluxe packages respectively

I bought the $10 version. You can pay via Paypal, which is very convenient and right now I’m eagerly awaiting my download link. And with the ridiculously low dollar, its just a little more than a normal store-bought album even with shipping and taxes.

I’ll post what I think of the music once I’ve listened to the album a few times. (Yes, I am one of those old-fashioned people who listen to music before reviewing it ;) )

]]> http://breakthesystem.org/2008/reznor-reznoring/feed/ 0 http://breakthesystem.org/2008/europeans-i-want-you-to-sign-this-petition/ http://breakthesystem.org/2008/europeans-i-want-you-to-sign-this-petition/#comments Mon, 03 Mar 2008 12:43:07 +0000 Daniel http://breakthesystem.org/2008/europeans-i-want-you-to-sign-this-petition/ So the content mafia is going to push for an extension of the current copyright term of 50 years. In my book, fifty years is more than enough. In yours too? Sign the petition!


Copyright is a bargain. In exchange for their investment in creating and distributing sound recordings to the public, copyright holders are granted a limited monopoly during which are allowed to control the use of those recordings. This includes the right to pursue anyone who uses their recordings without permission. But when this time is up, these works join Goethe, Hugo and Shakespeare in the proper place for all human culture – the public domain. In practice, because of repeated term extensions and the relatively short time in which sound recording techniques have been available, there are no public domain sound recordings.

Full text at soundcopyright.eu

]]> http://breakthesystem.org/2008/europeans-i-want-you-to-sign-this-petition/feed/ 0