Django Thumbnails

Requirements:

requirements/base.txt

easy-thumbnails==2.2
pillow

For an app:

# example/base.py

THUMBNAIL_DEBUG = DEBUG
THIRD_PARTY_APPS = (
    ...
    'easy_thumbnails',

For a project:

# settings/production.py
THUMBNAIL_DEBUG = DEBUG

# settings/local.py
THUMBNAIL_DEBUG = DEBUG

# settings/base.py
DJANGO_APPS = (
    ...
    'django.contrib.staticfiles',

THIRD_PARTY_APPS = (
    ...
    'easy_thumbnails',

If you are using Amazon S3 storage:

# settings/production.py - below 'DEFAULT_FILE_STORAGE'
THUMBNAIL_DEFAULT_STORAGE = 'storages.backends.s3boto.S3BotoStorage'

In your templates:

{% load thumbnail %}
<img src="{% thumbnail story.picture 100x100 crop %}" />

Tip

We have found that crop='center' works consistently to fix the size given - whereas autocrop does not always seem to do that e.g. {% thumbnail picture.image 1024x340  crop='center' %}.

The easy thumbnail module creates a new image alongside your current image e.g:

ls -l media/story/2013/10/18/

banner.jpg
banner.jpg.100x100_q85_crop.jpg

Issues

If you are having trouble with the thumbnail template tag and you don’t know what is causing the problem, then start by replacing the thumbnail tag with the MEDIA_URL and path e.g:

<!-- replace -->
<img src="{% thumbnail c.picture 541x326 %}">

<!-- with -->
<img src="{{ MEDIA_URL }}{{ c.picture }}">

Warning

If you are using runserver, make sure you are running it from the project folder. If you don’t, it won’t be able to find the media!