Friday, 13th March 2009
While rebuilding the portfolio part of my site, I dreadfully opened up Photoshop to start recropping all of my thumbnails and screenshots, and halfway through I just knew there had to be a much more pleasant way of doing this.
I instantly got an image in my head of the way that I’d like to be able to manage all my screenshots and thumbnails, without any cumbersome work. Before I go any further, and before confusing everyone even more, check this quick video of django-imagehandler in action:
First, it lets me upload a few big images, that I call originals - which I then can crop to any size that works for the current layout of the website. But the part that I’m excited about isn’t the actual cropping, but the fact that you can go back and change the size & location of the crop without having to redo anything - you just resize and hit save. No more fuss, it just works.
Now, just being able to attached cropped images to objects isn’t all that great, so you can add an identification string to each of the cropped images to you can fetch them separately in your templates.
So, let’s say I’ve identified one of the crops as thumbnail, to fetch it inside a template, all I gotta write is:
{% load images %}
{% get_image for my_obj 'thumbnail' as thumbnail %}
<img src="{{ thumbnail }}" alt="thumbnail" />
You just pass the template tag the object which has the imaged attached to it and the unique identifier.
And to fetch all images attached to an object:
{% get_images_count for obj as images_count %}
{% get_images_list for obj as images_list %}
<h3>{{ images_count }} Screenshot{{ images_count|pluralize }}</h3>
<ul class="screenshots clearfix">
{% for image in images_list %}
<li>
<a href="{{ image.original }}"><img src="{{ image.url }}" alt="{{ image.caption }}" /></a>
</li>
{% endfor %}
</ul>
I’ve got some ideas for more template tags, but this is what’s available at the moment.
The source is available at Github (http://github.com/luddep/django-imagehandler/tree/master), so I encourage everyone to fork it and play around with it.
I’m still actively developing this, and it’s not 100% finished yet. Although, I am currently using it on this site, and it’s working pretty damn good.

I’m currently using it for the thumbnails and screenshots in my portfolio and together with this solution to add perfectly sized images to my posts - such as the one above.
I’m so far incredibly satisfied with how it all works together, but if you’ve got any suggestion - shoot them my way!
Karan Bhangui
Nice job Ludwig. I’m gonna give it a shot, when I get some time, for user avatars and book covers.
Ian
Is it possible to have the identifiers work via a URL? This way they can be accessed inside blocks of content like the body of a blog post. For example:
/thumbnail/245.png /avatar/245.png /feature/245.png
Richard
It would be cool if there were a dynamic dimension measurement or if you could set the pixel measurement before crop.
Ludwig Pettersson
Ian, I guess - but I think it would be easier to use something like this for it.
Richard, you can set the width/height by selecting and editing the dimensions to the bottom right of the cropper.
Greg Fuller
This is nice. I’ve come across one issue. When you select the image in the crop inline, it shows all images and not just the images for the current content item (which is a project in the sample). I’ve tried to figure out how to use a ForeignKeyFilter on this, but to no avail. Any help would be appreciated.
Thanks, Greg
Ludwig Pettersson
Greg, yeah - that’s one of the main bugs right now.. haven’t had any time to try to look into it for a few days, but it’s on the list of to-do’s, for sure.
Greg Fuller
Hey thanks, I’ll be checking back.
João gonçalves
Hei, i’ve been using this, and i only found one small bug when trying to delete original image.
It gives back this “The ‘image’ attribute has no file associated with it.” but it still erases the picture.
I’m wondering if your still active on this project, because it’s very useful but it still needs more development.
João Gonçalves
I’ve just solved it.
in django_imagehandler/models.py in original.model.uincode
Just change : return self.image.url
to : return str(self.image)
João Gonçalves
Never mind my last comment, it just created another problem.
the solution i found to be better at this point was:
João gonçalves
about the bug Greg reported: “When you select the image in the crop inline, it shows all images and not just the images for the current content item ”
I’ve found a solution:
In your admin template crops.html line in line 45
replace: {{ field.label_tag }}{{ field.field }}
by: {{ field.labeltag }}{% getoriginal field.field objectid contenttype_id %}
and import a template tag file with this tag
Lalslically
Alohi. Mi zer novazo. http://jestormani.net
ngan hang
Great post, thank you.