June 14, 2010 will

Announcing Sore Thumb, a thumbnail and image processing module for Django

I recently worked on the re-design of 2 Degrees, which required a lot of image processing on thumbnails. The thumbnails where to be in a variety of different sizes, all with rounded corners and keylines on a selection of virtually identical off-white backgrounds and gradients. And they all had to work on IE6 *spit* without the transparency hack.

Sorethumb examples

A variety of thumbnails generated by Sore Thumb

A lesser engineer may have told the front-end developer where to stick his rounded corners, but I didn't want see a grown man cry, so I built Sore Thumb, an on-the-fly thumbnail and image processing system for Django.

Sore Thumb uses a declarative method of defining thumbnails, similar to Django's model and form definitions. Here's an example of how to declare a thumbnail processor that produces a 120x100 pixel thumbnail with 10 pixel rounded corners and a dark grey keyline:

from sorethumb.djangothumbnail import DjangoThumbnail
from sorethumb.filters.defaultfilters import ThumbnailFilter
from sorethumb.filters.drawfilters import RoundedCornerFilter

class RoundedCornersEdged(DjangoThumbnail):
    format = 'png'
    filters = [ThumbnailFilter(120, 100),
               RoundedCornerFilter(10, border='#333')]

Once this class has been imported, the thumbnail processor will be available in templates via the sorethumb filter which takes a Django FileField and returns the url to the thumbnail.

For example:

{% load sorethumb %}

<img src="{{ profile.photo|sorethumb:"rounded_corners_edged" }} />

You will also need to add sorethumb to your INSTALLED_APPS for this to work.

That's pretty much all there is to working with Sore Thumb, see these examples for inspiration and the documentation for the details.

You can install sorethumb with easy_install, PIP, or directly from source:

easy_install -U sorethumb

Please let me know what you think of Sore Thumb. I'd rather not spend too much time maintaining it, but since most of the code has been in production for a number of months already, there shouldn't be many changes required. If you have any feature requests or bug-reports, now would be a good time to raise them while I have the time to do the work!

Use Markdown for formatting
*Italic* **Bold** `inline code` Links to [Google](http://www.google.com) > This is a quote > ```python import this ```
your comment will be previewed here
gravatar
Michael Samoylov
Looks like a typo there! sorl-thumbnal
gravatar
haineault
I use django-photologue to achieve a very similar result..

Your app looks great and well made thought !
gravatar
Rob O'Dwyer
Fantastic!

I'm so going to use this the next time i need thumbnails on a site…
Looks like a much nicer way of doing it than the alternatives.
gravatar
memo
That's really awesome!
I was looking for a thumbnail utility and I am so glad you provide one.
gravatar
climbus
Don't use os.path etc. Use storage functions. Your lib isn't usable for other file storages (MogileFS etc)
gravatar
Temnovit
So, this means a thumbnail is generated each time it is requested in the template? Won't this mean a crash of server with a visited site?
gravatar
Will McGugan
Temnovit, it only generates the thumbnail the first time it is requested. Subsequently it can use the version cached on disk.
gravatar
Piotr
It looks like aggdraw doesn't compile on 64-bit Linux, and that a dependency for sore…
gravatar
Will McGugan
Piotr,

There is a version of aggdraw that works on 64-bit linux here:

http://bitbucket.org/2degrees/aggdraw-64bits/overview

gravatar
Piotr
Thanks

Now in the djangoexample app I get

Caught IOError while rendering: No such file or directory: ‘/home/piotr/svn/sorethumb/djangoexample/media/alpha.png’

media does exist with sorethumb subfolders but there isn't any alpha.png file there.
gravatar
Anselmo
Wow, this seems to be well thought-out, unlike other similar django apps. Thank you for opensourcing it!
gravatar
Andre LeBlanc
is this using some kind of name mangling to map sorethumb:“rounded_corners_edged” to the RoundedCornersEdged class? that seems a little unnecessary to me and maybe slightly confusing. otherwise this looks like a great package and will likely be my new replacement for sorl-thumbnail. I too would like to see it using django's filestorage system instead of writing straight to the filesystem though. I've got a site already that uses sorl to store thumbnails on a CDN which this wouldn't work for.
gravatar
Will McGugan
Andre, the name is derived from the class name (camel case converted to lower case with underscores). But, you can set the ‘name’ attribute to set it explicitly.

Django storage will come eventually. But I will accept patches if anyone does it before I get to it!
gravatar
Cris
Is there any possibility to download Sore Thumb if easy install not working right?
gravatar
Will McGugan
Cris,

you can check out a copy with mercurial
hg clone https://sorethumb.googlecode.com/hg/ sorethumb
If you don't have Mercurial, that may be why easy_install isn't working for you!

Will
gravatar
Cris
Thank You. It works when i install Mercurial :)
gravatar
steve pike
Hi Will - this is fantastic.
Just had to make one minor change to get it to work with storage:

In sorethumb/templatetags/sorethumb.py:
if file_field and file_field.storage:
image_path = os.path.join(settings.MEDIA_ROOT, file_field.storage.location, str(file_field))
else:
image_path = os.path.join(settings.MEDIA_ROOT, str(file_field))

:-)
gravatar
Daniel Sokolowski
Hi There,

It appears you have taken down sorethumb download files - will you be putting it back and if so when it might be?

Thanks
gravatar
Will McGugan
Daniel,

Nothing has been taken down, all the files should be available on http://packages.python.org/sorethumb/