Versions
Tested with these packages:
- Django==4.2.4
- django-imagekit==4.1.0
Troubleshooting
Are you encountering the following error: AttributeError: module 'PIL.Image' has no attribute 'ANTIALIAS'?.
Try downgrading Pillow:
pip uninstall pillow
pip install Pillow==9.5.0
Setup Project
Oneliner (Windows):
mkdir mysite && cd mysite && python -m venv venv && venv\Scripts\activate.bat && pip install django pillow django-imagekit && django-admin startproject mysite . && python manage.py migrate && set "DJANGO_SUPERUSER_PASSWORD=admin" && python manage.py createsuperuser --noinput --username admin --email admin@example.org && python manage.py startapp myapp && python manage.py runserver
Oneliner (macOS, Linux):
mkdir mysite && cd mysite && python -m venv venv && source venv/bin/activate && pip install django pillow django-imagekit && django-admin startproject mysite . && python manage.py migrate && export DJANGO_SUPERUSER_PASSWORD=admin && python manage.py createsuperuser --noinput --username admin --email admin@example.org && python manage.py startapp myapp && python manage.py runserver
OR do it manually:
mkdir mysite
cd mysite
python3 -m venv venv
venv\Scripts\activate.bat (Windows)
source venv/bin/activate (macOS, Linux)
pip install django pillow django-imagekit
django-admin startproject mysite .
python manage.py migrate
python manage.py createsuperuser
python manage.py startapp myapp
python manage.py runserver
Edit mysite/settings.py
Add these lines to the project settings file:
import os # IMPORT THIS
INSTALLED_APPS = [
# START
'myapp.apps.MyappConfig',
'imagekit',
# END
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
# START
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# END
Edit myapp/models.py
Create the following model. This allows us to upload an image and automatically generate 2 thumbnails for it:
from django.db import models
from imagekit.models import ImageSpecField
from pilkit.processors import Thumbnail
class Post(models.Model):
image = models.ImageField(upload_to='images')
image_medium = ImageSpecField(source='image',
processors=[Thumbnail(200, 100)],
format='JPEG',
options={'quality': 60})
image_small = ImageSpecField(source='image',
processors=[Thumbnail(100, 50)],
format='JPEG',
options={'quality': 60})
slug = models.SlugField(max_length=255, unique=True)
Edit myapp/admin.py
Register the Post model so that we can add content using the admin app:
from django.contrib import admin
from . import models
admin.site.register(models.Post)
Run migrations
Create a database table for the Post model:
python manage.py makemigrations
python manage.py migrate
Edit mysite/urls.py
Add these lines to the project urls.py file:
from django.contrib import admin
from django.urls import path
# START
from django.conf.urls.static import static
from django.conf import settings
from myapp.views import PostDetailView
# END
urlpatterns = [
# START
path('blog/<slug:slug>/', PostDetailView.as_view(), name='post_detail'),
# END
path('admin/', admin.site.urls),
# USE THE STATIC() FUNCTION:
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
The static() function allows us to serve media files (the uploaded and resized images) during development.
Edit myapp/views.py
Create a view for blog posts:
from django.views.generic import DetailView
from myapp.models import Post
class PostDetailView(DetailView):
model = Post
PostDetailView
uses a template named post_detail.html automatically.
Create myapp/templates/myapp/post_detail.html
Create a file called post_detail.html in the myapp/templates/myapp directory (you have to create the templates folder). Add these lines to it:
{% if post.image %}
<img src="{{ post.image.url }}">
<img src="{{ post.image_medium.url }}">
<img src="{{ post.image_small.url }}">
{% endif %}
Create content and visit the blog detail page
Visit /admin/
to create a new blog post:
Visit /blog/django-tutorial/
and you should see the original image and 2 thumbnails:
Thumbnails are generated when you first visit the detail page.
The original image is served from the media/static
folder:
media/static/images/05.jpg
The thumbnails are served from the media/CACHE
folder:
media/CACHE/images/images/21da-JZerh...jpg