Transform Images with django-imagekit

In this video we will walk through a couple of easy ways to transform images as you need them. django-imagekit makes this fairly simple and straight forward. This video provides an introduction to using it.

Download HD Version next video: Hosting Django on a VPS

Show Notes

resources

django-imagekit

pilkit

background_image.html

{% extends "base.html" %}

{% block content %}
<div>
    <a href="{% url "background_image_upload" %}">Upload Image</a>
</div>
<img src="{{ image.image.url }}" />
<br />
{% endblock %}

profile_image.html

{% extends "base.html" %}
{% load imagekit %}

{% block content %}
<div>
    <a href="{% url "profile_image_upload" %}">Upload Image</a>
</div>
<img src="{{ image.image.url }}" />
<br />
<img src="{{ image.thumbnail.url }}" />
<br />
<img src="{{ image.smart.url }}" />
<br />

{% generateimage 'main:crop' source=image.image %}
{% endblock %}

imagegenerators.py

from imagekit import ImageSpec, register
from imagekit.processors import SmartCrop

class CroppedImage(ImageSpec):
    processors = [SmartCrop(60, 60)]
    format = 'PNG'

register.generator('main:crop', CroppedImage)

models.py

from django.db import models

from imagekit.models import ImageSpecField, ProcessedImageField
from imagekit.processors import ResizeToFill, SmartResize


class ProfileImage(models.Model):
    image = models.FileField(upload_to='profile/%Y/%m/%d')

    thumbnail = ImageSpecField(
        source='image', processors=[ResizeToFill(50, 50)], format='PNG',
        options={'quality':60})

    smart = ImageSpecField(
        source='image', processors=[SmartResize(50, 50)], format='PNG')


class BackgroundImage(models.Model):
    image = ProcessImageField(
        upload_to='background/%Y/%m/%d', processors=[ResizeToFill(600, 600)],
        format='PNG')