Add Image for srcset and lazy loading

CHANGELOG.md

@@ -61,6 +61,7 @@
 ### Feature
 
 - Lazy load image in blocks Image and HeroImage @mamico
+- Add ImageFromUrl with srcset and lazy loading using Plone miniatures @nzambello
 
 ### Bugfix
 

cypress/integration/blocks-image.js

@@ -107,7 +107,7 @@ if (Cypress.env('API') !== 'guillotina') {
       // then image src must be equal to image name
       cy.get('.block img')
         .should('have.attr', 'src')
-        .and('eq', '/my-page/image.png/@@images/image');
+        .and('eq', '/my-page/image.png/@@images/image/listing');
     });
 
     it('Create a image block document in edit mode', () => {

src/components/manage/Blocks/HeroImageLeft/View.jsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * View image block class.
@@ -15,14 +15,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 const View = ({ data }) => (
   <div className="block hero">
     <div className="block-inner-wrapper">
-      {data.url && (
-        <img
-          src={`${flattenToAppURL(data.url)}/@@images/image`}
-          alt=""
-          className="hero-image"
-          loading="lazy"
-        />
-      )}
+      {data.url && <Image image={data.url} className="hero-image" />}
       <div className="hero-body">
         {data.title && <h1>{data.title}</h1>}
         {data.description && <p>{data.description}</p>}

src/components/manage/Blocks/HeroImageLeft/View.test.jsx

@@ -3,7 +3,9 @@ import renderer from 'react-test-renderer';
 import View from './View';
 
 test('renders a view hero component', () => {
-  const component = renderer.create(<View data={{ url: 'heroimage.jpg' }} />);
+  const component = renderer.create(
+    <View data={{ url: 'http://localhost:8080/Plone/heroimage.jpg' }} />,
+  );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();
 });

src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap

@@ -7,11 +7,36 @@ exports[`renders a view hero component 1`] = `
   <div
     className="block-inner-wrapper"
   >
-    <img
-      alt=""
-      className="hero-image"
-      loading="lazy"
-      src="heroimage.jpg/@@images/image"
+    <picture>
+      <img
+        alt=""
+        className="hero-image"
+        loading="lazy"
+        role="img"
+        src="/heroimage.jpg/@@images/image/listing"
+        style={
+          Object {
+            "objectFit": "cover",
+            "width": "100%",
+          }
+        }
+      />
+    </picture>
+    <noscript
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "
+              <img
+                src=\\"/heroimage.jpg/@@images/image/listing\\"
+                srcset=\\"/heroimage.jpg/@@images/image/large 768w, /heroimage.jpg/@@images/image/preview 400w, /heroimage.jpg/@@images/image/mini 200w, /heroimage.jpg/@@images/image/thumb 128w, /heroimage.jpg/@@images/image/tile 64w, /heroimage.jpg/@@images/image/icon 32w, /heroimage.jpg/@@images/image/listing 16w, /heroimage.jpg/@@images/image 1200w\\"
+                alt=\\"\\"
+                className=\\"hero-image\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style={{ width: '100%', objectFit: 'cover' }}
+            ",
+        }
+      }
     />
     <div
       className="hero-body"

src/components/manage/Blocks/Image/View.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import cx from 'classnames';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 
@@ -30,33 +31,15 @@ const View = ({ data, detached }) => (
       <>
         {(() => {
           const image = (
-            <img
+            <Image
+              image={data.url}
+              alt={data.alt}
               className={cx({
                 'full-width': data.align === 'full',
                 large: data.size === 'l',
                 medium: data.size === 'm',
                 small: data.size === 's',
               })}
-              src={
-                isInternalURL(data.url)
-                  ? // Backwards compat in the case that the block is storing the full server URL
-                    (() => {
-                      if (data.size === 'l')
-                        return `${flattenToAppURL(data.url)}/@@images/image`;
-                      if (data.size === 'm')
-                        return `${flattenToAppURL(
-                          data.url,
-                        )}/@@images/image/preview`;
-                      if (data.size === 's')
-                        return `${flattenToAppURL(
-                          data.url,
-                        )}/@@images/image/mini`;
-                      return `${flattenToAppURL(data.url)}/@@images/image`;
-                    })()
-                  : data.url
-              }
-              alt={data.alt || ''}
-              loading="lazy"
             />
           );
           if (data.href) {

src/components/manage/Blocks/Image/View.test.jsx

@@ -8,7 +8,7 @@ describe('Image View Component', () => {
   test('renders a view image component with a local image', () => {
     const { getByRole } = render(<View data={{ url: '/image.jpg' }} />);
     const img = getByRole('img');
-    expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
+    expect(img).toHaveAttribute('src', '/image.jpg/@@images/image/listing');
     expect(img).toHaveAttribute('loading', 'lazy');
   });
   test('renders a view image component with a local image with a link', () => {
@@ -19,7 +19,7 @@ describe('Image View Component', () => {
     );
     const img = getByRole('img');
     const a = container.querySelector('a');
-    expect(img).toHaveAttribute('src', '/image.jpg/@@images/image');
+    expect(img).toHaveAttribute('src', '/image.jpg/@@images/image/listing');
     expect(a).toHaveAttribute('href', '/front-page');
   });
   test('renders a view image component with an external image', () => {

src/components/manage/Blocks/LeadImage/View.jsx

@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
 import cx from 'classnames';
 import { settings } from '~/config';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * View image block class.
@@ -30,10 +30,10 @@ const View = ({ data, properties }) => (
       <>
         {(() => {
           const image = (
-            <img
+            <Image
+              image={properties.image}
+              alt={properties.image_caption}
               className={cx({ 'full-width': data.align === 'full' })}
-              src={flattenToAppURL(properties.image.download)}
-              alt={properties.image_caption || ''}
             />
           );
           if (data.href) {

src/components/manage/Blocks/LeadImage/View.test.jsx

@@ -8,7 +8,45 @@ test('renders a view image component', () => {
       data={{}}
       properties={{
         image: {
-          download: 'image.png',
+          download: 'http://localhost:8080/Plone/test-images/@@images/image',
+          width: 1920,
+          scales: {
+            listing: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image/listing',
+              width: 16,
+            },
+            icon: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image/icon',
+              width: 32,
+            },
+            tile: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image/tile',
+              width: 64,
+            },
+            thumb: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image/thumb',
+              width: 128,
+            },
+            mini: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image/mini',
+              width: 200,
+            },
+            preview: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image/preview',
+              width: 400,
+            },
+            large: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image/large',
+              width: 768,
+            },
+          },
         },
       }}
     />,

src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap

@@ -4,10 +4,36 @@ exports[`renders a view image component 1`] = `
 <p
   className="block image align center"
 >
-  <img
-    alt=""
-    className=""
-    src="image.png"
+  <picture>
+    <img
+      alt=""
+      className=""
+      loading="lazy"
+      role="img"
+      src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      style={
+        Object {
+          "objectFit": "cover",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>
+  <noscript
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+              <img
+                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                srcset=\\"/test-images/@@images/image/listing 16w, /test-images/@@images/image/icon 32w, /test-images/@@images/image/tile 64w, /test-images/@@images/image/thumb 128w, /test-images/@@images/image/mini 200w, /test-images/@@images/image/preview 400w, /test-images/@@images/image/large 768w, /test-images/@@images/image 1920w\\"
+                alt=\\"\\"
+                className=\\"\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style={{ width: '100%', objectFit: 'cover' }}
+            ",
+      }
+    }
   />
 </p>
 `;

src/components/manage/Blocks/Listing/DefaultTemplate.jsx

@@ -4,6 +4,7 @@ import { ConditionalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { settings } from '~/config';
 
+import Image from '@plone/volto/components/theme/Image/Image';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
@@ -34,11 +35,8 @@ const DefaultTemplate = ({ items, linkMore, isEditMode }) => {
                 <img src={DefaultImageSVG} alt="" />
               )}
               {item[settings.listingPreviewImageField] && (
-                <img
-                  src={flattenToAppURL(
-                    item[settings.listingPreviewImageField].scales.preview
-                      .download,
-                  )}
+                <Image
+                  image={item[settings.listingPreviewImageField]}
                   alt={item.title}
                 />
               )}

src/components/theme/Image/Image.jsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { getImageAttributes } from '@plone/volto/helpers';
+
+/**
+ * Image component
+ * @param {object | string} image - Plone image as object or url
+ * @param {string} alt - Alternative text for image
+ * @param {string} className - CSS class attribute
+ * @param {string} role - img role attribute
+ * @param {boolean} critical - whether to load the image
+ */
+const Image = ({
+  image,
+  alt = '',
+  className,
+  role = 'img',
+  critical = false,
+  ...imageProps
+}) => {
+  const { src, srcSet } = getImageAttributes(image);
+  const [isClient, setIsClient] = useState(false);
+  const [srcset, setSrcset] = useState(
+    critical && srcSet ? srcSet.join(', ') : null,
+  );
+
+  useEffect(() => {
+    setIsClient(true);
+    if (!srcset && srcSet?.length > 0) setSrcset(srcSet.join(', '));
+  }, [srcSet, srcSet?.length, srcset]);
+
+  return (
+    <>
+      <picture>
+        {srcset && (isClient || critical) && <source srcSet={srcset} />}
+        <img
+          src={src}
+          alt={alt}
+          className={className}
+          role={role}
+          loading="lazy"
+          style={{ width: '100%', objectFit: 'cover' }}
+          {...imageProps}
+        />
+      </picture>
+      {!critical && (
+        <noscript
+          dangerouslySetInnerHTML={{
+            __html: `
+              <img
+                src="${src}"
+                ${srcSet?.length && `srcset="${srcSet.join(', ')}"`}
+                alt="${alt}"
+                className="${className}"
+                role="${role}"
+                loading="lazy"
+                style={{ width: '100%', objectFit: 'cover' }}
+            `,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+Image.propTypes = {
+  image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  role: PropTypes.string,
+};
+
+export default Image;