Fix sponsor logo collision and refine CSS grid (Issue #2887)

Author: iampujan

apps/sponsors/templates/sponsors/partials/sponsors-list.html

@@ -8,7 +8,7 @@
 {% cache 86400 CACHED_DOWNLOAD_SPONSORS_LIST %}
   <h2 class="widget-title" style="text-align: center;">Sponsors</h2>
   <p style="text-align: center;">Visionary sponsors help to host Python downloads.</p>
-  <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; justify-content: center; margin-top: 1.5em;">
+  <div style="display: grid; gap: 2em; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; justify-content: center; margin-top: 1.5em;">
   {% for sponsorship in sponsorships %}
   {% thumbnail sponsorship.sponsor.web_logo "x150" format="PNG" quality=100 as im %}
     <div style="text-align: center;">
@@ -26,7 +26,7 @@ <h2 class="widget-title" style="text-align: center;">Sponsors</h2>
 {% comment %}cache for 1 day{% endcomment %}
 {% cache 86400 CACHED_JOBS_SPONSORS_LIST %}
   <h3 class="widget-title">Job Board Sponsors</h3>
-  <div style="display: grid; grid-gap: 1em; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); align-items: center; justify-content: center; margin-top: 1em;">
+  <div style="display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); align-items: center; justify-content: center; margin-top: 1em;">
   {% for sponsorship in sponsorships %}
   {% thumbnail sponsorship.sponsor.web_logo "x100" format="PNG" quality=100 as im %}
     <div>
@@ -43,14 +43,14 @@ <h3 class="widget-title">Job Board Sponsors</h3>
 
   {% for package, placement_info in sponsorships_by_package.items %}
   {% if placement_info.sponsorships %}
-  <div title="{{ package }} Sponsors" align="center" style="margin-bottom: 3em;">
+  <div title="{{ package }} Sponsors" align="center" style="{% if not forloop.last %}margin-bottom: 3em;{% endif %}">
     {% with dimension=placement_info.logo_dimension %}
 
     <h1 style="font-size: {% if forloop.first %}350%{% else %}300%{% endif %}">{{ placement_info.label }} Sponsors</h1>
 
-    <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 1fr)); align-items: center; justify-content: center;">
+    <div style="display: grid; gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 1fr)); align-items: center; justify-content: center;">
       {% for sponsorship in placement_info.sponsorships %}
-        <div id="{{ sponsorship.sponsor.slug }}" data-internal-year={{ sponsorship.year }}>
+        <div id="{{ sponsorship.sponsor.slug }}" data-internal-year={{ sponsorship.year }} style="overflow: hidden;">
             <div
                 data-ea-publisher="psf"
                 data-ea-type="psf-image-only"

apps/sponsors/templatetags/sponsors.py

@@ -83,9 +83,12 @@ def ideal_size(image, ideal_dimension):
     ideal_dimension = int(ideal_dimension)
     try:
         w, h = image.width, image.height
-    except (FileNotFoundError, ValueError):
+    except (FileNotFoundError, ValueError) as e:
         # local dev doesn't have all images if DB is a copy from prod environment
-        # this is just a fallback to return ideal_dimension instead
+        # in that case, we return a fallback size to avoid 500 errors.
+        # we only catch the specific ValueError raised by Django when a file is missing.
+        if isinstance(e, ValueError) and "no file associated with it" not in str(e):
+            raise
         w, h = ideal_dimension, ideal_dimension
 
     return int(w * math.sqrt((100 * ideal_dimension) / (w * h)))

apps/sponsors/tests/test_templatetags.py

@@ -8,8 +8,8 @@
     benefit_name_for_display,
     benefit_quantity_for_package,
     full_sponsorship,
-    list_sponsors,
     ideal_size,
+    list_sponsors,
 )
 
 
@@ -105,7 +105,7 @@ def test_ideal_size_handles_file_not_found(self):
         class MockImageWithoutFile:
             @property
             def width(self):
-                raise FileNotFoundError()
+                raise FileNotFoundError
 
         size = ideal_size(MockImageWithoutFile(), 300)
         self.assertEqual(size, 173)
@@ -119,3 +119,13 @@ def width(self):
 
         size = ideal_size(MockImageWithoutFileValue(), 250)
         self.assertEqual(size, 158)
+
+    def test_ideal_size_raises_other_value_errors(self):
+        class MockImageWithOtherValueError:
+            @property
+            def width(self):
+                msg = "Other error"
+                raise ValueError(msg)
+
+        with self.assertRaises(ValueError):
+            ideal_size(MockImageWithOtherValueError(), 250)