Merge pull request #1334 from devinit/feature/mobile_users_updates

Feature | Web Loading Improvements

Dockerfile

@@ -31,6 +31,8 @@ RUN apk add --no-cache libressl-dev libffi-dev python3-dev
 # Required for python lxml
 RUN apk add --no-cache libxslt-dev
 
+# Required for webp images
+RUN apk add --no-cache libwebp libwebp-tools
 
 # Set environment varibles
 ENV PYTHONUNBUFFERED 1

di_website/common/templatetags/responsive.py

@@ -1,3 +1,5 @@
+import os
+from PIL import Image
 from django import template
 from wagtail.images.models import SourceImageIOError
 from wagtail.images.templatetags.wagtailimages_tags import ImageNode
@@ -7,6 +9,17 @@
 register = template.Library()
 
 
+def convert_to_webp(file_path):
+    if os.path.exists(file_path):
+        convert_image = Image.open(file_path)
+        # Convert the image to WebP format
+        if file_path.lower().endswith((".jpg", ".jpeg", ".png")):
+            webp_path = os.path.splitext(file_path)[0] + ".webp"
+            convert_image.save(webp_path, "WebP")
+            return True
+    return False
+
+
 @register.tag(name="responsiveimage")
 def responsiveimage(parser, token):
     bits = token.split_contents()[1:]
@@ -129,12 +142,17 @@ def render(self, context):
                     tmprend.file.name = 'not-found'
 
             for index, rend in enumerate(srcset_renditions):
+                if convert_to_webp(rend.file.path):
+                    rend.file.name = rend.file.name.rsplit('.', 1)[0] + '.webp'
                 newsrcseturls.append(' '.join([rend.url, widths[index]]))
 
         except KeyError:
             newsrcseturls = []
             pass
 
+        if convert_to_webp(rendition.file.path):
+            rendition.file.name = rendition.file.name.rsplit('.', 1)[0] + '.webp'
+
         if self.output_var_name:
             rendition.srcset = ', '.join(newsrcseturls)
 

di_website/settings/base.py

@@ -331,3 +331,12 @@
 EMAIL_ADMINS_CACHE_TIMEOUT = 30
 EMAIL_ADMINS_MAX_EMAILS_PER_TIMEOUT = 2
 EMAIL_ADMINS_CACHE_COUNTER_KEY = 'email_admins_cache_counter_key'
+
+WAGTAILIMAGES_FORMAT_CONVERSIONS = {
+    'webp': 'webp',
+    'jpg': 'webp',
+    'jpeg': 'webp',
+    'png': 'webp',
+    'bmp': 'webp',
+    'gif': 'gif'
+}

di_website/templates/blocks/basic_infographic.html

@@ -13,7 +13,7 @@ <h2 class="type-l type-l--trailer">{{ value.heading }}</h2>
   </div>
   {% endif %}
   <figure>
-    {% image value.wide_image width-1200 as wide %}
+    {% responsiveimage value.wide_image width-1200 as wide %}
     <a href="{{ wide.url }}" target="_blank" title="Click to open image in new window">
       <picture>
         {% for block in value.images %}

di_website/templates/blocks/person_block.html

@@ -4,14 +4,14 @@
   <a href="{% pageurl self.person %}" class="profile">
     <div class="profile__media">
     {% if self.person.image %}
-      {% image self.person.image fill-200x200-c100 as image %}
+      {% responsiveimage self.person.image fill-200x200-c100 as image %}
       {% if image.url != '/media/not-found' %}
         <img src="{{ image.url }}" alt="{{ self.person.name }}">
       {% else %}
-        <img height="200px" width="200px" src="{% static 'img/profile-fallback.jpg' %}" alt="Placeholder profile picture">
+        <img height="200px" width="200px" src="{% static 'img/profile-fallback.webp' %}" alt="Placeholder profile picture">
       {% endif %}
     {% else %}
