Introducing django-imagehandler // Notebook // Ludwig P.

Introducing django-imagehandler

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.

Template tags

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.

Get it from Github

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.

Still under development

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.

cropper1

What I use it for

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!

Related notes

13 comments

14th March 2009

Karan Bhangui

Nice job Ludwig. I’m gonna give it a shot, when I get some time, for user avatars and book covers.
16th March 2009

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
18th March 2009

Richard

It would be cool if there were a dynamic dimension measurement or if you could set the pixel measurement before crop.
18th March 2009

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.
22nd March 2009

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
22nd March 2009

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.
22nd March 2009

Greg Fuller

Hey thanks, I’ll be checking back.
27th November 2009

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.
27th November 2009

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)
27th November 2009
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:
```
def __unicode__(self):
    try: 
        return self.image.url
    except:
        return str(self.image)
```
30th November 2009
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
```
@register.simple_tag
def get_original(field, object_id, content_type_id):
    if field.name == 'original':
        field.field.queryset = Original.objects.filter(object_id = object_id, content_type__id = content_type_id)

return field
```
14th December 2009

Lalslically

Alohi. Mi zer novazo. http://jestormani.net
19th January 2010

ngan hang

Great post, thank you.