*Episode 26* PYTHON (Adding the Image Thumbnail in Django)

 

Adding image thumbnails

This episode covers :-

 1) How to create thumbnails with ImageKit.

•  Setup :-

Terminal

cp -fr 27-Image-Gallery 28-Image-Thumbnails

cd 28-Image-Thumbnails

source ../venv/bin/activate

•  Installing ImageKit :-

Terminal

pip install django-imagekit

     Edit mysite app settings.py file and add imagekit to the INSTALLED_APPS list:

mysite/settings.py

INSTALLED_APPS = [

...

'base',

'myapp',

'imagekit', # < here

]

• Adding the thumbnail field :-

    Edit myapp models.py file and add the image_thumbnail field:

mysite/models.py

from django.db import models

from imagekit.models import ImageSpecField # < here

from pilkit.processors import ResizeToFill # < here

class Flower(models.Model):

title = models.CharField(max_length=255, default='')

description = models.TextField(default='')

image = models.ImageField(default='', blank=True, uploa\

d_to='images')

image_thumbnail = ImageSpecField(source='image',

processors=[ResizeToFill(350, 200)],

format='JPEG',

options={'quality': 60}) # < here

     Edit myapp index.html file and replace {{ flower.image.url }} with {{ flower.image_thumbnail.url }}:

myapp/templates/myapp/index.html

<img class="card-img-top" src="{{ flower.image_thumbnail.ur\

l }}"

      Visit the homepage to generate the image thumbnails. They will be served from paths like this:

mediaCACHE/images/images/Agapanthus.jpg

• In Details :-

     It’s very useful to generate thumbnails for images. You can always add links to the original images if needed. We use ImageKit to crop and resize the images. The thumbnails are generated as the page where the images are used is accessed the first time.

     Using the original uploaded images can result in very heavy pages. For example Amelanchier_asiatica5.jpg that I used for testing was 4.3MB. Image processing reduced that size to 18.2KB!

     ImageSpecField is similar to ImageField but it automatically applies the image processing we specify:

ImageSpecField does the image proccessing

image = models.ImageField(default='', blank=True, upload_to\

='images')

image_thumbnail = ImageSpecField(source='image',

processors=[ResizeToFill(350, 200)],

format='JPEG',

options={'quality': 60})

      source='image' is the original image field. We can add different processors (https://samuli.to/Processors) to manipulate the image. ResizeToFill resizes and crops the image. Here we also specify image format and compression.

     You can access the thumbnail URL using the dot “.” notation in templates: {{ flower.image_thumbnail.url }}.

 Summary

• Creating thumbnails can reduce the image sizes substantially.
• ImageKit package enables a selection of image processing tools.

👈Episode 25(P).                                                                           Episode 27(P)👉

Share this post

PRINT THIS POST