-      <img height="200px" width="200px" src="{% static 'img/profile-fallback.jpg' %}" alt="Placeholder profile picture">
+      <img height="200px" width="200px" src="{% static 'img/profile-fallback.webp' %}" alt="Placeholder profile picture">
     {% endif %}
     </div>
 

di_website/templates/blocks/timeline_carousel.html

@@ -37,7 +37,7 @@ <h3 class="highlight__heading">{{ item.value.title }}</h3>
           </div>
           {% if item.value.image %}
           <div class="l-highlight__aside">
-            {% image item.value.image max-400x250 as timeline_img %}
+            {% responsiveimage item.value.image max-400x250 as timeline_img %}
             <div class="highlight__media">
               <img src="{{ timeline_img.url }}" alt="{{ timeline_img.alt }}">
             </div>

di_website/templates/datasection/dataset_page.html

@@ -28,7 +28,7 @@ <h2 class="section__heading">References to charts and infographics that use this
                   <img src="{{ image.url }}" alt="{{item.specific.hero_image.title}}" srcset="{{ image.srcset }}"/>
                 {% endif %}
               {% else %}
-                <img src="{% static 'img/fallback-image.jpg' %}" height="290px" width="464px"/>
+                <img src="{% static 'img/fallback-image.webp' %}" height="290px" width="464px"/>
               {% endif %}
               <div class="card__media__caption">
                 <span class="card__meta">{{item.specific.release_date|date:"j F Y"}}</span>

di_website/templates/includes/cards/card-image.html

@@ -7,15 +7,15 @@
       <img src="{{hero_img.url}}" alt="{{hero_img.alt}}"/>
     </div>
   {% else %}
-    {% image item.hero_image max-400x250 as hero_img %}
+    {% responsiveimage item.hero_image max-400x250 as hero_img %}
     <div class="card__media" style="background-image: url({{hero_img.url}});"></div>
   {% endif %}
 {% else %}
   {% if card_type == "duo" %}
     <div class="card__media">
-      <img src="{% static 'img/fallback-image.jpg' %}" alt="{{hero_img.alt}}"/>
+      <img src="{% static 'img/fallback-image.webp' %}" alt="{{hero_img.alt}}"/>
     </div>
   {% else %}
-    <div class="card__media" style="background-image: url({% static 'img/fallback-image.jpg' %});"></div>
+    <div class="card__media" style="background-image: url({% static 'img/fallback-image.webp' %});"></div>
   {% endif %}
 {% endif %}

di_website/templates/includes/cards/card-more-about.html

@@ -5,7 +5,7 @@
         {% image more_about_page.hero_image max-400x250 as hero_img %}
         <div class="card__media" style="background-image: url({{hero_img.url}});"></div>
     {% else %}
-        <div class="card__media" style="background-image: url({% static 'img/fallback-image.jpg' %});"></div>
+        <div class="card__media" style="background-image: url({% static 'img/fallback-image.webp' %});"></div>
     {% endif %}
 
     <div class="card__body">

di_website/templates/includes/cards/card-spotlights.html

@@ -14,7 +14,7 @@
         <div class="card__media" style="background-image: url({{hero_img.url}});"></div>
       {% endif %}
     {% else %}
-      <div class="card__media" style="background-image: url({% static 'img/fallback-image.jpg' %});"></div>
+      <div class="card__media" style="background-image: url({% static 'img/fallback-image.webp' %});"></div>
     {% endif %}
 
 

di_website/templates/includes/partials/author-card.html

@@ -1,8 +1,8 @@
 {% load wagtailimages_tags wagtailcore_tags static responsive %}
 
 <div class="m-author">
-  {% image img fill-200x200-c100 as image %}
-  {% static 'img/profile-fallback.jpg' as fallback_image %}
+  {% responsiveimage img fill-200x200-c100 as image %}
+  {% static 'img/profile-fallback.webp' as fallback_image %}
   {% if img %}
     {% if image.url != '/media/not-found' %}
       <div class="m-author__image" style="background-image:url({{ image.url }})"></div>

di_website/templates/includes/partials/author-link.html

