Add Image for srcset and lazy loading

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### Feature
 
+- Add Image with srcset and lazy loading using Plone scales @nzambello
+
 ### Bugfix
 
 - Fix downloadableObjects default value @giuliaghisini

cypress/tests/core/blocks-image.js

@@ -113,7 +113,7 @@ describe('Blocks Tests', () => {
     // 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/icon');
 
     cy.get('.block img')
       .should('be.visible')

cypress/tests/core/blocks-listing-templates.js

@@ -48,7 +48,7 @@ describe('Folder Contents Tests', () => {
     cy.url().should('eq', Cypress.config().baseUrl + '/my-folder/my-document');
     cy.get('.listing-item img')
       .should('have.attr', 'src')
-      .and('contain', '/my-folder/my-document/my-image/@@images/image/preview');
+      .and('contain', '/my-folder/my-document/my-image/@@images/image/icon');
     cy.get('.listing-item img')
       .should('be.visible')
       .and(($img) => {

cypress/tests/core/objectBrowser.js

@@ -44,7 +44,7 @@ describe('Object Browser Tests', () => {
     // then we should see a image
     cy.get('.block img')
       .should('have.attr', 'src')
-      .and('eq', '/my-page-1/my-image/@@images/image');
+      .and('eq', '/my-page-1/my-image/@@images/image/icon');
   });
 
   it('As editor I can add the full url in search box in sidebar', () => {
@@ -61,7 +61,7 @@ describe('Object Browser Tests', () => {
     // then we should see a image
     cy.get('.block img')
       .should('have.attr', 'src')
-      .and('eq', '/my-page-1/my-image/@@images/image');
+      .and('eq', '/my-page-1/my-image/@@images/image/icon');
   });
 
   it('As editor I get focus on search box in sidebar when clicking on lens icon', () => {

docs/source/developer-guidelines/images.md

@@ -0,0 +1,42 @@
+# Images
+
+Images are rendered with the Volto component `Image`.  
+It renders images using Plone scales from [plone.app.imaging](https://github.com/plone/plone.app.imaging) and handles:
+
+- Lazy load of images
+- Loads the most correct one for current image size with `srcset`
+
+## Usage
+
+```jsx
+import Image from '@plone/volto/components/theme/Image/Image';
+
+  ...
+
+  <Image
+    className="listing-image"
+    image={item.image}
+    aria-hidden="true"
+    alt=""
+    useOriginal={false}
+    maxSize={400}
+  />
+```
+
+## Props
+
+| prop        | type             | default | description                                                                    |
+| ----------- | ---------------- | ------- | ------------------------------------------------------------------------------ |
+| image       | object or string |         | Plone image as object or URL                                                   |
+| alt         | string           | `''`    | Alternative text for the image                                                 |
+| className   | string           |         | CSS class for the image                                                        |
+| role        | string           | `img`   | img role attribute                                                             |
+| critical    | boolean          | `false` | If true, it will render the actual image on SSR and it will not be lazy loaded |
+| maxSize     | number           |         | Maximum size to render, will skip the larger ones                              |
+| useOriginal | boolean          | `false` | If true, it will includes the original size in srcset                          |
+
+### image prop
+
+If it is an object, it assumes it is a Plone Image content object and it will render the scales it has inside.
+Else if it is a string, it checks if it is an internal URL: if so, it will generate the scales URLs based on the settings in `config.settings.imageScales` which should match the ones in Plone imaging controlpanel (so in Plone registry).
+If it is an external URL, it will set it as source for the image.

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';
 import { LinkMore } from '@plone/volto/components';
 
 /**
@@ -16,14 +16,7 @@ import { LinkMore } from '@plone/volto/components';
 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">
         <div className="hero-text">
           {data.title && <h1>{data.title}</h1>}

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

@@ -2,8 +2,22 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
+import config from '@plone/volto/registry';
+
+config.settings.imageScales = {
+  large: 768,
+  preview: 400,
+  mini: 200,
+  thumb: 128,
+  tile: 64,
+  icon: 32,
+  listing: 16,
+};
+
 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,38 @@ 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
+      className="volto-image"
+    >
+      <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\\"
+                alt=\\"\\"
+                class=\\"hero-image\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: 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

@@ -4,11 +4,23 @@ import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import View from './View';
 
+import config from '@plone/volto/registry';
+
+config.settings.imageScales = {
+  large: 768,
+  preview: 400,
+  mini: 200,
+  thumb: 128,
+  tile: 64,
+  icon: 32,
+  listing: 16,
+};
+
 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 +31,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

@@ -7,9 +7,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import cx from 'classnames';
-import config from '@plone/volto/registry';
-
 import { flattenToAppURL } from '@plone/volto/helpers';
+import Image from '@plone/volto/components/theme/Image/Image';
+
+import config from '@plone/volto/registry';
 
 /**
  * View image block class.
@@ -30,10 +31,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

@@ -2,13 +2,63 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import View from './View';
 
+import config from '@plone/volto/registry';
+
+config.settings.imageScales = {
+  large: 768,
+  preview: 400,
+  mini: 200,
+  thumb: 128,
+  tile: 64,
+  icon: 32,
+  listing: 16,
+};
+
 test('renders a view image component', () => {
   const component = renderer.create(
     <View
       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,38 @@ exports[`renders a view image component 1`] = `
 <p
   className="block image align center"
 >
-  <img
-    alt=""
-    className=""
-    src="image.png"
+  <picture
+    className="volto-image"
+  >
+    <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\\"
+                alt=\\"\\"
+                class=\\"\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+      }
+    }
   />
 </p>
 `;