Update picture helper, image sizes and loading, tweak gallery text (#…

…15732) * Add height and width to pictures with 2 different ratios - edit picture helper to accept height and width on sources - update tests for picture helper - add height and width to images on home and about - also double check lazy loading values - add dimensions to flag SVG - docs
mozilla · Dec 17, 2024 · dcfac19 · dcfac19
1 parent d49d532
commit dcfac19
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 22 deletions.
diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/careers.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/careers.html
@@ -29,6 +29,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
             'sizes': {
               "default": "calc(50vw - 16px)",
             },
+            'width' : '432',
+            'height' : '423'
           },
           {
             'srcset': {
@@ -39,6 +41,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
               "(min-width: 1440px)": "432px",
               "default": "calc(100vw - 64px / 6)",
             },
+            'width' : '432',
+            'height' : '648'
           },
         ],
         optional_attributes={
@@ -58,6 +62,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
           'sizes': {
             "default": "calc(50vw - 16px)",
           },
+          'width' : '432',
+          'height' : '423'
         },
         {
           'srcset': {
@@ -68,6 +74,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
             "(min-width: 1440px)": "432px",
             "default": "calc(100vw - 64px / 6)",
           },
+          'width' : '432',
+          'height' : '648'
         },
       ],
       optional_attributes={
@@ -88,6 +96,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
         'sizes': {
           "default": "calc(50vw - 16px)",
         },
+        'width' : '432',
+        'height' : '423'
       },
       {
         'srcset': {
@@ -98,6 +108,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
           "(min-width: 1440px)": "432px",
           "default": "calc(100vw - 64px / 6)",
         },
+        'width' : '432',
+        'height' : '648'
       },
     ],
     optional_attributes={
@@ -118,6 +130,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
       'sizes': {
         "default": "calc(50vw - 16px)",
       },
+      'width' : '432',
+      'height' : '423'
     },
     {
       'srcset': {
@@ -128,6 +142,8 @@ <h2 class="m24-c-careers-title">{{ ftl('m24-about-join-us-and') }}</h2>
         "(min-width: 1440px)": "432px",
         "default": "calc(100vw - 64px / 6)",
       },
+      'width' : '432',
+      'height' : '648'
     },
   ],
   optional_attributes={

diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/community.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/community.html
@@ -32,6 +32,7 @@ <h2 class="m24-c-showcase-title">{{ ftl('m24-about-community-love-v2', fallback=
         optional_attributes={
           'width': '1376',
           'height': '590',
+          'loading': 'lazy',
           'alt': ftl('m24-about-alt-community')
         }
       ) }}

diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/news.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/news.html
@@ -29,6 +29,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-about-read-the-latest') }}</h2>
               'sizes': {
                 "default": "calc(100vw - 16px)",
               },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -42,6 +44,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-about-read-the-latest') }}</h2>
                 "(min-width: 1440px)": "1028px",
                 "default": "calc(75vw - 32px)",
               },
+              'width' : '2056',
+              'height' : '882'
             },
           ],
           optional_attributes={
@@ -73,7 +77,9 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-about-read-the-latest') }}</h2>
               'sizes': {
                 "(min-width: 768px)": "calc(50vw - 32px)",
                 "default": "calc(100vw - 16px)",
-              }
+              },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -84,7 +90,9 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-about-read-the-latest') }}</h2>
               'sizes': {
                 "(min-width: 1440px)": "564px",
                 "default": "calc(41vw - 32px)",
-              }
+              },
+              'width' : '1128',
+              'height' : '1410'
             },
           ],
           optional_attributes={
@@ -115,7 +123,9 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-about-read-the-latest') }}</h2>
               'sizes': {
                 "(min-width: 768px)": "calc(50vw - 32px)",
                 "default": "calc(100vw - 16px)",
-              }
+              },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -127,6 +137,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-about-read-the-latest') }}</h2>
                 "(min-width: 1440px)": "448px",
                 "default": "calc(33vw - 32px)",
               },
+              'width' : '896',
+              'height' : '894'
             },
           ],
           optional_attributes={

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-gallery.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-gallery.html
@@ -33,6 +33,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                 "default": "calc(100vw - 32px)",
               },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -43,6 +45,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 1440px)": "337px",
                 "default": "calc(25vw - 64px)",
               },
+              'width' : '664',
+              'height' : '664'
             },
           ],
           optional_attributes={
@@ -76,6 +80,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                 "default": "calc(100vw - 32px)",
               },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -87,6 +93,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 1440px)": "680px",
                 "default": "calc((100vw - 64px) / 2)",
               },
