sorl-thumbnail is a very useful package to deal with images in the Django template. It is very easy to implement. Resizing and cropping images become simple with inbuilt tags provided by sorl-thumbnail.
Installation and setup:
To install sorl-thumbnail.
To setup, add sorl.thumbnail to INSTALLED_APPS in settings.
Then create the migrations with
and migrate with
Now sorl-thumbnail is ready to use in your project.
To use sorl-thumbnail we should install python image library
Key Value Store:
sorl-thumbnail needs key value store to maintain the keys and values of the thumbnails generated from the images and its storage. Storage can be our own server or it can be any cloud storage services like Amazon S3, Microsoft azure etc. To store the images in these cloud storage services, django-storages package is very useful.
Template tags and filters for sorl-thumbnail:
sorl-thumbnail has one tag and three filters to use in templates. To use these filters and tag we should load them first with
When you use this tag sorl-thumbnail searches the thumbnail in Key Value store. If thumbnail found it returns the serialized thumbnail information, if not found it will generate the thumbnail and stores the information in Key Value store.
We need to provide image field and width, height in pixels to thumbnail to display the image in given width and height. It can preserve aspect ratio.
thumbnail also provide some options like crop, format, quality, padding, padding_color.. etc to customize the image.
Now the image will get padding at the top and bottom.
This filter is used to check whether the image is in portrait format (return True if the image height is larger than width)
This filter is used to calculate the margin against padding box.
here the image gets padding vertically in a 100x100 box.
This filter is used to get the alternative resolution versions of the thumbnail. The resolution you provided should be one of the THUMBNAIL_ALTERNATIVE_RESOLUTIONS in settings.
To use above filters you should have THUMBNAIL_ALTERNATIVE_RESOLUTIONS = [1.5, 2] in your settings.
Useful Thumbnail management commands:
It will remove thumbnails for unknown and nonexisting images from the Key Value store.
It will empty the Key Value store of keys starts with settings.THUMBNAIL_KEY_PREFIX. It doesn't delete any files.