Add a method to the @@images view to render a img tag with srcset

news/170.feature

@@ -0,0 +1,2 @@
+Add a srcset method to the @@images view
+[erral]

plone/namedfile/scaling.py

@@ -739,6 +739,71 @@ def picture(
             fieldname=fieldname,
         ).prettify()
 
+    def srcset(
+        self,
+        fieldname=None,
+        scale_in_src="huge",
+        sizes="",
+        alt=_marker,
+        css_class=None,
+        title=_marker,
+        **kwargs,
+    ):
+        if fieldname is None:
+            try:
+                primary = IPrimaryFieldInfo(self.context, None)
+            except TypeError:
+                return
+            if primary is None:
+                return  # 404
+            fieldname = primary.fieldname
+
+        original_width, original_height = self.getImageSize(fieldname)
+
+        storage = getMultiAdapter(
+            (self.context, functools.partial(self.modified, fieldname)),
+            IImageScaleStorage,
+        )
+
+        srcset_urls = []
+        for width, height in self.available_sizes.values():
+            if width <= original_width:
+                scale = storage.pre_scale(
+                    fieldname=fieldname, width=width, height=height, mode="scale"
+                )
+                extension = scale["mimetype"].split("/")[-1].lower()
+                srcset_urls.append(
+                    f'{self.context.absolute_url()}/@@images/{scale["uid"]}.{extension} {scale["width"]}w'
+                )
+        attributes = {}
+        if title is _marker:
+            attributes["title"] = self.context.Title()
+        elif title:
+            attributes["title"] = title
+        if alt is not _marker:
+            attributes["alt"] = alt
+
+        if css_class is not None:
+            attributes["class"] = css_class
+
+        attributes.update(**kwargs)
+
+        attributes["sizes"] = sizes
+
+        srcset_string = ", ".join(srcset_urls)
+        attributes["srcset"] = srcset_string
+
+        if scale_in_src not in self.available_sizes:
+            for key, (width, height) in self.available_sizes.items():
+                if width <= original_width:
+                    scale_in_src = key
+                    break
+
+        scale = self.scale(fieldname=fieldname, scale=scale_in_src)
+        attributes["src"] = scale.url
+
+        return _image_tag_from_values(*attributes.items())
+
 
 class NavigationRootScaling(ImageScaling):
     @lazy_property

plone/namedfile/test.pt

@@ -42,6 +42,10 @@
              i18n:name=""
              i18n:translate=""
           >picture tags</a>,
+          <a href="#srcset"
+             i18n="name"
+             i18n:translate=""
+          >img tag with srcset</a>,
           <a href="#stored"
              i18n:name=""
              i18n:translate=""
@@ -198,6 +202,26 @@
           </p>
         </section>
 
+        <section class="section"
+                 id="srcset"
+        >
+          <h2 i18n:translate="">img with srcset attributes</h2>
+          <p i18n:translate="">
+      srcset allows the browser to select the correct image, depending on the space the image has on a page.
+          </p>
+          <p i18n:translate="msg_images_test_srcset">
+      To do so, the @@images view provides a srcset method, that will output the full srcset of this image, using all available image scales. It has as required parameter the value of the sizes attribute that the user of this method has to provide and will be output as is in the generated HTML.
+          </p>
+          <p>
+            <img tal:replace="structure python:images.srcset('image', sizes='(min-width: 1400px) 550px, 90vw')" />
+          </p>
+          <p>
+            <code>
+              <img tal:replace="python:images.srcset('image', sizes='(min-width: 1400px) 550px, 90vw')" />
+            </code>
+          </p>
+        </section>
+
         <section class="section"
                  id="stored"
         >

plone/namedfile/tests/test_scaling.py

@@ -813,6 +813,117 @@ def testOversizedHighPixelDensityScale(self):
         self.assertEqual(len(foo.srcset), 1)
         self.assertEqual(foo.srcset[0]["scale"], 2)
 
