From 81ae2adca524de2155707e6ae2ab23e0a3dda2aa Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Tue, 28 Jun 2022 09:48:30 +0200
Subject: [PATCH] feat: improve image renditions to respect the focal point and
provide srcset where meaningful as well
---
district/models.py | 2 +-
.../district/blocks/candidate_list_block.html | 2 +-
.../district/blocks/person_badge_block.html | 12 ++++++------
.../district/district_election_campaign_page.html | 4 ++--
.../district_geo_feature_collection_page.html | 9 +++++----
.../district/district_geo_feature_detail_page.html | 2 +-
.../templates/district/district_person_page.html | 8 +++++---
shared/templates/shared/person_badge_snippet.html | 8 ++++----
8 files changed, 25 insertions(+), 22 deletions(-)
diff --git a/district/models.py b/district/models.py
index 715f307b..f8bf09fd 100644
--- a/district/models.py
+++ b/district/models.py
@@ -1647,7 +1647,7 @@ class DistrictGeoFeatureDetailPage(
def as_geojson_object(self, request):
collection = json.loads(self.geojson)
image = (
- self.image.get_rendition("fill-1200x675|jpegquality-80").url
+ self.image.get_rendition("fill-1200x675-c75|jpegquality-80").url
if self.image
else None
)
diff --git a/district/templates/district/blocks/candidate_list_block.html b/district/templates/district/blocks/candidate_list_block.html
index 2d6a20c8..7a0a9c33 100644
--- a/district/templates/district/blocks/candidate_list_block.html
+++ b/district/templates/district/blocks/candidate_list_block.html
@@ -15,7 +15,7 @@
{% if self.cta_button_text and self.cta_link %}
<a href="{{ self.cta_link }}" class="btn btn--white btn--fullwidth mt-8">
<div class="btn__body ">
- {{ self.cta_button_text}}
+ {{ self.cta_button_text }}
</div>
</a>
{% endif %}
diff --git a/district/templates/district/blocks/person_badge_block.html b/district/templates/district/blocks/person_badge_block.html
index 405f5b93..309eabf8 100644
--- a/district/templates/district/blocks/person_badge_block.html
+++ b/district/templates/district/blocks/person_badge_block.html
@@ -1,9 +1,9 @@
{% if self.wrap_in_card %}
- <article class="card">
- <div class="card__body">
- {% include "shared/person_badge_snippet.html" with person_page=self.person.specific title=self.caption %}
- </div>
- </article>
+ <article class="card">
+ <div class="card__body">
+ {% include "shared/person_badge_snippet.html" with person_page=self.person.specific title=self.caption %}
+ </div>
+ </article>
{% else %}
- {% include "shared/person_badge_snippet.html" with person_page=self.person.specific title=self.caption %}
+ {% include "shared/person_badge_snippet.html" with person_page=self.person.specific title=self.caption %}
{% endif %}
diff --git a/district/templates/district/district_election_campaign_page.html b/district/templates/district/district_election_campaign_page.html
index d4341d95..c0c3d0dc 100644
--- a/district/templates/district/district_election_campaign_page.html
+++ b/district/templates/district/district_election_campaign_page.html
@@ -3,9 +3,9 @@
{% block subheader %}
{% if page.hero_image %}
- {% image page.hero_image width-1920 as bg_img %}
+ {% image page.hero_image fill-1920x800-c75 jpegquality-80 as bg_img %}
{% else %}
- {% image page.root_page.fallback_image width-1920 as bg_img %}
+ {% image page.root_page.fallback_image fill-1920x800-c75 jpegquality-80 as bg_img %}
{% endif %}
<header class="hero hero--image text-center md:text-left {% if page.root_election_page.campaigns|length > 1 %}pb-0 pt-16{% else %}py-16{% endif %}" style="--image-url: url({{ bg_img.full_url }})">
diff --git a/district/templates/district/district_geo_feature_collection_page.html b/district/templates/district/district_geo_feature_collection_page.html
index 2fa4f467..d01bb2c3 100644
--- a/district/templates/district/district_geo_feature_collection_page.html
+++ b/district/templates/district/district_geo_feature_collection_page.html
@@ -3,9 +3,9 @@
{% block subheader %}
{% if page.image %}
- {% image page.image width-1920 as bg_img %}
+ {% image page.image fill-1920x500-c75 jpegquality-80 as bg_img %}
{% else %}
- {% image page.root_page.fallback_image width-1920 as bg_img %}
+ {% image page.root_page.fallback_image fill-1920x500-c75 jpegquality-80 as bg_img %}
{% endif %}
<header class="hero hero--image text-center md:text-left py-16" style="--image-url: url({{ bg_img.full_url }})">
@@ -47,8 +47,9 @@
<a href="?item={{ feature.pk }}-{{ feature.slug }}" class="no-underline js-feature-item-anchor">{{ feature.index }}</a>
</span>
{% if feature.image %}
- {% image feature.image height-400 as img %}
- <a href="?item={{ feature.pk }}-{{ feature.slug }}" title="{{ feature.title }}" class="js-feature-item-anchor"><img src="{{ img.url }}" alt="{{ feature.title }}"></a>
+ {% image feature.image fill-260x192-c75 jpegquality-80 as img %}
+ {% image feature.image fill-520x384-c75 jpegquality-80 as img_2x %}
+ <a href="?item={{ feature.pk }}-{{ feature.slug }}" title="{{ feature.title }}" class="js-feature-item-anchor"><img src="{{ img.url }}" srcset="{{ img.url }}, {{ img_2x.url }} 2x" alt="{{ feature.title }}"></a>
{% endif %}
</div>
<div class="card__body p-4 flex items-center">
diff --git a/district/templates/district/district_geo_feature_detail_page.html b/district/templates/district/district_geo_feature_detail_page.html
index 3c347351..10c4e895 100644
--- a/district/templates/district/district_geo_feature_detail_page.html
+++ b/district/templates/district/district_geo_feature_detail_page.html
@@ -2,7 +2,7 @@
{% load static wagtailcore_tags wagtailimages_tags %}
{% block subheader %}
- {% image page.image width-1920 as bg_img %}
+ {% image page.image fill-1920x500-c75 jpegquality-80 as bg_img %}
<header class="hero hero--image pt-16 pb-24 lg:pt-32 pb-24" style="--image-url: url({{ bg_img.full_url }})">
<div class="container container--default text-center lg:text-left">
{% comment %} Page index for screens up to md {% endcomment %}
diff --git a/district/templates/district/district_person_page.html b/district/templates/district/district_person_page.html
index 864dd170..cb803a7c 100644
--- a/district/templates/district/district_person_page.html
+++ b/district/templates/district/district_person_page.html
@@ -2,7 +2,8 @@
{% load static wagtailcore_tags wagtailimages_tags shared_filters %}
{% block subheader %}
- {% image page.get_background_photo width-1920 as bg_img %}
+ {% image page.get_background_photo fill-1920x500-c75 jpegquality-80 as bg_img %}
+
<header class="hero hero--image pt-16 pb-24 lg:pt-32 pb-24" style="--image-url: url({{ bg_img.full_url }})">
<div class="container container--default text-center lg:text-left">
<h1 class="head-alt-lg md:head-alt-xl text-shadow-lg max-w-2xl">
@@ -31,8 +32,9 @@
<div class="text-center mb-8">
<div class="avatar avatar--2xl lg:avatar--3xl avatar--bordered candidate-detail__avatar">
{% if page.profile_photo %}
- {% image page.profile_photo fill-416x416 as profile_img %}
- <img src="{{ profile_img.url }}" alt="{{ page.profile_photo }}">
+ {% image page.profile_photo fill-208x208 as profile_img %}
+ {% image page.profile_photo fill-416x416 as profile_img_2x %}
+ <img src="{{ profile_img.url }}" srcset="{{ profile_img.url }}, {{ profile_img_2x.url }} 2x" alt="{{ page.profile_photo }}">
{% else %}
<img src="{% static "shared/img/unknown_pirate_416x416.jpg" %}" alt="{{ person_page.title }}"/>
{% endif%}
diff --git a/shared/templates/shared/person_badge_snippet.html b/shared/templates/shared/person_badge_snippet.html
index 04ac0d81..28399a9b 100644
--- a/shared/templates/shared/person_badge_snippet.html
+++ b/shared/templates/shared/person_badge_snippet.html
@@ -3,8 +3,9 @@
<div class="badge badge--condensed">
<a href="{{ person_page.url }}" class="avatar badge__avatar avatar--sm">
{% if person_page.profile_photo %}
- {% image person_page.profile_photo fill-160x160 as profile_img %}
- <img src="{{ profile_img.url }}" alt="{{ person_page.title }}"/>
+ {% image person_page.profile_photo fill-80x80 as profile_img %}
+ {% image person_page.profile_photo fill-160x160 as profile_img_2x %}
+ <img src="{{ profile_img.url }}" srcset="{{ profile_img.url }}, {{ profile_img_2x.url }} 2x" alt="{{ person_page.title }}"/>
{% else %}
<img src="{% static "shared/img/unknown_pirate_160x160.jpg" %}" alt="{{ person_page.title }}"/>
{% endif%}
@@ -32,8 +33,7 @@
{% endif %}
{% if person_page.email and person_page.show_email %}
- <a href="mailto:{{ person_page.email }}"
- class="contact-line icon-link content-block--nostyle contact-line--responsive badge__link">
+ <a href="mailto:{{ person_page.email }}" class="contact-line icon-link content-block--nostyle contact-line--responsive badge__link">
<i class="ico--envelope"></i><span>{{ person_page.email }}</span>
</a>
{% endif %}
--
GitLab