Use EthicalAds to place logos under Sponsors page (#1981)

* Minimal working code to place sponsors logos

* Replace thumbnail logo by EthicalAds integration

* Create fallback to prevent 500 error when local development

* Refactor by adding slug to sponsor model

* restore anchor link and sponsor name under logo on sponsors page

Co-authored-by: Ee Durbin <[email protected]>

Author: berinhard

sponsors/models/sponsors.py

@@ -4,6 +4,7 @@
 from allauth.account.models import EmailAddress
 from django.conf import settings
 from django.db import models
+from django.core.exceptions import ObjectDoesNotExist
 from django.template.defaultfilters import slugify
 from django.urls import reverse
 from django_countries.fields import CountryField

sponsors/templatetags/sponsors.py

@@ -76,6 +76,13 @@ def benefit_name_for_display(benefit, package):
 @register.filter
 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
+        w, h = ideal_dimension, ideal_dimension
+
     return int(
-        image.width * math.sqrt((100 * ideal_dimension) / (image.width * image.height))
+        w * math.sqrt((100 * ideal_dimension) / (w * h))
     )

templates/base.html

@@ -23,6 +23,11 @@
     <meta http-equiv="cleartype" content="on">
     <meta http-equiv="imagetoolbar" content="false">{# Kills IE6's images toolbar. Still useful. #}
 
+    <script async
+            src="https://media.ethicalads.io/media/client/v1.4.0/ethicalads.min.js"
+            integrity="sha256-U3hKDidudIaxBDEzwGJApJgPEf2mWk6cfMWghrAa6i0= sha384-UcmsCqcNRSLW/dV3Lo1oCi2/VaurXbib6p4HyUEOeIa/4OpsrnucrugAefzVZJfI sha512-q4t1L4xEjGV2R4hzqCa41P8jrgFUS8xTb8rdNv4FGvw7FpydVj/kkxBJHOiaoxHa8olCcx1Slk9K+3sNbsM4ug=="
+            crossorigin="anonymous"
+    ></script>
     <script src="{{ STATIC_URL }}js/libs/modernizr.js"></script>
 
     {% stylesheet 'style' %}

templates/sponsors/partials/sponsors-list.html

@@ -38,26 +38,24 @@ <h3 class="widget-title">Job Board Sponsors</h3>
   {% if placement_info.sponsorships %}
   <div title="{{ package.name }} Sponsors" align="center">
     {% with dimension=placement_info.logo_dimension %}
-    {% with thumbnail_res=dimension|add:"x"|add:dimension %}
 
     <h1 style="font-size: {% if forloop.first %}350%{% else %}300%{% endif %}">{{ package }} 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;">
       {% for sponsorship in placement_info.sponsorships %}
-      <div id={{ sponsorship.sponsor.name|slugify }}>
-        <a href="{{ sponsorship.sponsor.landing_page_url }}">
-         {% thumbnail sponsorship.sponsor.web_logo thumbnail_res format="PNG" quality=100 as im %}
-             <img src="{{ im.url }}" alt="{{ sponsorship.sponsor.name }} logo" style="max-width:{{ im|ideal_size:dimension }}px;height:auto;width:auto;">
-         {% endthumbnail %}
-        </a>
-
-        <p>{{ sponsorship.sponsor.name }}</p>
-      </div>
+        <div id="{{ sponsorship.sponsor.slug }}">
+            <div
+                data-ea-publisher="psf"
+                data-ea-type="psf-image-only"
+                data-ea-force-ad="{{ sponsorship.sponsor.slug }}-psf-sponsors"
+                style="max-width:{{ sponsorship.sponsor.web_logo|ideal_size:dimension }}px;height:auto;width:auto;"
+            ></div>
+            <p>{{ sponsorship.sponsor.name }}</p>
+        </div>
       {% endfor %}
     </div>
 
     {% endwith %}
-    {% endwith %}
   </div>
   {% endif %}
   {% endfor %}