Fix #2887: Sponsor logo collides with section header text

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, 0fr)); align-items: center; justify-content: center; margin-top: 1.5em;">
+  <div style="display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; justify-content: center; margin-top: 1.5em;">
   {% for sponsorship in sponsorships %}
     <div style="text-align: center;">
       <a href="{{ sponsorship.sponsor.landing_page_url }}" rel="sponsored noopener" target="_blank" style="border-bottom: 0;">
@@ -30,7 +30,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, 0fr)); grid-template-rows: repeat(1, minmax(50px, 0fr)); align-items: center; justify-content: center; margin-top: 1em;">
+  <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); align-items: center; justify-content: center; margin-top: 1em;">
   {% for sponsorship in sponsorships %}
     <div>
       {% if sponsorship.sponsor.web_logo.name|lower|slice:"-4:" == ".svg" %}
@@ -51,14 +51,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">
+  <div title="{{ package }} Sponsors" align="center"{% if not forloop.last %} style="margin-bottom: 3rem;"{% 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, 0fr)); grid-template-rows: repeat(1, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center;">
+    <div style="display: grid; gap: 2.5rem; 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|default_if_none:'' }}">
             <div
                 data-ea-publisher="psf"
                 data-ea-type="psf-image-only"

apps/sponsors/templatetags/sponsors.py

@@ -97,9 +97,10 @@ def ideal_size(image, ideal_dimension):
     ideal_dimension = int(ideal_dimension)
     try:
         w, h = image.width, image.height
-    except FileNotFoundError:
-        # 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
+    except (FileNotFoundError, ValueError):
+        # FileNotFoundError: local dev doesn't have all images if DB is a copy from prod environment.
+        # ValueError: no file is associated with the field.
+        # Size as a square logo would be instead of erroring.
         w, h = ideal_dimension, ideal_dimension
 
     return int(w * math.sqrt((100 * ideal_dimension) / (w * h)))

apps/sponsors/tests/test_templatetags.py

@@ -4,12 +4,13 @@
 from django.test import TestCase
 from model_bakery import baker
 
-from apps.sponsors.models import SponsorshipBenefit, TieredBenefitConfiguration
+from apps.sponsors.models import Sponsor, SponsorshipBenefit, TieredBenefitConfiguration
 from apps.sponsors.templatetags.sponsors import (
     benefit_name_for_display,
     benefit_quantity_for_package,
     escape_markdown,
     full_sponsorship,
+    ideal_size,
     list_sponsors,
 )
 
@@ -92,6 +93,28 @@ def test_display_name_for_display_from_benefit(self, mocked_name_for_display):
         mocked_name_for_display.assert_called_once_with(package=package)
 
 
+class IdealSizeFilterTests(TestCase):
+    def test_scales_width_to_fit_ideal_area(self):
+        class Image:
+            width = 400
+            height = 200
+
+        # int(400 * sqrt(20000 / 80000)) = int(400 * 0.5) = 200
+        self.assertEqual(ideal_size(Image(), 200), 200)
+
+    def test_no_file_associated_is_sized_as_square(self):
+        logo = Sponsor(web_logo="").web_logo
+
+        # int(250 * sqrt(25000 / 62500)) = 158, same as a square logo
+        self.assertEqual(ideal_size(logo, 250), 158)
+
+    def test_file_missing_from_storage_is_sized_as_square(self):
+        logo = Sponsor(web_logo="sponsor_web_logos/does-not-exist.png").web_logo
+
+        # int(300 * sqrt(30000 / 90000)) = 173, same as a square logo
+        self.assertEqual(ideal_size(logo, 300), 173)
+
+
 class EscapePandocMarkdownTests(TestCase):
     """Unit tests for the boundary escaper that neutralizes sponsor input."""