How to do it...

Follow these steps to apply a watermark to the displayed idea images:

  1. If you haven't done so already, install django-imagekit into your virtual environment:
(env)$ pip install django-imagekit==4.0.2
  1. Put "imagekit" into INSTALLED_APPS in the settings:
# myproject/settings/_base.py
INSTALLED_APPS = [
# …
"imagekit",
]
  1. 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
  1. 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"
)
  1. 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:

  1. Run the collectstatic management command afterward:
(env)$ export DJANGO_SETTINGS_MODULE=myproject.settings.dev
(env)$ python manage.py collectstatic
  1. 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 %}
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.42.94