+              'width' : '1360',
+              'height' : '1088'
             },
           ],
           optional_attributes={
@@ -120,6 +128,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                 "default": "calc(100vw - 32px)",
               },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -129,7 +139,9 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
               'sizes': {
                 "(min-width: 1440px)": "332px",
                 "default": "calc((100vw - 64px) / 4)",
-              }
+              },
+              'width' : '664',
+              'height' : '664'
             },
           ],
           optional_attributes={
@@ -163,6 +175,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                 "default": "calc(100vw - 32px)",
               },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -174,6 +188,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 1440px)": "680px",
                 "default": "calc((100vw - 64px) / 2)",
               },
+              'width' : '1360',
+              'height' : '1088'
             },
           ],
           optional_attributes={
@@ -207,6 +223,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
                 "(min-width: 768px)": "calc((100vw - 32px) / 2)",
                 "default": "calc(100vw - 32px)",
               },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -216,7 +234,9 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
               'sizes': {
                 "(min-width: 1440px)": "332px",
                 "default": "calc((100vw - 64px) / 4)",
-              }
+              },
+              'width' : '664',
+              'height' : '664'
             },
           ],
           optional_attributes={
@@ -248,8 +268,10 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
               },
               'sizes': {
                 "(min-width: 768px)": "calc((100vw - 32px) / 2)",
-                "default": "calc(100vw - 32px)",
+                "default": "calc(100vw - 32px)"
               },
+              'width' : '1450',
+              'height' : '723'
             },
             {
               'srcset': {
@@ -259,7 +281,9 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-join-the-movement') }}</h2>
               'sizes': {
                 "(min-width: 1440px)": "332px",
                 "default": "calc((100vw - 64px) / 4)",
-              }
+              },
+              'width' : '664',
+              'height' : '664'
             },
           ],
           optional_attributes={

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
@@ -17,7 +17,7 @@ <h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
     </div>
     <div class="m24-c-flag-media">
       <svg class="m24-c-flag-media-static" role="img" xmlns="http://www.w3.org/2000/svg" width="216" height="243" fill="none" viewBox="0 0 216 243"><title>{{ ftl('m24-home-alt-flag') }}</title><path d="M93.573 29v20.734h72.565v5.351l-61.196 22.238v18.728l61.196 22.237v5.352H72.172v20.734h115.367v-37.788l-49.826-17.224v-5.349l49.826-17.222V29H93.573ZM29.034 214.6h23.743V29H29.034v185.6ZM72.172 71.136h21.401V49.734H72.172v21.402Z" /></svg>
-      <svg class="m24-c-flag-media-animation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.26 200.19">
+      <svg class="m24-c-flag-media-animation" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.26 200.19" width="176" height="200">
         <title>{{ ftl('m24-home-alt-flag') }}</title>
         <defs>
             <filter id="dilate" x="-10%" y="-10%" width="120%" height="120%">

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/issues-gallery.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/issues-gallery.html
@@ -39,8 +39,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-explore-issues-shaping') }}</h2>
         optional_attributes={
           "loading": "lazy",
           "alt": ftl('m24-home-alt-pni'),
-          "height": "1450",
-          "width": "725",
+          "width": "1450",
+          "height": "725",
         }
       ),
       title=ftl('m24-home-privacy-not-included'),
@@ -77,8 +77,8 @@ <h2 class="m24-c-intro-title">{{ ftl('m24-home-explore-issues-shaping') }}</h2>
         optional_attributes={
           "loading": "lazy",
           "alt": ftl('m24-home-alt-irl-host'),
-          "height": "1450",
-          "width": "725",
+          "width": "1450",
+          "height": "725",
         }
       ),
       title=ftl('m24-home-irl-podcast'),

diff --git a/bedrock/mozorg/templatetags/misc.py b/bedrock/mozorg/templatetags/misc.py
@@ -246,6 +246,8 @@ def picture(ctx={}, url=None, sources=[], optional_attributes=None):
         source_srcset = source.pop("srcset", False)
         source_type = source.pop("type", False)
         source_sizes = source.pop("sizes", False)
+        source_width = source.pop("width", False)
+        source_height = source.pop("height", False)
 
         # srcset
         if source_srcset:
@@ -274,7 +276,9 @@ def picture(ctx={}, url=None, sources=[], optional_attributes=None):
         type_markup = f' type="{source_type}"' if source_type else ""
         srcset_markup = f' srcset="{final_srcset}"' if final_srcset != "" else ""
         sizes_markup = f' sizes="{final_sizes}"' if final_sizes != "" else ""
