Safe image width usage

OpenUpSA · Dec 12, 2024 · 1c4261d · 1c4261d
1 parent c030704
commit 1c4261d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git 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
@@ -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"/>