Django 3 Web Development Cookbook - Fourth Edition

How it works...

If we navigate to the idea detail page, we should see the large image masked by our watermark, similar to this:

Let's examine how this was done. In the detail template, the src attribute for the <img> tag uses the idea's image specification, that is, watermarked_picture_large, to create a modified image that is then saved under the media/CACHE/ directory and served from there.

The django-imagekit specifications use processors to modify images. Two processors are used there:

• ResizeToFill resizes the image to 800 × 400 px
• Our custom processor, WatermarkOverlay, applies the semi-transparent overlay to it

django-imagekit processors ...