How to create responsive thumbnails in Django templates using sorl-thumbnail?

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

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.

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

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 %}" >
<img src="images/image1.jpg" srcset="images/image1.jpg 280w, images/image2.jpg 350w">

The article was originally published at MicroPyramid blog.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
MicroPyramid

MicroPyramid

1K Followers

Python, Django, Android and IOS, reactjs, react-native, AWS, Salesforce consulting & development company