Remove image macro use from split macro (mozorg) (Issue mozilla#12331) (

mozilla#12479)
alexgibson · Dec 14, 2022 · d45bf0e · d45bf0e
1 parent 3ed13e3
commit d45bf0e
Show file tree

Hide file tree

Showing 31 changed files with 512 additions and 252 deletions.
diff --git a/bedrock/base/templates/macros-protocol.html b/bedrock/base/templates/macros-protocol.html
@@ -123,7 +123,7 @@
               width=image_width
             ) }}
           {% else %}
-            {{ image }}
+            {{ image|safe }}
           {% endif %}
         </div>
       {% elif media_include %}
@@ -153,7 +153,7 @@
             width=image_width
           ) }}
           {% else %}
-            {{ image }}
+            {{ image|safe }}
           {% endif %}
         </div>
       {% elif media_include %}

diff --git a/bedrock/contentful/templates/includes/contentful/all.html b/bedrock/contentful/templates/includes/contentful/all.html
@@ -131,16 +131,16 @@ <h2 class="mzp-c-section-heading">{{ entry.heading }}</h2>
         {% set loading = 'lazy' %}
       {% endif %}
 
+      {% set image = '<img class="mzp-c-split-media-asset" src="' ~ entry.image ~ '" loading="' ~ loading ~ '">' %}
+
       {% call split(
         block_class=entry.block_class,
         body_class=entry.body_class,
         theme_class=entry.theme_class,
         media_class=entry.media_class,
         mobile_class=entry.mobile_class,
         media_after=entry.media_after,
-        image_url=entry.image,
-        include_highres_image=False,
-        loading=loading,
+        image=image
       ) %}
         {{ entry.body|external_html }}
 

diff --git a/bedrock/firefox/templates/firefox/browsers/compare/index.html b/bedrock/firefox/templates/firefox/browsers/compare/index.html
@@ -27,8 +27,15 @@
 
 {% block content %}
 {% call split(
-    image_url='img/firefox/compare/compare-browser-windows.png',
-    include_highres_image=True,
+    image=resp_img(
+      url='img/firefox/compare/compare-browser-windows.png',
+      srcset={
+        'img/firefox/compare/compare-browser-windows-high-res.png': '2x'
+      },
+      optional_attributes={
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_class='mzp-l-split-h-center',
     media_after=True
   ) %}

diff --git a/bedrock/firefox/templates/firefox/faq.html b/bedrock/firefox/templates/firefox/faq.html
@@ -40,10 +40,17 @@ <h2 class="c-sub-navigation-title is-summary">
 {% endblock %}
 
 {% block content %}
-  {% call split (
+  {% call split(
       block_class='mzp-l-split-center-on-sm-md',
-      image_url='img/firefox/browsers/quantum/browser.jpg',
-      include_highres_image=True,
+      image=resp_img(
+        url='img/firefox/browsers/quantum/browser.jpg',
+        srcset={
+          'img/firefox/browsers/quantum/browser-high-res.jpg': '2x'
+        },
+        optional_attributes={
+          'class': 'mzp-c-split-media-asset'
+        }
+      ),
       media_after=True
   ) %}
   <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox"></div>

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de-coupon.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de-coupon.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-de.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en-coupon.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en-coupon.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-en.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr-coupon.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr-coupon.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx104-vpn-fr.html
@@ -22,9 +22,14 @@
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-t-split-nospace t-mobile-nospace',
     theme_class='t-background-color',
-    image_url='img/firefox/whatsnew/whatsnew104/vpn.svg',
-    image_height='540',
-    image_width='580',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew104/vpn.svg',
+      optional_attributes={
+        'height': '540',
+        'width': '580',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True,
     media_class='mzp-l-split-h-center'
   ) %}

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-1.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-1.html
@@ -31,19 +31,24 @@
     block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/save-de-400.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/save-de-400.png': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-de-600.png': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-de-800.png': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '400px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='306',
-    image_width='400',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/save-de-400.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/save-de-400.png': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-de-600.png': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-de-800.png': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '400px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '306',
+        'width': '400',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-2.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-de-2.html
@@ -37,20 +37,25 @@ <h2 class="wnp-main-title">Entdecke Pocket mit Tijen Onaran</h2>
   {% call split(
     block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed mzp-t-content-lg wnp-content-main t-kol',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/kol-de-600.jpg': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/kol-de-800.jpg': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '400px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='400',
-    image_width='400',
-    image_alt='Tijen Onaran',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/kol-de-400.jpg': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/kol-de-600.jpg': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/kol-de-800.jpg': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '400px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '400',
+        'width': '400',
+        'class': 'mzp-c-split-media-asset',
+        'alt': 'Tijen Onaran'
+      }
+    ),
     media_after=False
   ) %}
     <div class="mzp-c-emphasis-box t-kol">

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-fr.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-fr.html
@@ -25,19 +25,24 @@
     block_class='mzp-l-split-center-on-sm-md mzp-l-split-body-wide mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-fr-600.png': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-fr-800.png': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '357px',
-      '(min-width: 768px)': 'calc(33vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='271',
-    image_width='357',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/save-fr-400.png': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-fr-600.png': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-fr-800.png': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '357px',
+        '(min-width: 768px)': 'calc(33vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '271',
+        'width': '357',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-1.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-1.html
@@ -31,19 +31,24 @@
     block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png': '400w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-uk-600.png': '600w',
-      'img/firefox/whatsnew/whatsnew105-eu/save-uk-800.png': '800w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '400px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='306',
-    image_width='400',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/save-uk-400.png': '400w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-uk-600.png': '600w',
+        'img/firefox/whatsnew/whatsnew105-eu/save-uk-800.png': '800w',
+      },
+      sizes={
+        '(min-width: 1312px)': '400px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '306',
+        'width': '400',
+        'class': 'mzp-c-split-media-asset'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">

diff --git a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-2.html b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-uk-2.html
@@ -31,20 +31,25 @@
     block_class='mzp-l-split-center-on-sm-md mzp-l-split-pop-top mzp-t-content-xl wnp-content-main',
     body_class='mzp-l-split-v-start',
     media_class='mzp-l-split-h-center',
-    image_url='img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png',
-    image_srcset={
-      'img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png': '500w',
-      'img/firefox/whatsnew/whatsnew105-eu/discover-uk-700.png': '700w',
-      'img/firefox/whatsnew/whatsnew105-eu/discover-uk-900.png': '900w',
-    },
-    image_sizes={
-      '(min-width: 1312px)': '458px',
-      '(min-width: 768px)': 'calc(50vw - 192px)',
-      'default': 'calc(100vw - 48px)'
-    },
-    image_height='638',
-    image_width='458',
-    image_alt='Articles from a wide range of publications',
+    image=resp_img(
+      url='img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png',
+      srcset={
+        'img/firefox/whatsnew/whatsnew105-eu/discover-uk-500.png': '500w',
+        'img/firefox/whatsnew/whatsnew105-eu/discover-uk-700.png': '700w',
+        'img/firefox/whatsnew/whatsnew105-eu/discover-uk-900.png': '900w',
+      },
+      sizes={
+        '(min-width: 1312px)': '458px',
+        '(min-width: 768px)': 'calc(50vw - 192px)',
+        'default': 'calc(100vw - 48px)'
+      },
+      optional_attributes={
+        'height': '638',
+        'width': '458',
+        'class': 'mzp-c-split-media-asset',
+        'alt': 'Articles from a wide range of publications'
+      }
+    ),
     media_after=True
   ) %}
     <div class="mzp-c-emphasis-box wnp-main-content">