diff --git a/Dockerfile b/Dockerfile index e18fbf23a..71704afd0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -31,6 +31,8 @@ RUN apk add --no-cache libressl-dev libffi-dev python3-dev # Required for python lxml RUN apk add --no-cache libxslt-dev +# Required for webp images +RUN apk add --no-cache libwebp libwebp-tools # Set environment varibles ENV PYTHONUNBUFFERED 1 diff --git a/di_website/common/templatetags/responsive.py b/di_website/common/templatetags/responsive.py index 897808c0f..376e04f57 100644 --- a/di_website/common/templatetags/responsive.py +++ b/di_website/common/templatetags/responsive.py @@ -1,3 +1,5 @@ +import os +from PIL import Image from django import template from wagtail.images.models import SourceImageIOError from wagtail.images.templatetags.wagtailimages_tags import ImageNode @@ -7,6 +9,17 @@ register = template.Library() +def convert_to_webp(file_path): + if os.path.exists(file_path): + convert_image = Image.open(file_path) + # Convert the image to WebP format + if file_path.lower().endswith((".jpg", ".jpeg", ".png")): + webp_path = os.path.splitext(file_path)[0] + ".webp" + convert_image.save(webp_path, "WebP") + return True + return False + + @register.tag(name="responsiveimage") def responsiveimage(parser, token): bits = token.split_contents()[1:] @@ -129,12 +142,17 @@ def render(self, context): tmprend.file.name = 'not-found' for index, rend in enumerate(srcset_renditions): + if convert_to_webp(rend.file.path): + rend.file.name = rend.file.name.rsplit('.', 1)[0] + '.webp' newsrcseturls.append(' '.join([rend.url, widths[index]])) except KeyError: newsrcseturls = [] pass + if convert_to_webp(rendition.file.path): + rendition.file.name = rendition.file.name.rsplit('.', 1)[0] + '.webp' + if self.output_var_name: rendition.srcset = ', '.join(newsrcseturls) diff --git a/di_website/settings/base.py b/di_website/settings/base.py index 5331b056d..88c6f1b01 100644 --- a/di_website/settings/base.py +++ b/di_website/settings/base.py @@ -331,3 +331,12 @@ EMAIL_ADMINS_CACHE_TIMEOUT = 30 EMAIL_ADMINS_MAX_EMAILS_PER_TIMEOUT = 2 EMAIL_ADMINS_CACHE_COUNTER_KEY = 'email_admins_cache_counter_key' + +WAGTAILIMAGES_FORMAT_CONVERSIONS = { + 'webp': 'webp', + 'jpg': 'webp', + 'jpeg': 'webp', + 'png': 'webp', + 'bmp': 'webp', + 'gif': 'gif' +} diff --git a/di_website/static/img/bluebell-stripes.webp b/di_website/static/img/bluebell-stripes.webp new file mode 100644 index 000000000..eaed4e3e6 Binary files /dev/null and b/di_website/static/img/bluebell-stripes.webp differ diff --git a/di_website/static/img/lavendar-stripes.webp b/di_website/static/img/lavendar-stripes.webp new file mode 100644 index 000000000..615b3d250 Binary files /dev/null and b/di_website/static/img/lavendar-stripes.webp differ diff --git a/di_website/static/img/leaf-stripes.webp b/di_website/static/img/leaf-stripes.webp new file mode 100644 index 000000000..753a5e203 Binary files /dev/null and b/di_website/static/img/leaf-stripes.webp differ diff --git a/di_website/static/img/marigold-stripes.webp b/di_website/static/img/marigold-stripes.webp new file mode 100644 index 000000000..86b9a9c2e Binary files /dev/null and b/di_website/static/img/marigold-stripes.webp differ diff --git a/di_website/static/img/poppy-stripes.webp b/di_website/static/img/poppy-stripes.webp new file mode 100644 index 000000000..86b9a9c2e Binary files /dev/null and b/di_website/static/img/poppy-stripes.webp differ diff --git a/di_website/static/img/rose-stripes.webp b/di_website/static/img/rose-stripes.webp new file mode 100644 index 000000000..17596e3c3 Binary files /dev/null and b/di_website/static/img/rose-stripes.webp differ diff --git a/di_website/static/img/sunflower-stripes.webp b/di_website/static/img/sunflower-stripes.webp new file mode 100644 index 000000000..26d78008e Binary files /dev/null and b/di_website/static/img/sunflower-stripes.webp differ diff --git a/di_website/templates/blocks/basic_infographic.html b/di_website/templates/blocks/basic_infographic.html index 247e6b91f..679b99d4b 100644 --- a/di_website/templates/blocks/basic_infographic.html +++ b/di_website/templates/blocks/basic_infographic.html @@ -13,7 +13,7 @@