@@ -2,14 +2,14 @@
 
 <a href="{% if page %}{% pageurl page %}{% else %}{{link}}{% endif %}?referrer=author" class="m-author">
   {% if img %}
-    {% image img fill-200x200 as image %}
+    {% responsiveimage img fill-200x200 as image %}
     {% if image.url != '/media/not-found' %}
       <div class="m-author__image" style="background-image: url({{image.url}})"></div>
     {% else %}
-      <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.jpg' %})"></div>
+      <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.webp' %})"></div>
     {% endif %}
   {% else %}
-    <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.jpg' %})"></div>
+    <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.webp' %})"></div>
   {% endif %}
   <div class="m-author__body">
     <h3 class="m-author__title">{{author_prefix|default_if_none:"Written by"}} {{name|default_if_none:""}}</h3>

di_website/templates/includes/partials/author.html

@@ -6,10 +6,10 @@
     {% if image.url != '/media/not-found' %}
       <div class="m-author__image" style="background-image: url({{image.url}})"></div>
     {% else %}
-      <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.jpg' %})"></div>
+      <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.webp' %})"></div>
     {% endif %}
   {% else %}
-    <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.jpg' %})"></div>
+    <div class="m-author__image" style="background-image: url({% static 'img/profile-fallback.webp' %})"></div>
   {% endif %}
 
   <div class="m-author__body">

di_website/templates/includes/partials/benefits.html

@@ -4,7 +4,7 @@
     <div class="project__main">
         <div class="project__header">
             {% if item.image %}
-                {% image item.image fill-180x112-c100 as image %}
+                {% responsiveimage item.image fill-180x112-c100 as image %}
                 <div class="project__media">
                     <img src="{{ image.url }}" alt="{{ image.alt }}">
                 </div>

di_website/templates/includes/partials/focus_areas.html

@@ -9,10 +9,10 @@ <h3 class="project__subheading">{{ self.related_page_section_title }}</h3>
     {% if self.projects %}
       {% for block in self.projects %}
           {% if block.value.specific.hero_image %}
-              {% image block.value.specific.hero_image max-313x178 as hero_img %}
+              {% responsiveimage block.value.specific.hero_image max-313x178 as hero_img %}
               <a href="{% pageurl block.value.specific %}" class="project-card" style="background-image: url({{hero_img.url}});">
           {% else %}
-              <a href="{% pageurl block.value.specific %}" class="project-card" style="background-image: url({% static 'img/fallback-image.jpg' %});">
+              <a href="{% pageurl block.value.specific %}" class="project-card" style="background-image: url({% static 'img/fallback-image.webp' %});">
           {% endif %}
               <span class="project-card__caption">{{ block.value.title }}</span>
               </a>
@@ -22,10 +22,10 @@ <h3 class="project__subheading">{{ self.related_page_section_title }}</h3>
   {% with related_pages=self.get_topic_related_pages %}
     {% for self in related_pages %}
       {% if self.hero_image %}
-        {% image self.hero_image max-313x178 as hero_img %}
+        {% responsiveimage self.hero_image max-313x178 as hero_img %}
           <a href="{% pageurl self %}" class="project-card" style="background-image: url({{hero_img.url}});">
         {% else %}
-          <a href="{% pageurl self %}" class="project-card" style="background-image: url({% static 'img/fallback-image.jpg' %});">
+          <a href="{% pageurl self %}" class="project-card" style="background-image: url({% static 'img/fallback-image.webp' %});">
         {% endif %}
           <span class="project-card__caption">{{ self.title }}</span>
           </a>

di_website/templates/includes/partials/project.html

@@ -4,7 +4,7 @@
   <div class="project__main">
     <div class="project__header">
       {% if self.image %}
-        {% image self.image fill-180x112-c100 as image %}
+        {% responsiveimage self.image fill-180x112-c100 as image %}
         <div class="project__media">
           <img src="{{ image.url }}" alt="{{ image.alt }}">
         </div>

