How do I use sorl-thumbnail? (django)

Question

I've been looking at the sorl-thumbnail's documentation, and I still can't figure out how to: 1. upload images to sorl-thumbnail. 2. selectively show images from sorl-thumbnail. (for example, load a specific image from sorl-thumbnail from a view and show it, with customized size, etc.)

Could you give some specific examples on how to use this library in a django view?

Thanks in advance : )

Answer 1

If you want greater flexibility you can generate the thumbnail right in the view. The following is straight from the sorl-thumbnail documentation :

from sorl.thumbnail import get_thumbnail

im = get_thumbnail(my_file, '100x100', crop='center', quality=99)

im then is the same thing as what you'd get back from the thumbnail template tag. So, you can add that variable to the template context, or just some part of it. For example if you just wanted the URL:

my_context = {
    'image_url': im.url,
}

Answer 2

You can use sorl.thumbnail using the thumbnail template tags. Here's an example:

{% load thumbnail %}

{% thumbnail recipe.image "430x250" as thumb %}
     <img src="{{ thumb.url }}" width="{{ thumb.width }}" height="{{ thumb.height }}" alt="{{ recipe.title }}" />
{% endthumbnail %}

You don't upload images to sorl.thumbnail or load them from sorl.thumbnail. After proper configuration it will resize and store the images automatically and you can use the thumbnail template tag to get the proper URL of the image.

Answer 3

When I have to use sorl-thumbnail I make difference between 2 kind of images:

Django objects with ImageField

When I have an object in Django with an ImageField I render it with thumbnail like this:

# Let's supose our object imagefield is called img
{% thumbnail obj.img "100" upscale=false as im %}
   <img src="{{ im.url }}"/>
{% empty %}  # In case the object doesn't have an image, use generic one
   {% thumbnail "img/empty_img.jpg" "236" upscale=false as im %}
        <img src="{{ im.url }}" />
   {% endthumbnail %}
{% endthumbnail %}  

---

Images by url/path

To load images using local path of the project:

{% thumbnail "img/myImage.jpg" "236" upscale=false as im %}
    <img src="{{ im.url }}" />
{% endthumbnail %}

Important: Remember that thumbnail concatenates the MEDIA_URL to the path you provide, so in this case you need a path like yourapp/media/img/myImage.jpg

To load images using an URL is easy and sample:

{% thumbnail "http://www.nextgen-gallery.com/wp-content/uploads/2008/12/abend.jpg" "236" upscale=false as im %}
    <img src="{{ im.url }}" />
{% endthumbnail %}