set sizes for picture-tags, fixes #179

Author: MrTango

news/178.bugfix

@@ -0,0 +1 @@
+set sizes attribute on picture-tags [MrTango]

plone/namedfile/picture.py

@@ -47,11 +47,19 @@ def get_scale_width(self, scale):
         return scale_info[0]
 
     def create_picture_tag(
-        self, sourceset, attributes, uid=None, fieldname=None, resolve_urls=False
+        self,
+        sourceset,
+        attributes,
+        uid=None,
+        fieldname=None,
+        resolve_urls=False,
+        sizes=None,
     ):
         """Converts the img tag to a picture tag with picture_variant definition"""
         width = None
         height = None
+        target_width = None
+        sizes = sizes or ""
         src = attributes.get("src")
         if not uid and not src:
             raise TypeError("Either uid or attributes['src'] need to be given.")
@@ -68,6 +76,7 @@ def create_picture_tag(
         for i, source in enumerate(sourceset):
             target_scale = source["scale"]
             media = source.get("media")
+            sizes = source.get("sizes")
 
             additional_scales = source.get("additionalScales", None)
             if additional_scales is None:
@@ -78,6 +87,8 @@ def create_picture_tag(
             source_srcset = []
             for scale in source_scales:
                 scale_width = self.get_scale_width(scale)
+                if scale == target_scale:
+                    target_width = scale_width
                 if not scale_width:
                     logger.warning("No width found for scale %s.", scale)
                     continue
@@ -92,7 +103,11 @@ def create_picture_tag(
                     # scale_url = scale_obj.url
                     scale_url = self.update_src_scale(src=src, scale=scale)
                 source_srcset.append(f"{scale_url} {scale_width}w")
-            source_tag = soup.new_tag("source", srcset=",\n".join(source_srcset))
+            if not sizes:
+                sizes = f"(min-width: 576px) {target_width}px, 98vw"
+            source_tag = soup.new_tag(
+                "source", srcset=",\n".join(source_srcset), sizes=sizes
+            )
             if media:
                 source_tag["media"] = media
             picture_tag.append(source_tag)

plone/namedfile/tests/test_scaling.py

@@ -88,7 +88,8 @@ def patch_Img2PictureTag_picture_variants():
             "sourceset": [
                 {
                     "scale": "preview",
-                    "additionalScales": ["preview", "large", "larger"],
+                    "additionalScales": ["large", "larger"],
+                    "sizes": "(min-width: 576px) 350px, (min-width: 768px) 600px, 98vw",
                 }
             ],
         },
@@ -538,22 +539,57 @@ def testGetPictureTagByName(self, mock_uuid_to_object):
         mock_uuid_to_object.return_value = self.item
         tag = self.scaling.picture("image", picture_variant="medium")
         expected = """<picture>
- <source srcset="http://nohost/item/@@images/image-600-....png 600w,
+ <source...srcset="http://nohost/item/@@images/image-600-....png 600w,
 http://nohost/item/@@images/image-400-....png 400w,
 http://nohost/item/@@images/image-800-....png 800w,
 http://nohost/item/@@images/image-1000-....png 1000w,
-http://nohost/item/@@images/image-1200-....png 1200w"/>
+http://nohost/item/@@images/image-1200-....png 1200w".../>
  <img...src="http://nohost/item/@@images/image-600-....png".../>
 </picture>"""
         self.assertTrue(_ellipsis_match(expected, tag.strip()))
+        # The exact placement of the img tag attributes can differ, especially
+        # with different beautifulsoup versions.
+        # So check here that all attributes are present.
+        self.assertIn('height="200"', tag)
+        self.assertIn('loading="lazy"', tag)
+        self.assertIn('title="foo"', tag)
+        self.assertIn('width="200"', tag)
+        self.assertIn('sizes="(min-width: 576px) 600px, 98vw"', tag)
 
+    @patch.object(
+        plone.namedfile.scaling,
+        "get_picture_variants",
+        new=patch_Img2PictureTag_picture_variants,
+        spec=True,
+    )
+    @patch.object(
+        plone.namedfile.picture,
+        "get_allowed_scales",
+        new=patch_Img2PictureTag_allowed_scales,
+        spec=True,
+    )
+    @patch.object(plone.namedfile.picture, "uuidToObject", spec=True)
+    def testGetPictureTagCustomSizes(self, mock_uuid_to_object):
+        ImageScaling._sizes = patch_Img2PictureTag_allowed_scales()
+        mock_uuid_to_object.return_value = self.item
+        tag = self.scaling.picture("image", picture_variant="small")
+        expected = """<picture>
+ <source...srcset="http://nohost/item/@@images/image-400-....png 400w,
+http://nohost/item/@@images/image-800-....png 800w,
+http://nohost/item/@@images/image-1000-....png 1000w".../>
+ <img...src="http://nohost/item/@@images/image-400-....png".../>
+</picture>"""
+        self.assertTrue(_ellipsis_match(expected, tag.strip()))
         # The exact placement of the img tag attributes can differ, especially
         # with different beautifulsoup versions.
         # So check here that all attributes are present.
         self.assertIn('height="200"', tag)
         self.assertIn('loading="lazy"', tag)
         self.assertIn('title="foo"', tag)
         self.assertIn('width="200"', tag)
+        self.assertIn(
+            'sizes="(min-width: 576px) 350px, (min-width: 768px) 600px, 98vw"', tag
+        )
 
     @patch.object(
         plone.namedfile.scaling,
@@ -579,11 +615,11 @@ def testGetPictureTagWithAltAndTitle(self, mock_uuid_to_object):
         )
         base = self.item.absolute_url()
         expected = f"""<picture>
- <source srcset="{base}/@@images/image-600-....png 600w,
+ <source...srcset="{base}/@@images/image-600-....png 600w,
 {base}/@@images/image-400-....png 400w,
 {base}/@@images/image-800-....png 800w,
 {base}/@@images/image-1000-....png 1000w,
-{base}/@@images/image-1200-....png 1200w"/>
+{base}/@@images/image-1200-....png 1200w".../>
  <img...src="{base}/@@images/image-600-....png".../>
 </picture>"""
         self.assertTrue(_ellipsis_match(expected, tag.strip()))