di_website/templates/includes/partials/testimonial.html

@@ -9,7 +9,7 @@
     {% if image and image.url != '/media/not-found' %}
       <img src="{{ image.url }}" alt="{{ image.alt }}">
     {% else %}
-      <img src="{% static 'img/quote.png' %}" alt="Testimonial image placeholder">
+      <img src="{% static 'img/quote.webp' %}" alt="Testimonial image placeholder">
     {% endif %}
   </aside>
 </div>

di_website/templates/includes/scaffold/favicon.html

@@ -1,3 +1,3 @@
 {% load static %}
 
-<link rel="icon" type="image/png" href="{% static 'favicons/favicon.png' %}" sizes="16x16">
+<link rel="icon" type="image/png" href="{% static 'favicons/favicon.webp' %}" sizes="16x16">

di_website/templates/includes/scaffold/header-assets.html

@@ -1,12 +1,12 @@
 {% load static %}
 
-<link href="{% static 'css/screen.min.css' %}" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
-<script>/*! grunt-grunticon Stylesheet Loader - v2.1.6 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
+<link href="{% static 'css/screen.min.css' %}" rel="stylesheet" media="screen, print">
+<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" disabled>
+<script defer>/*! grunt-grunticon Stylesheet Loader - v2.1.6 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
 !function(){function e(e,n,t){"use strict";var o=window.document.createElement("link"),r=n||window.document.getElementsByTagName("script")[0],a=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",r.parentNode.insertBefore(o,r),o.onloadcssdefined=function(e){for(var n,t=0;t<a.length;t++)a[t].href&&a[t].href===o.href&&(n=!0);n?e():setTimeout(function(){o.onloadcssdefined(e)})},o.onloadcssdefined(function(){o.media=t||"all"}),o}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,s=t.Image,d=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new s;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&d?0:t?1:2];t&&d?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,s={};if(n=e.sheet,!n)return s;t=n.cssRules?n.cssRules:n.rules;for(var d=0;d<t.length;d++)r=t[d].cssText,a=o+t[d].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),s[a]=c);return s},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(s){continue}r=[];for(var d=0;d<n.length;d++)null!==n[d].getAttribute(a)&&r.push(n[d]);if(r.length)for(d=0;d<r.length;d++)r[d].innerHTML=e[c],r[d].style.backgroundImage="none",r[d].removeAttribute(a)}return r},s=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=s,e.embedSVG=s}(grunticon,this)}();
 	grunticon(["{% static 'icons/ico.data.svg.css' %}", "{% static 'icons/ico.data.png.css' %}", "{% static 'icons/ico.fallback.css' %}"]);
 </script>
 <noscript><link href="{% static 'icons/ico.fallback.css' %}" rel="stylesheet"></noscript>
-<script src="{% static 'js/libs/modernizr.js' %}"></script>
+<script src="{% static 'js/libs/modernizr.js' %}" defer></script>
 {% include 'includes/scaffold/favicon.html' %}
-<link href="{% static 'css/di_website.min.css' %}" rel="stylesheet" />
+<link href="{% static 'css/di_website.min.css' %}" rel="stylesheet" media="screen, print"/>

di_website/templates/ourteam/our_team_page.html

@@ -56,15 +56,15 @@
               <div class="profile">
                 <div class="profile__media">
                   {% if profile.image %}
-                    {% responsiveimage profile.image fill-400x400-c100 srcset=global.sq_crop_srcs as img %}
+                    {% image profile.image fill-400x400-c100 format-webp-lossless as img %}
                   {% if img.url != '/media/not-found' %}
                     <img height="400px" width="400px" src="{{img.url}}" alt="{{img.alt}}" srcset="{{ img.srcset }}">
                   {% else %}
-                    <img height="400px" width="400px" src="{% static 'img/profile-fallback.jpg' %}"
+                    <img height="400px" width="400px" src="{% static 'img/profile-fallback.webp' %}"
                       alt="Placeholder profile picture">
                   {% endif %}
                   {% else %}
-                    <img height="400px" width="400px" src="{% static 'img/profile-fallback.jpg' %}"
+                    <img height="400px" width="400px" src="{% static 'img/profile-fallback.webp' %}"
                       alt="Placeholder profile picture">
                   {% endif %}
                 </div>

di_website/templates/ourteam/team_member_page.html

@@ -18,11 +18,11 @@
               {% if img.url != '/media/not-found' %}
                 <img height="260px" width="260px" src="{{img.url}}" alt="{{self.name}} photograph">
               {% else %}
-                <img height="260px" width="260px" src="{% static 'img/profile-fallback.jpg' %}"
+                <img height="260px" width="260px" src="{% static 'img/profile-fallback.webp' %}"
                   alt="Placeholder profile picture">
               {% endif %}
             {% else %}
-              <img height="260px" width="260px" src="{% static 'img/profile-fallback.jpg' %}"
+              <img height="260px" width="260px" src="{% static 'img/profile-fallback.webp' %}"
                   alt="Placeholder profile picture">
             {% endif %}
         </div>

di_website/templates/password_required.html

@@ -24,7 +24,7 @@
                 {{ field }}
             {% endfor %}
             {{ form.non_field_errors }}
-            <h1>Sign in to <img src="{% static "img/logo.png" %}" alt="{{ global.site_name }}" style="height: 1.4em; vertical-align: bottom;" /></h1>
+            <h1>Sign in to <img src="{% static "img/logo.webp" %}" alt="{{ global.site_name }}" style="height: 1.4em; vertical-align: bottom;" /></h1>
             <p>{{ global.site_name }} is not ready yet. If you have a password, please enter to access the site.</p>
 
             <ul class="fields">

di_website/templates/publications/blocks/infographic.html

@@ -25,7 +25,7 @@ <h2  class="type-l type-l--trailer">{{ value.heading }}</h2>
   </div>
   {% endif %}
   <figure>
-    {% image value.wide_image width-1200 as wide %}
+    {% responsiveimage value.wide_image width-1200 as wide %}
     <a href="{{ wide.url }}" target="_blank" title="Click to open image in new window">
       <picture>
         {% for block in value.images %}

di_website/templates/publications/partials/downloads.html

@@ -1,4 +1,4 @@
-{% load wagtailimages_tags %}
+{% load wagtailimages_tags responsive %}
 <section class="section">
   <div class="row row--narrow">
     {% for item in page.call_to_action %}
@@ -14,7 +14,7 @@
       {% if page.report_download %}
         <div class="orderReport">
           {% if page.download_report_cover %}
-            {% image page.download_report_cover fill-250x340 as cover_image %}
+            {% responsiveimage page.download_report_cover fill-250x340 as cover_image %}
             <div class="orderReport__img" style="background-image: url({{cover_image.url}});"></div>
           {% endif %}
           <div class="orderReport__content">

di_website/templates/publications/publication_page.html

@@ -105,7 +105,7 @@ <h2 class="chapter-block__heading">{{ item.title }}</h2>
         {% if page.report_download %}
           <div class="orderReport">
             {% if page.download_report_cover %}
-              {% image page.download_report_cover fill-250x340 as cover_image %}
+              {% responsiveimage page.download_report_cover fill-250x340 as cover_image %}
               <div class="orderReport__img" style="background-image: url({{cover_image.url}});"></div>
             {% endif %}
             <div class="orderReport__content">

di_website/templates/publications/publication_page_b.html

@@ -70,7 +70,7 @@ <h2 class="chapter-block__heading">{{ item.title }}</h2>
         {% if page.report_download %}
           <div class="orderReport">
             {% if page.download_report_cover %}
-              {% image page.download_report_cover fill-250x340 as cover_image %}
+              {% responsiveimage page.download_report_cover fill-250x340 as cover_image %}
               <div class="orderReport__img" style="background-image: url({{cover_image.url}});"></div>
             {% endif %}
             <div class="orderReport__content">