How to create thumbnail image in Django templates using sorl-thumbnail?

Sorl thumbnail is the package which is being widely used to generate thumbnail in Django. It will create a thumbnail of given size for the given image. The following is a sample code to create the thumbnail in Django template.

{% thumbnail item.image "100x100" as im %}
    <img src="{{ im.url }}">
{% endthumbnail %}

The above syntax will create a thumbnail in cache folder of your folder structure. But the only problem with this is, the thumbnail won’t be consistent for the responsive designs. For example, if we create a thumbnail of size 100x100, if the responsive blocks for the thumbnail are of various sizes like 100x100, 200x250 and 50x50, then the thumbnail generated will be apt for the screens which are of size 100x100 but when it comes to other two screens the thumbnail will get compressed or stretched.

srcset:

Html5 has a solution for the above problem in terms of images. Html5’s srcset attribute of image tag(<img>) is the appropriate solution for the above problem. Here is an example of how to use ‘srcset’ attribute.

Suppose we want a different size (height, width) image on a larger or smaller viewport. Consider this example:

<img src="images/image1.jpg"
srcset="images/image1.jpg 200w, images/image2.jpg 400w, images/image3.jpg 600w">

w descriptor: This describes the width of the image being referenced. 

In the above example, the browser will decide which image to pick from above for a specific display because of srcset attribute. We can give any images with any sizes separated by a comma(,).

Sorl thumbnail with srcset:

<img src="{% thumbnail <image_url> "280x175" padding=True as im %}
               {{ im.url }}
          {% endthumbnail %}"
     srcset="{% thumbnail <image_url> "280x175" padding=True as im %}
                {{ im.url }} {{ im.x }}w
             {% endthumbnail %},
             {% thumbnail <image_url> "350x250" padding=True as im %}
                 {{ im.url }} {{ im.x }}w
             {% endthumbnail %}" >

The above snippet will be rendered to the following in your  template.

<img src="images/image1.jpg" srcset="images/image1.jpg 280w, images/image2.jpg 350w">

From the above rendered template, srcset will automatically assign the corresponding image to the src attribute of the image.

For low resolutions, it will take image1.jpg  and for high resolutions, it will take image2.jpg

Note: Make sure there is whitespace between image name and w descriptor.

We will provide Django development Services. To Know more about our services and developers contact hello@micropyramid.com

Posted On 19 June 2016 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Introduction to Django's Class based views - Understanding how a class based view works

Django has MVT architecture. A view in django is just a callable that takes a request and returns a response. But this can be more ...

Continue Reading...
Handling Custom Error Pages(404, 500) In Django

404 Page not found and 500 Internal server errors generally occur in every website. When these errors occurs, generally for Django application it will load ...

Continue Reading...
How to index binary files in django haystack

Now we are going to index text content which is stored in structured files such as PDFs, Microsoft Office documents, images, etc using haystack and ...

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties