How to create responsive thumbnails 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.

    By Posted On
SENIOR DEVELOPER at MICROPYRAMID

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Django efficient implementation of Amazon s3 and Cloudfront CDN for faster loading. Chaitanya Kattineni

Django by default to store the files in your local file system. To make your files load quickly and secure we need to go for ...

Continue Reading...
Understanding Django Permissions And Groups Ashwin Kumar

Django comes with a simple permissions system. It provides a way to assign permissions to specific users and groups of users. We can have permissions ...

Continue Reading...
Django Custom Management Command Dinesh Deshmukh

In Django project, We could manage by executing some commands which could be invoked through the manage.py.

For example:
# Sync database
python manage.py syncdb

...

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