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.
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!
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.
Goose Down Duvet
Great tips. I will try it later.
sonnerie portable gratuit
This article gives the light in which we can observe the reality. This is very nice one and gives in depth information. Thanks for this nice article. Good post…..Valuable information for all.
HaxBlagma
ma zugio les noro zugioroz http://zugioroz.com - zugioroz http://zugioroz.com
dot net chat
This looks absolutely perfect. All these tinny details are made with lot of background knowledge. I like it a lot. Thanks
photos
I truly appreciate your blog,! :D the articles ae always great !
Oster
That is so cool.
Patent Agent India
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.
Joaquin
Hi, Thanks for your work!
I am facing a problem here, in the admin crop area, it shows the original image sooo large. Is there a way to show the original image in proper size?
Thanks, Joaquin Quintas
Jeux
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.
Wallpapers
Great tips! I’m stating with djangoo, this is very useful.
White Nooka Watch
To be a good charitable being is to have a make of openness to the far-out, an cleverness to guardianship undeterminable things beyond your own manage, that can lead you to be shattered in hugely exceptionally circumstances on which you were not to blame. That says something exceedingly impressive relating to the condition of the ethical autobiography: that it is based on a corporation in the up in the air and on a willingness to be exposed; it’s based on being more like a weed than like a jewel, something kind of tenuous, but whose extremely special beauty is inseparable from that fragility.
curar la impotencia
Exercise ferments the humors, casts them into their adapted channels, throws off redundancies, and helps feather in those hush-hush distributions, without which the association cannot subsist in its vigor, nor the incarnation act with cheerfulness.
angular cheilitis
yes thanks the hard wok is ap
seo agency
WOW! social networking site really have changed the world.
watch the last exorcism online
Thanks for sharing this link, but unfortunately it seems to be offline… Does anybody have a mirror or another source? Please answer to my post if you do!
I would appreciate if a staff member here at luddep.se could post it.
Thanks, Alex
betclic
I think a nice blog