From 1c4261d5cf4d5d241ff9290220cce7ef38dab910 Mon Sep 17 00:00:00 2001
From: paulmwatson <github.com@paulmwatson.com>
Date: Thu, 12 Dec 2024 15:06:21 +0200
Subject: [PATCH] Safe image width usage

---
 pombola/settings/base.py                      |  1 +
 .../templates/core/person_list_item.html      | 27 +++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/pombola/settings/base.py b/pombola/settings/base.py
index d2bf04d32..22e7d3c9f 100644
--- a/pombola/settings/base.py
+++ b/pombola/settings/base.py
@@ -374,6 +374,7 @@
 BLOG_RSS_FEED = os.environ.get("BLOG_RSS_FEED", None)
 
 THUMBNAIL_DEBUG = True
+THUMBNAIL_FORMAT = 'PNG'
 
 # ZA Hansard settings
 HANSARD_CACHE = os.path.join(data_dir, "hansard_cache")
diff --git a/pombola/south_africa/templates/core/person_list_item.html b/pombola/south_africa/templates/core/person_list_item.html
index 15e7ac787..069b14a0a 100644
--- a/pombola/south_africa/templates/core/person_list_item.html
+++ b/pombola/south_africa/templates/core/person_list_item.html
@@ -1,20 +1,25 @@
 {% load staticfiles %}
 {% load thumbnail %}
 {% load za_people_display %}
+{% load safe_image %}
 
 <a href="{{ object.get_absolute_url }}">
-    {% thumbnail object.primary_image "58x78" crop="center" as im %}
-      {% if lazy_load_images %}
-        <img src="{% static 'images/person-58x78.jpg' %}"
-             data-src="{{ im.url }}"
-             width="{{ im.width }}"
-             height="{{ im.height }}"
-             alt="{{ object.name }}"
-             loading="lazy">
-             
-        <noscript><img src="{{ im.url }}" alt="{{ object.name }}" width="{{ im.width }}" height="{{ im.height }}" loading="lazy"/></noscript>
+    {% thumbnail object.primary_image "58x78" crop="center" convert="RGBA" as im %}
+      {% if im|safe_image_width %}
+        {% if lazy_load_images %}
+          <img src="{% static 'images/person-58x78.jpg' %}"
+              data-src="{{ im.url }}"
+              width="{{ im.width }}"
+              height="{{ im.height }}"
+              alt="{{ object.name }}"
+              loading="lazy">
+              
+          <noscript><img src="{{ im.url }}" alt="{{ object.name }}" width="{{ im.width }}" height="{{ im.height }}" loading="lazy"/></noscript>
+        {% else %}
+          <img src="{{ im.url }}" alt="{{ object.name }}" width="{{ im.width }}" height="{{ im.height }}" loading="lazy"/>
+        {% endif %}
       {% else %}
-        <img src="{{ im.url }}" alt="{{ object.name }}" width="{{ im.width }}" height="{{ im.height }}" loading="lazy"/>
+        <img src="{% static 'images/person-58x78.jpg' %}" height="58" width="58" loading="lazy"/>
       {% endif %}
     {% empty %}
       <img src="{% static 'images/person-58x78.jpg' %}" height="58" width="58" loading="lazy"/>