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.

Subscribe To our news letter

Subscribe to our news letter to receive latest blog posts into your inbox. Please fill your email address in the below form.
*We don't provide your email contact details to any third parties
Latest Comments
Related Articles
Autocomplete with Django-Haystack and Elasticsearch with single letter querying. Ashwin Kumar

Django's haystack provides autocomplete functionality. To do autocomplete effectively, the search backend(elasticsearch in this case) uses n-grams (essentially a small window passed over the string). ...

Continue Reading...
Extract text with OCR for all image types in python using pytesseract Shirisha Gaddi

Optical Character Recognition(OCR) is the process of electronically extracting text from images or any documents like PDF and reusing it in a variety of ways ...

Continue Reading...
Basics of Django templates Siva Chittamuru

Django template engine comes as part of django framework and its very easy, extensible and handy to develop complex web applications with simplest efforts. Lets ...

Continue Reading...