Replace image template tag with responsiveimage in html pages

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,7 +4,7 @@
   <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 %}

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/includes/cards/card-image.html

@@ -7,7 +7,7 @@
       <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 %}

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

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

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

@@ -2,7 +2,7 @@
 
 <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 %}

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,7 +9,7 @@ <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.webp' %});">
@@ -22,7 +22,7 @@ <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.webp' %});">

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/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">

di_website/templates/publications/publication_page_c.html

@@ -72,7 +72,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/tags/cards/other_pages.html

@@ -8,7 +8,7 @@ <h2 class="section__heading">{{ heading }}</h2>
       {% for page in other_pages %}
         <a href="{% pageurl page %}" class="card">
           {% if page.hero_image %}
-            {% image page.hero_image fill-400x250 as image %}
+            {% responsiveimage page.hero_image fill-400x250 as image %}
             {% if image.url != '/media/not-found' %}
               <div class="card__media" style="background-image: url({{image.url}});"></div>
             {% else %}

di_website/templates/workforus/work_for_us_page.html

@@ -38,7 +38,7 @@ <h2 class="section__heading">Benefits of working at DI</h2>
               {% if block.block_type == 'logo' %}
                 <div class="aside">
                   <div class="aside__media">
-                    {% image block.value min-500x200 as image %}
+                    {% responsiveimage block.value min-500x200 as image %}
                     <img src='{{ image.url }}' alt="alt">
                   </div>
                 </div>
@@ -78,7 +78,7 @@ <h2 class="section__heading">{{ page.team_story_section_heading|default:"" }}</h
             <div class="l-4up__col">
               <a href="{% pageurl block.value.team_story_page %}" class="m-stat m-stat--simple">
                 <div class="m-stat__icon">
-                  {% image block.value.logo min-500x200 as image %}
+                  {% responsiveimage block.value.logo min-500x200 as image %}
                   <img src='{{ image.url }}' alt="{{ image.alt }}">
                 </div>
                 <h3 class="m-stat__title m-stat__title--center">