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
django Payu Payment gateway Integration Shirisha Gaddi

In this blog, we will see how to integrate Django and PayU Payment Gateway. To integrate with PayU, we have package called "django-payu" - a ...

Continue Reading...
Understanding 'GenericForeignKey' in Django Ashwin Kumar

In some cases the we might want to store generic model object, rather a particular specific model as 'ForeignKey'. Generic model object means adding a ...

Continue Reading...
Custom Password Less Authentication in Django Nikhila Mergu

Authentication backends allow the ability to change what method checks your users credentials.

For web services, ie Facebook authentication, you don't have access to user ...

Continue Reading...