I am using sorl-thumbnail to create thumbnails for my project. I am implementing it only in templates and not in the models or the view. And each of the thumbnail are linked with their original image, which are used by a lightbox. As a newbie, I wanted to know, some of its functionality:
template
is the same, as using it in the models
or the view
and creating a new thumbnail for each one?easy_thumbnail
?Quality
, etc.And lastly, is it a correct way of implementing it? Any advice or suggestion will be much appreciated. Thank you.
html:
{% for photo in photos %}
<div class="thumbnail_container">
<a href="{{MEDIA_URL}}{{photo.image}}" class="gallery" title="{{photo.title}}">
{% thumbnail photo.image "200x200" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="thumbnail">
{% endthumbnail %}
</a>
</div>
{% endfor %}
Edit:
How to achive something like this for the sorl-thumbnails, which can be done in easy-thumbnails:
settings.py
THUMBNAIL_ALIASES = {
'': {
'avatar': {'size': (100,100), 'crop': True},
'forum': {'size': (203,103), 'crop':False},
},
}
And then in the templates I can just chose from the aliases I have defined in the settings.py:
<img src="/static/{{forum.image |thumbnail_url:'forum' }}">
or
<img src="/static/{{forum.image |thumbnail_url:'avatar' }}">
When you use the thumbnail template tag sorl-thumbnail looks up the thumbnail in a Key Value Store. The key for a thumbnail is generated from its filename and storage. The thumbnail filename in turn is generated from the source and requested thumbnail size and options.
django-thumbnail-works provides an enhanced version of the default Django's ImageField, which supports: Processing the original image before it is saved on the remote server. Generating thumbnails of the source image and a mechanism of accessing the thumbnails as attributes of the source image.
Like many things in django sorl-thumbnail
is implemented both simply and elegantly, and the way you are using it is correct.
Each time sorl-thumbnail
is asked for a new thumbnail, it checks to see if one exists in its cache:
Thus, a cache of thumbnails are generated as required. The key,value store is a means of storing the thumbnails that makes them quick to look up and retrieve. Using the steps above the thumbnails will be generated and stored as they are requested by your users.
Thumbnail generation 'on demand' process works well, as images are added gradually to your website, the thumbnails for the new images will be created as required, and thumbnails for older images retrieved from the store.
To store the thumbnails Sorl-thumbnail
uses a combination of a database and memory cache. The database ensures that all the thumbnails are saved should the app and or web server are restarted. The thumbnails will then be loaded into the memory cache (you guessed it) on demand, and thus ensure fast loading times for the user.
To answer your questions:
- Whether implementing it only in the template is the same, as using it in the models or the view and creating a new thumbnail for each one?
It is not possible to generate the thumbnails in the models or views, as they are generated on demand, as the user requests them. This is very efficient. I guess you could write a script to request all the thumbnails, which was run on a nightly basis to ensure all the thumbnails are generated, although this is probably not required.
- How to configure different thumbnails for different image, as it can be done in easy_thumbnail?
All configuration is done in the {% thumbnail %}
tag, if different thumbnails for the same image are generated, these will be stored in the key, value store separately.
- How to override the default values, eg: override the value of Quality, etc
There are a list of settings here: http://sorl-thumbnail.readthedocs.org/en/latest/reference/settings.html, these should all be set in the settings.py
file. The Quality is set to 95 by default, which is pretty high.
Edit - set jpeg quality in settings.py
...
THUMBNAIL_QUALITY = 60
THUMBNAIL_PROGRESSIVE = False
...
These two additions, anywhere in the settings.py
file for your project, will reduce the jpeg quality for the thumbnails to 60, and switch off the creation of progressive jpegs.
Edit - thumbnail aliases
There is no inbuilt support for thumbnail aliases in sorl-thumbnail
. Probably the easiest way to implement them is as small sub templates, which can then be loaded into your main templates.
So a page template, might looks somthing like:
....
{% load thumbnail %}
....
<h3>Recent image uploads:</h3>
{% for item in recentUploads %}
{% include "bigThumbnail.html" %}
{% endfor %}
<h3>Older image uploads</h3>
{% for item in oldUploads %}
{% include "smallThumbnail.html" %}
{% endfor %}
....
The templates for the thumbnails would be stored as separate files in your template directory and could look something like:
bigThumbnail.html
{% thumbnail item.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
smallThumbnail.html
{% thumbnail item.image "40x40" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
In each of the sub templates, all the settings for your 'aliases' can be made. Alternatively, it would be possible to create an additional template tag to read these attributes from settings.py
, this is what easy_thumbnail
does, although would require a lot of programming to achieve the results of the 2 small templates above.
If you have further questions about sorl-thumbnail
, I would be happy to help you with them.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With