-        source_markup = f"<source{media_markup}{type_markup}{srcset_markup}{sizes_markup}>"
+        width_markup = f' width="{source_width}"' if source_width else ""
+        height_markup = f' height="{source_height}"' if source_height else ""
+        source_markup = f"<source{media_markup}{type_markup}{srcset_markup}{sizes_markup}{width_markup}{height_markup}>"
         final_sources.append(source_markup)
 
     markup = f'<picture>{"".join(final_sources)}<img {loading}src="{url}" alt="{alt}"{attrs}></picture>'

diff --git a/bedrock/mozorg/tests/test_helper_misc.py b/bedrock/mozorg/tests/test_helper_misc.py
@@ -562,6 +562,24 @@ def test_picture_l10n_images(self):
         )
         self.assertEqual(markup, expected)
 
+    def test_picture_with_optional_height_and_width(self):
+        """Should return expected markup with optional attributes"""
+        expected = (
+            "<picture>"
+            '<source media="(max-width: 799px)" srcset="/media/img/panda-mobile.png" width="200" height="100">'
+            '<source media="(min-width: 800px)" srcset="/media/img/panda-desktop.png" width="300">'
+            '<img src="/media/img/panda-mobile.png" alt="">'
+            "</picture>"
+        )
+        markup = self._render(
+            "img/panda-mobile.png",
+            [
+                {"media": "(max-width: 799px)", "srcset": {"img/panda-mobile.png": "default"}, "width": "200", "height": "100"},
+                {"media": "(min-width: 800px)", "srcset": {"img/panda-desktop.png": "default"}, "width": "300"},
+            ],
+        )
+        self.assertEqual(markup, expected)
+
     def test_picture_with_optional_attributes(self):
         """Should return expected markup with optional attributes"""
         expected = (

diff --git a/docs/coding.rst b/docs/coding.rst
@@ -461,8 +461,8 @@ The example below shows how to serve a different image for desktop and mobile si
     picture(
         url="img/panda-mobile.png",
         sources=[
-            {"media": "(max-width: 799px)", "srcset": {"img/panda-mobile.png": "default"}},
-            {"media": "(min-width: 800px)", "srcset": {"img/panda-desktop.png": "default"}},
+            {"media": "(max-width: 799px)", "srcset": {"img/panda-mobile.png": "default", 'width' : '160', 'height' : '320'}},
+            {"media": "(min-width: 800px)", "srcset": {"img/panda-desktop.png": "default", 'width' : '640', 'height' : '1280'}},
         ],
     )
 
@@ -471,15 +471,19 @@ This would output:
 .. code-block:: html
 
     <picture>
-        <source media="(max-width: 799px)" srcset="/media/img/panda-mobile.png">
-        <source media="(min-width: 800px)" srcset="/media/img/panda-desktop.png">
+        <source media="(max-width: 799px)" srcset="/media/img/panda-mobile.png" width="160" height="320">
+        <source media="(min-width: 800px)" srcset="/media/img/panda-desktop.png" width="640" height="1280">
         <img src="/media/img/panda-mobile.png" alt="">
     </picture>
 
-In the above example, the default image ``src`` is what we specifed using the ``url`` param. This is also what older
+In the above example, the default image ``src`` is what we specified using the ``url`` param. This is also what older
 browsers will fall back to using. We then used the ``sources`` parameter to specify one or more alternate image
 ``<source>`` elements, which modern browsers can take advantage of. For each ``<source>``, ``media`` lets us specify
 a media query as a condition for when to load an image, and ``srcset`` lets us specify one or more sizes for each image.
+Each ``srcset`` also takes optional parameters for ``height`` and ``width``. Defining height and width helps the Browser
+reserve space for the image and avoid content shifting around on the page. If the image will not change dimensions, these
+can be defined in the ``optional_attributes`` for the entire element instead of separately like this.
+
 
 .. note::
 

diff --git a/media/css/m24/gallery.scss b/media/css/m24/gallery.scss
@@ -74,10 +74,11 @@
 
     .m24-l-gallery-no-desc & {
         font-family: $primary-font;
-        font-size: $text-title-md;
+        font-size: 16px;
 
-        @media #{$mq-md} {
+        @media #{$mq-lg} {
             font-family: $secondary-font;
+            font-size: 32px;
         }
     }
 }
@@ -120,7 +121,7 @@
 
 .m24-c-gallery-tile-tag {
     align-items: center;
-    background-color: $m24-color-white;
+    background-color: $m24-color-alt-white;
     color: $m24-color-black;
     display: flex;
     font-size: 14px; // fixed size
@@ -152,6 +153,6 @@
 
 .m24-c-gallery-tile-cta > span {
     font-size: $text-button-sm;
-    font-weight: bold;
+    font-weight: 600;
     text-decoration: underline;
 }