DEV Community

Cover image for Creating thumbnails programmatically in Django using django-imagekit
sevdimali
sevdimali

Posted on

 

Creating thumbnails programmatically in Django using django-imagekit

Django-imagekit is an app for processing images. You can programmatically change images with imagekit. For this blog post, we will create thumbnails and look for its Django Rest Framework usage (DRF).

Installation of django-imagekit

pip install pillow
pip install django-imagekit
INSTALLED_APPS = [
'imagekit',
]

Enter fullscreen mode Exit fullscreen mode

Creating a thumbnail with django-imagekit
For creating a thumbnail in Django from an image we will use ImageSpecField. An image spec is a type of image generator that generates a new image from a source image. Now let’s look for a specific example.

Models.py

class Category(models.Model):
    name = models.CharField(
        verbose_name=_("Category Name"),
        help_text=_("Required and unique"),
        max_length=255,
        unique=True,
    )
    picture = models.ImageField(null=True, upload_to="images/", blank=True, verbose_name="Category picture")
    thumbnail150x150 = ImageSpecField(source='picture', processors=[ResizeToFill(150, 150)], format="PNG",
                                      options={'quality': 60})
    cdate = models.DateTimeField(auto_now_add=True)
    udate = models.DateTimeField(auto_now=True)

Enter fullscreen mode Exit fullscreen mode

In the above example, we specified source=’picture’, in this way we tell use the picture field as a source and generate a new image.

So in your templates, you can simply use it like below:

<img src="{{ category.thumbnail150x150.url }}" alt="img">
Enter fullscreen mode Exit fullscreen mode

If you want to not create a new image, just change the original image, then we will use ProcessedImageField and replace a source to upload_to.

class Category(models.Model):
    name = models.CharField(
        verbose_name=_("Category Name"),
        help_text=_("Required and unique"),
        max_length=255,
        unique=True,
    )
    thumbnail150x150 = ProcessedImageField(upload_to="images/", processors=[ResizeToFill(150, 150)], format="PNG",
                                      options={'quality': 60})
    cdate = models.DateTimeField(auto_now_add=True)
    udate = models.DateTimeField(auto_now=True)

Enter fullscreen mode Exit fullscreen mode

You are able to use as many processors as you’d like, which will all be run in order.

class Category(models.Model):
    name = models.CharField(
        verbose_name=_("Category Name"),
        help_text=_("Required and unique"),
        max_length=255,
        unique=True,
    )
    picture = models.ImageField(null=True, upload_to="images/", blank=True, verbose_name="Category picture")
    thumbnail150x150 = ImageSpecField(source='picture', processors=[ResizeToFill(150, 150), TrimBorderColor(), ],
                                      format="PNG",
                                      options={'quality': 60})
    cdate = models.DateTimeField(auto_now_add=True)
    udate = models.DateTimeField(auto_now=True)

Enter fullscreen mode Exit fullscreen mode

“django-imagekit” usage with DRF(Django Rest Framework)

class CategorySerializer(serializers.ModelSerializer):
    picture = serializers.SerializerMethodField()
    thumbnail = serializers.SerializerMethodField()
    class Meta:
        model = Category
        fields = ('id', 'name', 'picture','thumbnail')
    def get_picture(self, obj):
        return obj.picture.url
    def get_thumbnail(self, obj):
        return obj.thumbnail150x150.url
Enter fullscreen mode Exit fullscreen mode

Thanks for reading. I hope you enjoyed it ❤.
The post first appeared in my blog

Keep Learning..!

Oldest comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.