feat: improve image renditions to respect the focal point and provide srcset...

feat: improve image renditions to respect the focal point and provide srcset where meaningful as well

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
         )

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 }})">

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">

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 %}

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%}

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 %}