Follow these steps to apply a watermark to the displayed idea images:
- If you haven't done so already, install django-imagekit into your virtual environment:
(env)$ pip install django-imagekit==4.0.2
- Put "imagekit" into INSTALLED_APPS in the settings:
# myproject/settings/_base.py
INSTALLED_APPS = [
# …
"imagekit",
]
- In the core app, create a file called processors.py with a WatermarkOverlay class, as follows:
# myproject/apps/core/processors.py
from pilkit.lib import Image
class WatermarkOverlay(object):
def __init__(self, watermark_image):
self.watermark_image = watermark_image
def process(self, img):
original = img.convert('RGBA')
overlay = Image.open(self.watermark_image)
img = Image.alpha_composite(original,
overlay).convert('RGB')
return img
- In the Idea model, add the watermarked_picture_large specification next to the picture field, as follows:
# myproject/apps/ideas/models.py
import os
from imagekit.models import ImageSpecField
from pilkit.processors import ResizeToFill
from django.db import models
from django.conf import settings
from django.utils.translation import gettext_lazy as _
from django.utils.timezone import now as timezone_now
from myproject.apps.core.models import CreationModificationDateBase, UrlBase
from myproject.apps.core.processors import WatermarkOverlay
def upload_to(instance, filename):
now = timezone_now()
base, extension = os.path.splitext(filename)
extension = extension.lower()
return f"ideas/{now:%Y/%m}/{instance.pk}{extension}"
class Idea(CreationModificationDateBase, UrlBase):
# …
picture = models.ImageField(
_("Picture"), upload_to=upload_to
)
watermarked_picture_large = ImageSpecField(
source="picture",
processors=[
ResizeToFill(800, 400),
WatermarkOverlay(
watermark_image=os.path.join(settings.STATIC_ROOT,
'site', 'img', 'watermark.png'),
)
],
format="PNG"
)
- Using a graphical program of your choice, create a semi-transparent PNG image with white text or a logo on a transparent background. Make it 800 x 400 px in size. Save the image as site_static/site/img/watermark.png. Here's what it might look like:
- Run the collectstatic management command afterward:
(env)$ export DJANGO_SETTINGS_MODULE=myproject.settings.dev
(env)$ python manage.py collectstatic
- Edit the idea detail template and add the watermarked image there, as follows:
{# ideas/idea_detail.html #}
{% extends "base.html" %}
{% load i18n %}
{% block content %}
<a href="{% url "ideas:idea_list" %}">{% trans "List of ideas"
%}</a>
<h1>
{% blocktrans trimmed with title=idea.translated_title %}
Idea "{{ title }}"
{% endblocktrans %}
</h1>
<img src="{{ idea.watermarked_picture_large.url }}" alt="" />
{{ idea.translated_content|linebreaks|urlize }}
<p>
{% for category in idea.categories.all %}
<span class="badge badge-pill badge-info">
{{ category.translated_title }}</span>
{% endfor %}
</p>
<a href="{% url 'ideas:download_idea_picture' pk=idea.pk %}"
class="btn btn-primary">{% trans "Download picture" %}</a>
{% endblock %}