+    def testImgSrcSet(self):
+        """test rendered srcset values"""
+        self.scaling.available_sizes = {
+            "huge": (1600, 65536),
+            "great": (1200, 65536),
+            "larger": (1000, 65536),
+            "large": (800, 65536),
+            "teaser": (600, 65536),
+            "preview": (400, 65536),
+            "mini": (200, 65536),
+            "thumb": (128, 128),
+            "tile": (64, 64),
+            "icon": (32, 32),
+            "listing": (16, 16),
+        }
+        tag = self.scaling.srcset("image", sizes="50vw")
+        base = self.item.absolute_url()
+        expected = f"""<img title="foo" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-1600-....png".../>"""
+        self.assertTrue(_ellipsis_match(expected, tag.strip()))
+
+    def testImgSrcSetCustomSrc(self):
+        """test that we can select a custom scale in the src attribute"""
+        self.scaling.available_sizes = {
+            "huge": (1600, 65536),
+            "great": (1200, 65536),
+            "larger": (1000, 65536),
+            "large": (800, 65536),
+            "teaser": (600, 65536),
+            "preview": (400, 65536),
+            "mini": (200, 65536),
+            "thumb": (128, 128),
+            "tile": (64, 64),
+            "icon": (32, 32),
+            "listing": (16, 16),
+        }
+        tag = self.scaling.srcset("image", sizes="50vw", scale_in_src="mini")
+        base = self.item.absolute_url()
+        expected = f"""<img title="foo" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-200-....png".../>"""
+        self.assertTrue(_ellipsis_match(expected, tag.strip()))
+
+    def testImgSrcSetInexistentScale(self):
+        """test that when requesting an inexistent scale for the src attribute
+        we provide the biggest scale we can produce
+        """
+        self.scaling.available_sizes = {
+            "huge": (1600, 65536),
+            "great": (1200, 65536),
+            "larger": (1000, 65536),
+            "large": (800, 65536),
+            "teaser": (600, 65536),
+            "preview": (400, 65536),
+            "mini": (200, 65536),
+            "thumb": (128, 128),
+            "tile": (64, 64),
+            "icon": (32, 32),
+            "listing": (16, 16),
+        }
+        tag = self.scaling.srcset(
+            "image", sizes="50vw", scale_in_src="inexistent-scale-name"
+        )
+        base = self.item.absolute_url()
+        expected = f"""<img title="foo" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-200-....png".../>"""
+        self.assertTrue(_ellipsis_match(expected, tag.strip()))
+
+    def testImgSrcSetCustomTitle(self):
+        """test passing a custom title to the srcset method"""
+        self.scaling.available_sizes = {
+            "huge": (1600, 65536),
+            "great": (1200, 65536),
+            "larger": (1000, 65536),
+            "large": (800, 65536),
+            "teaser": (600, 65536),
+            "preview": (400, 65536),
+            "mini": (200, 65536),
+            "thumb": (128, 128),
+            "tile": (64, 64),
+            "icon": (32, 32),
+            "listing": (16, 16),
+        }
+        tag = self.scaling.srcset("image", sizes="50vw", title="My Custom Title")
+        base = self.item.absolute_url()
+        expected = f"""<img title="My Custom Title" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-1600-....png".../>"""
+        self.assertTrue(_ellipsis_match(expected, tag.strip()))
+
+    def testImgSrcSetAdditionalAttributes(self):
+        """test that additional parameters are output as is, like alt, loading, ..."""
+        self.scaling.available_sizes = {
+            "huge": (1600, 65536),
+            "great": (1200, 65536),
+            "larger": (1000, 65536),
+            "large": (800, 65536),
+            "teaser": (600, 65536),
+            "preview": (400, 65536),
+            "mini": (200, 65536),
+            "thumb": (128, 128),
+            "tile": (64, 64),
+            "icon": (32, 32),
+            "listing": (16, 16),
+        }
+        tag = self.scaling.srcset(
+            "image",
+            sizes="50vw",
+            alt="This image shows nothing",
+            css_class="my-personal-class",
+            title="My Custom Title",
+            loading="lazy",
+        )
+        base = self.item.absolute_url()
+        expected = f"""<img title="My Custom Title" alt="This image shows nothing" class="my-personal-class" loading="lazy" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-1600-....png".../>"""
+        self.assertTrue(_ellipsis_match(expected, tag.strip()))
+
 
 class ImageTraverseTests(unittest.TestCase):
 

plone/namedfile/usage.rst

@@ -457,3 +457,43 @@ several ways that you may reference scales from page templates.
 5. and lastly, the short-cut can also be used to render the unscaled image::
 
      <img tal:replace="structure context/@@images/image" />
+
+
+Image scales and srcset
+-----------------------
+
+Nowadays modern browsers are able to render different images depending on their width
+if urls and widths are correctly provided in an attribute called `srcset` and the rendered
+space is provided in the attribute `sizes`.
+
+So one can do the following:
+
+    <img tal:define="images context/@@images;"
+         tal:replace="structure python:images.srcset(sizes='90vw')" />
+
+
+This will render the `img` with the urls of all scales configured in Plone, calculating the width
+of each of the scales and will add the `sizes="90vw"` attribute which instructs the browser to "render
+the image that best fits as it will take the 90% of the current viewport-width" whichever is the current
+viewport.
+
+This will mean that for bigger screens the browser will download a bigger image while in small screens
+a smaller scale is enough.
+
+This also means that the developer does not need to worry on creating a specific scale, they only need to
+provide the correct media query to signal the required width.
+
+The `scrset` method of the `@@images` view takes also all other parameters that can be rendered in the `img`
+tag such as `title`, `alt` or `loading`:
+
+
+    <img tal:define="images context/@@images;"
+         tal:replace="structure python:images.srcset(sizes='90vw',
+                                                     alt='This is the alternative text',
+                                                     loading='lazy',
+                                                     css_class='rounded-img')" />
+
+
+*NOTE*: while using this approach may be useful for projects, using it in reusable addons is not recommended
+because it may require overriding it to your needs in a project. For such cases, we recommend using configurable
+picture variants.