diff --git a/district/models.py b/district/models.py
index 715f307b7c67cdc7cdbeed1a42cca7cc05baf967..f8bf09fd0e2b94d0a1aae8020a2a865a24ffcb24 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 2d6a20c85aaad64f37ffd010f8b55f32da5fec61..7a0a9c33dfb6f74ba6a47745c693a56f7b7e9041 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 405f5b93ffa3cf6808843d5fb2b056198ff2698b..309eabf8c86d3159666e48ff5af247c5379ccbcb 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 d4341d95f38c0674fa68a5d3ffb5374b1cb4a3f5..c0c3d0dca1c7f8231f2b7f6b76ed128b21c18f09 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 2fa4f46702297d1a58faca8fa744834523fd95ac..d01bb2c304e0916609f56889fcc3985c3ef761d8 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 3c347351b58f257d87f2c3ad3168189d2b75d4ec..10c4e8954237b17c2f4fa44f47ea3125008c8fd6 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 864dd17046186fe3ae23d2841f47dc7a3e6f5cd6..cb803a7cce1c3cbe70d8339a2f2de009d6682796 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 04ac0d81b4b5c9b83a3a54bb7cdd68c89d9ba3fd..28399a9b82bf5dab738c7801a3d560289826d4d3 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 %}