From 7d6d66af9ca7f16a75affaf16e60f5d8571f63a6 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Tue, 5 Jan 2021 15:09:36 +0100
Subject: [PATCH 01/45] feat: add ImageFromUrl for srcset and lazy loading

---
 .../manage/Blocks/HeroImageLeft/View.jsx      | 11 +---
 .../manage/Blocks/HeroImageLeft/View.test.jsx |  4 +-
 .../__snapshots__/View.test.jsx.snap          |  5 +-
 src/components/manage/Blocks/Image/View.jsx   | 38 ++++++-------
 .../manage/Blocks/LeadImage/View.jsx          |  8 +--
 .../manage/Blocks/LeadImage/View.test.jsx     | 52 +++++++++++++++++-
 .../__snapshots__/View.test.jsx.snap          |  6 +-
 .../manage/Blocks/Listing/DefaultTemplate.jsx |  9 ++-
 .../theme/ImageFromUrl/ImageFromUrl.jsx       | 42 ++++++++++++++
 .../theme/ImageFromUrl/ImageFromUrl.test.jsx  | 28 ++++++++++
 .../__snapshots__/ImageFromUrl.test.jsx.snap  | 24 ++++++++
 src/components/theme/View/AlbumView.jsx       |  1 +
 src/components/theme/View/DefaultView.jsx     |  1 +
 src/components/theme/View/ImageView.jsx       |  7 ++-
 src/components/theme/View/ListingView.jsx     |  1 +
 src/components/theme/View/NewsItemView.jsx    |  1 +
 src/components/theme/View/SummaryView.jsx     |  1 +
 .../__snapshots__/ImageView.test.jsx.snap     |  2 +
 .../__snapshots__/SummaryView.test.jsx.snap   |  1 +
 src/config/ImageScales.jsx                    |  9 +++
 src/config/index.js                           |  5 +-
 src/helpers/Image/Image.js                    | 55 +++++++++++++++++++
 src/helpers/Image/Image.test.js               | 28 ++++++++++
 src/helpers/index.js                          |  2 +
 24 files changed, 293 insertions(+), 48 deletions(-)
 create mode 100644 src/components/theme/ImageFromUrl/ImageFromUrl.jsx
 create mode 100644 src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx
 create mode 100644 src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap
 create mode 100644 src/config/ImageScales.jsx
 create mode 100644 src/helpers/Image/Image.js
 create mode 100644 src/helpers/Image/Image.test.js

diff --git a/src/components/manage/Blocks/HeroImageLeft/View.jsx b/src/components/manage/Blocks/HeroImageLeft/View.jsx
index 092ed8c38c..d728ffadbd 100644
--- a/src/components/manage/Blocks/HeroImageLeft/View.jsx
+++ b/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 ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
 
 /**
  * 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 && <ImageFromUrl url={data.url} className="hero-image" />}
       <div className="hero-body">
         {data.title && <h1>{data.title}</h1>}
         {data.description && <p>{data.description}</p>}
diff --git a/src/components/manage/Blocks/HeroImageLeft/View.test.jsx b/src/components/manage/Blocks/HeroImageLeft/View.test.jsx
index ce2fe7c83b..bf370372a5 100644
--- a/src/components/manage/Blocks/HeroImageLeft/View.test.jsx
+++ b/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();
 });
diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 186361c20f..39177ea10b 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -11,7 +11,10 @@ exports[`renders a view hero component 1`] = `
       alt=""
       className="hero-image"
       loading="lazy"
-      src="heroimage.jpg/@@images/image"
+      role="img"
+      sizes={null}
+      src="/heroimage.jpg/@@images/image"
+      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"
     />
     <div
       className="hero-body"
diff --git a/src/components/manage/Blocks/Image/View.jsx b/src/components/manage/Blocks/Image/View.jsx
index 25a8b04c59..a68fe0573b 100644
--- a/src/components/manage/Blocks/Image/View.jsx
+++ b/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 ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
 
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 
@@ -30,33 +31,28 @@ const View = ({ data, detached }) => (
       <>
         {(() => {
           const image = (
-            <img
+            <ImageFromUrl
+              url={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"
+              size={(() => {
+                switch (data.size) {
+                  case 'm':
+                    return 'preview';
+
+                  case 's':
+                    return 'mini';
+
+                  case 'l':
+                  default:
+                    return null;
+                }
+              })()}
             />
           );
           if (data.href) {
diff --git a/src/components/manage/Blocks/LeadImage/View.jsx b/src/components/manage/Blocks/LeadImage/View.jsx
index 5dce8195e8..7b946173ea 100644
--- a/src/components/manage/Blocks/LeadImage/View.jsx
+++ b/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 ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
 
 /**
  * View image block class.
@@ -30,10 +30,10 @@ const View = ({ data, properties }) => (
       <>
         {(() => {
           const image = (
-            <img
+            <ImageFromUrl
+              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) {
diff --git a/src/components/manage/Blocks/LeadImage/View.test.jsx b/src/components/manage/Blocks/LeadImage/View.test.jsx
index 9aa8747399..5e73bc97af 100644
--- a/src/components/manage/Blocks/LeadImage/View.test.jsx
+++ b/src/components/manage/Blocks/LeadImage/View.test.jsx
@@ -8,7 +8,57 @@ test('renders a view image component', () => {
       data={{}}
       properties={{
         image: {
-          download: 'image.png',
+          'content-type': 'image/jpeg',
+          download:
+            'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+          filename: 'image.jpg',
+          height: 1280,
+          scales: {
+            icon: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+              height: 21,
+              width: 32,
+            },
+            large: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+              height: 512,
+              width: 768,
+            },
+            listing: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+              height: 10,
+              width: 16,
+            },
+            mini: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+              height: 133,
+              width: 200,
+            },
+            preview: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+              height: 266,
+              width: 400,
+            },
+            thumb: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+              height: 85,
+              width: 128,
+            },
+            tile: {
+              download:
+                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
+              height: 42,
+              width: 64,
+            },
+          },
+          size: 186918,
+          width: 1920,
         },
       }}
     />,
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index 3fdea7cdfa..2aa5fba2bd 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -7,7 +7,11 @@ exports[`renders a view image component 1`] = `
   <img
     alt=""
     className=""
-    src="image.png"
+    loading="lazy"
+    role="img"
+    sizes={null}
+    src="/test-images/@@images/image.jpeg"
+    srcSet="/test-images/@@images/image.jpeg 768w, /test-images/@@images/image.jpeg 400w, /test-images/@@images/image.jpeg 200w, /test-images/@@images/image.jpeg 128w, /test-images/@@images/image.jpeg 64w, /test-images/@@images/image.jpeg 32w, /test-images/@@images/image.jpeg 16w"
   />
 </p>
 `;
diff --git a/src/components/manage/Blocks/Listing/DefaultTemplate.jsx b/src/components/manage/Blocks/Listing/DefaultTemplate.jsx
index cc6ba65f2f..42cda54615 100644
--- a/src/components/manage/Blocks/Listing/DefaultTemplate.jsx
+++ b/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 ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
@@ -34,11 +35,9 @@ const DefaultTemplate = ({ items, linkMore, isEditMode }) => {
                 <img src={DefaultImageSVG} alt="" />
               )}
               {item[settings.listingPreviewImageField] && (
-                <img
-                  src={flattenToAppURL(
-                    item[settings.listingPreviewImageField].scales.preview
-                      .download,
-                  )}
+                <ImageFromUrl
+                  image={item[settings.listingPreviewImageField]}
+                  size="preview"
                   alt={item.title}
                 />
               )}
diff --git a/src/components/theme/ImageFromUrl/ImageFromUrl.jsx b/src/components/theme/ImageFromUrl/ImageFromUrl.jsx
new file mode 100644
index 0000000000..458eeaba59
--- /dev/null
+++ b/src/components/theme/ImageFromUrl/ImageFromUrl.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  isInternalURL,
+  flattenToAppURL,
+  getSrcSet,
+} from '@plone/volto/helpers';
+
+const ImageFromUrl = ({ image, url, alt = '', className, size, role }) => {
+  let src = image && image?.scales ? image.download : url;
+
+  if (!src) return null;
+
+  const imageParams = '/@@images/image' + (size ? `/${size}` : '');
+  const isInternal = isInternalURL(src);
+
+  src = isInternal ? flattenToAppURL(src) : src;
+  if (isInternal && src.indexOf('/@@images') === -1)
+    src = `${src}${imageParams}`;
+
+  return (
+    <img
+      alt={alt}
+      role={role ?? 'img'}
+      src={src}
+      loading="lazy"
+      className={className}
+      {...(isInternal ? getSrcSet(image?.scales ? image : src, size) : {})}
+    />
+  );
+};
+
+ImageFromUrl.propTypes = {
+  image: PropTypes.object,
+  url: PropTypes.string,
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  size: PropTypes.string,
+  role: PropTypes.string,
+};
+
+export default ImageFromUrl;
diff --git a/src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx b/src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx
new file mode 100644
index 0000000000..4fe40e4b39
--- /dev/null
+++ b/src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import ImageFromUrl from './ImageFromUrl';
+
+describe('ImageFromUrl', () => {
+  it('renders with default values', () => {
+    const component = renderer.create(
+      <ImageFromUrl url="http://localhost:8080/Plone/photo.png" />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with props', () => {
+    const component = renderer.create(
+      <ImageFromUrl
+        url="http://localhost:8080/Plone/photo.png"
+        alt="Photo"
+        className="photo-image"
+        size="preview"
+        role="presentation"
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});
diff --git a/src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap b/src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap
new file mode 100644
index 0000000000..f00d5790b0
--- /dev/null
+++ b/src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageFromUrl renders with default values 1`] = `
+<img
+  alt=""
+  loading="lazy"
+  role="img"
+  sizes={null}
+  src="/photo.png/@@images/image"
+  srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
+/>
+`;
+
+exports[`ImageFromUrl renders with props 1`] = `
+<img
+  alt="Photo"
+  className="photo-image"
+  loading="lazy"
+  role="presentation"
+  sizes="400px"
+  src="/photo.png/@@images/image/preview"
+  srcSet="/photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
+/>
+`;
diff --git a/src/components/theme/View/AlbumView.jsx b/src/components/theme/View/AlbumView.jsx
index 82dc03e2c9..16fd8650c4 100644
--- a/src/components/theme/View/AlbumView.jsx
+++ b/src/components/theme/View/AlbumView.jsx
@@ -144,6 +144,7 @@ class AlbumView extends Component {
                                       : item.title
                                   }
                                   src={item.image.scales.large.download}
+                                  loading="lazy"
                                 />
                                 <Modal.Description>
                                   <p>{item.description}</p>
diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
index 303f0ba11a..0d96f2c6a3 100644
--- a/src/components/theme/View/DefaultView.jsx
+++ b/src/components/theme/View/DefaultView.jsx
@@ -71,6 +71,7 @@ const DefaultView = ({ content, intl, location }) => {
           className="document-image"
           src={content.image.scales.thumb.download}
           floated="right"
+          loading="lazy"
         />
       )}
       {content.remoteUrl && (
diff --git a/src/components/theme/View/ImageView.jsx b/src/components/theme/View/ImageView.jsx
index b3bc1d5908..4ce474ce03 100644
--- a/src/components/theme/View/ImageView.jsx
+++ b/src/components/theme/View/ImageView.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Container } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-
+import ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
@@ -28,9 +28,10 @@ const ImageView = ({ content }) => (
     )}
     {content?.image?.download && (
       <a href={flattenToAppURL(content.image.download)}>
-        <img
+        <ImageFromUrl
+          image={content.image}
+          size="preview"
           alt={content.title}
-          src={flattenToAppURL(content.image.scales.preview.download)}
         />
         <figcaption>
           <FormattedMessage
diff --git a/src/components/theme/View/ListingView.jsx b/src/components/theme/View/ListingView.jsx
index 6f4eece085..6e6356d3c6 100644
--- a/src/components/theme/View/ListingView.jsx
+++ b/src/components/theme/View/ListingView.jsx
@@ -32,6 +32,7 @@ const ListingView = ({ content }) => (
               size="small"
               alt={item.image_caption ? item.image_caption : item.title}
               src={item.image.scales.thumb.download}
+              loading="lazy"
             />
           )}
         </Segment>
diff --git a/src/components/theme/View/NewsItemView.jsx b/src/components/theme/View/NewsItemView.jsx
index 2ff9cfccf0..3ffa6fe8b7 100644
--- a/src/components/theme/View/NewsItemView.jsx
+++ b/src/components/theme/View/NewsItemView.jsx
@@ -37,6 +37,7 @@ const NewsItemView = ({ content }) => (
             : flattenToAppURL(content.image.scales.mini.download)
         }
         floated="right"
+        loading="lazy"
       />
     )}
     {content.text && (
diff --git a/src/components/theme/View/SummaryView.jsx b/src/components/theme/View/SummaryView.jsx
index 1275c7e977..406d285e12 100644
--- a/src/components/theme/View/SummaryView.jsx
+++ b/src/components/theme/View/SummaryView.jsx
@@ -38,6 +38,7 @@ const SummaryView = ({ content }) => (
                 floated="right"
                 alt={item.image_caption ? item.image_caption : item.title}
                 src={item.image.scales.thumb.download}
+                loading="lazy"
               />
             )}
             {item.description && <p>{item.description}</p>}
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 74b4a9e262..65562557fa 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -19,6 +19,8 @@ exports[`renders an image view component 1`] = `
   >
     <img
       alt="Hello World!"
+      loading="lazy"
+      role="img"
       src="file:///preview.jpg"
     />
     <figcaption>
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index c0832b49fc..5eaafdbabd 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -36,6 +36,7 @@ exports[`TabularView renders a summary view component 1`] = `
           alt="My image caption"
           className="ui right floated image"
           clearing={true}
+          loading="lazy"
           src="file:///preview.jpg"
         />
         <p>
diff --git a/src/config/ImageScales.jsx b/src/config/ImageScales.jsx
new file mode 100644
index 0000000000..0b97a3f960
--- /dev/null
+++ b/src/config/ImageScales.jsx
@@ -0,0 +1,9 @@
+export const imageScales = {
+  large: 768,
+  preview: 400,
+  mini: 200,
+  thumb: 128,
+  tile: 64,
+  icon: 32,
+  listing: 16,
+};
diff --git a/src/config/index.js b/src/config/index.js
index 643b1708a2..fc0dc22f2c 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -30,6 +30,7 @@ import {
 
 import { sentryOptions } from './Sentry';
 import { contentIcons } from './ContentIcons';
+import { imageScales } from './ImageScales';
 
 import applyAddonConfiguration from 'load-volto-addons';
 
@@ -86,7 +87,8 @@ let config = {
     sentryOptions: {
       ...sentryOptions,
     },
-    contentIcons: contentIcons,
+    contentIcons,
+    imageScales,
     appExtras: [],
   },
   widgets: {
@@ -105,7 +107,6 @@ let config = {
     groupBlocksOrder,
     initialBlocks,
   },
-
   addonRoutes: [],
   addonReducers: {},
 };
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
new file mode 100644
index 0000000000..1a276760a0
--- /dev/null
+++ b/src/helpers/Image/Image.js
@@ -0,0 +1,55 @@
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { settings } from '~/config';
+
+/**
+ * Get src-set list from image
+ * @param {object | string} image - Image content object or url
+ * @param {number} maxSize - Maximum size of the image
+ */
+export const getSrcSet = (image, maxSize) => {
+  const SRCSET = settings.imageScales;
+  let srcsetList = [];
+  let maxWidth = maxSize ? SRCSET[maxSize] : 0;
+
+  if (
+    Object.prototype.toString.call(image) === '[object Object]' &&
+    image.scales &&
+    Object.keys(image.scales).length > 0
+  ) {
+    Object.keys(SRCSET).forEach((size) => {
+      if (maxWidth === 0 || SRCSET[size] <= maxWidth) {
+        srcsetList.push(
+          flattenToAppURL(image.scales[size]?.download) +
+            ' ' +
+            SRCSET[size] +
+            'w',
+        );
+      }
+    });
+  }
+
+  if (typeof image === 'string') {
+    let src =
+      image.indexOf('@@images/') >= 0
+        ? image.substring(0, image.indexOf('@@images/'))
+        : image;
+
+    Object.keys(SRCSET).forEach((size) => {
+      if (maxWidth === 0 || SRCSET[size] <= maxWidth) {
+        srcsetList.push(
+          flattenToAppURL(src) +
+            '@@images/image/' +
+            size +
+            ' ' +
+            SRCSET[size] +
+            'w',
+        );
+      }
+    });
+  }
+
+  return {
+    srcSet: srcsetList.length > 0 ? srcsetList.join(', ') : null,
+    sizes: maxSize && srcsetList.length > 0 ? `${SRCSET[maxSize]}px` : null,
+  };
+};
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
new file mode 100644
index 0000000000..d5ebce4d00
--- /dev/null
+++ b/src/helpers/Image/Image.test.js
@@ -0,0 +1,28 @@
+import { getSrcSet } from './Image';
+
+describe('Image', () => {
+  describe('getSrcSet', () => {
+    it('returns srcset from scales', () => {
+      expect(
+        getSrcSet('http://localhost:8080/Plone/photo.png/@@images/image'),
+      ).toEqual({
+        srcSet:
+          '/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w',
+        sizes: null,
+      });
+    });
+
+    it('returns srcset and sizes with minitature set', () => {
+      expect(
+        getSrcSet(
+          'http://localhost:8080/Plone/photo.png/@@images/image',
+          'preview',
+        ),
+      ).toEqual({
+        srcSet:
+          '/photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w',
+        sizes: '400px',
+      });
+    });
+  });
+});
diff --git a/src/helpers/index.js b/src/helpers/index.js
index 7a122bd680..b4bc99e114 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -55,3 +55,5 @@ export {
   applyConfig,
   withServerErrorCode,
 } from '@plone/volto/helpers/Utils/Utils';
+
+export { getSrcSet } from './Image/Image';

From 46f752772c532d0657c3f90e2269d3b0471215af Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Tue, 5 Jan 2021 15:24:24 +0100
Subject: [PATCH 02/45] feat: ImageFromUrl accepts other props for img

---
 src/components/theme/ImageFromUrl/ImageFromUrl.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/theme/ImageFromUrl/ImageFromUrl.jsx b/src/components/theme/ImageFromUrl/ImageFromUrl.jsx
index 458eeaba59..8162537bd5 100644
--- a/src/components/theme/ImageFromUrl/ImageFromUrl.jsx
+++ b/src/components/theme/ImageFromUrl/ImageFromUrl.jsx
@@ -6,7 +6,15 @@ import {
   getSrcSet,
 } from '@plone/volto/helpers';
 
-const ImageFromUrl = ({ image, url, alt = '', className, size, role }) => {
+const ImageFromUrl = ({
+  image,
+  url,
+  alt = '',
+  className,
+  size,
+  role,
+  ...imageProps
+}) => {
   let src = image && image?.scales ? image.download : url;
 
   if (!src) return null;
@@ -26,6 +34,7 @@ const ImageFromUrl = ({ image, url, alt = '', className, size, role }) => {
       loading="lazy"
       className={className}
       {...(isInternal ? getSrcSet(image?.scales ? image : src, size) : {})}
+      {...imageProps}
     />
   );
 };

From 4f295fb1e36d8f5fde1d82591f3518d996449b6e Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Tue, 5 Jan 2021 15:28:10 +0100
Subject: [PATCH 03/45] docs: updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 014059a344..a63cae1800 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### Feature
 
 - Lazy load image in blocks Image and HeroImage @mamico
+- Add ImageFromUrl with srcset and lazy loading using Plone miniatures @nzambello
 
 ### Bugfix
 

From fa9f0bcec272cdf72cdf8444994f7f90c646a02c Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Fri, 15 Jan 2021 11:58:58 +0100
Subject: [PATCH 04/45] refactor: Image component for responsive images

---
 .../manage/Blocks/HeroImageLeft/View.jsx      |   4 +-
 .../__snapshots__/View.test.jsx.snap          |  38 ++++-
 src/components/manage/Blocks/Image/View.jsx   |  19 +--
 .../manage/Blocks/Image/View.test.jsx         |   4 +-
 .../manage/Blocks/LeadImage/View.jsx          |   4 +-
 .../manage/Blocks/LeadImage/View.test.jsx     |  50 +++---
 .../__snapshots__/View.test.jsx.snap          |  38 ++++-
 .../manage/Blocks/Listing/DefaultTemplate.jsx |   5 +-
 src/components/theme/Image/Image.jsx          |  73 +++++++++
 src/components/theme/Image/Image.test.jsx     |  89 +++++++++++
 .../Image/__snapshots__/Image.test.jsx.snap   | 146 ++++++++++++++++++
 .../theme/ImageFromUrl/ImageFromUrl.jsx       |  51 ------
 .../theme/ImageFromUrl/ImageFromUrl.test.jsx  |  28 ----
 .../__snapshots__/ImageFromUrl.test.jsx.snap  |  24 ---
 src/components/theme/View/ImageView.jsx       |   8 +-
 src/components/theme/View/ImageView.test.jsx  |  37 ++++-
 .../__snapshots__/ImageView.test.jsx.snap     |  37 ++++-
 src/helpers/Image/Image.js                    |  86 ++++++-----
 src/helpers/Image/Image.test.js               |  31 ++--
 src/helpers/index.js                          |   2 +-
 theme/themes/pastanaga/extras/blocks.less     |   2 +-
 21 files changed, 528 insertions(+), 248 deletions(-)
 create mode 100644 src/components/theme/Image/Image.jsx
 create mode 100644 src/components/theme/Image/Image.test.jsx
 create mode 100644 src/components/theme/Image/__snapshots__/Image.test.jsx.snap
 delete mode 100644 src/components/theme/ImageFromUrl/ImageFromUrl.jsx
 delete mode 100644 src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx
 delete mode 100644 src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap

diff --git a/src/components/manage/Blocks/HeroImageLeft/View.jsx b/src/components/manage/Blocks/HeroImageLeft/View.jsx
index d728ffadbd..f23251a1a4 100644
--- a/src/components/manage/Blocks/HeroImageLeft/View.jsx
+++ b/src/components/manage/Blocks/HeroImageLeft/View.jsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * View image block class.
@@ -15,7 +15,7 @@ import ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUr
 const View = ({ data }) => (
   <div className="block hero">
     <div className="block-inner-wrapper">
-      {data.url && <ImageFromUrl url={data.url} className="hero-image" />}
+      {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>}
diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 39177ea10b..7afa816ee6 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -7,14 +7,36 @@ exports[`renders a view hero component 1`] = `
   <div
     className="block-inner-wrapper"
   >
-    <img
-      alt=""
-      className="hero-image"
-      loading="lazy"
-      role="img"
-      sizes={null}
-      src="/heroimage.jpg/@@images/image"
-      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"
+    <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"
diff --git a/src/components/manage/Blocks/Image/View.jsx b/src/components/manage/Blocks/Image/View.jsx
index a68fe0573b..2a12435b54 100644
--- a/src/components/manage/Blocks/Image/View.jsx
+++ b/src/components/manage/Blocks/Image/View.jsx
@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import cx from 'classnames';
-import ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 
@@ -31,8 +31,8 @@ const View = ({ data, detached }) => (
       <>
         {(() => {
           const image = (
-            <ImageFromUrl
-              url={data.url}
+            <Image
+              image={data.url}
               alt={data.alt}
               className={cx({
                 'full-width': data.align === 'full',
@@ -40,19 +40,6 @@ const View = ({ data, detached }) => (
                 medium: data.size === 'm',
                 small: data.size === 's',
               })}
-              size={(() => {
-                switch (data.size) {
-                  case 'm':
-                    return 'preview';
-
-                  case 's':
-                    return 'mini';
-
-                  case 'l':
-                  default:
-                    return null;
-                }
-              })()}
             />
           );
           if (data.href) {
diff --git a/src/components/manage/Blocks/Image/View.test.jsx b/src/components/manage/Blocks/Image/View.test.jsx
index 7f8da6a828..839d97ea12 100644
--- a/src/components/manage/Blocks/Image/View.test.jsx
+++ b/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', () => {
diff --git a/src/components/manage/Blocks/LeadImage/View.jsx b/src/components/manage/Blocks/LeadImage/View.jsx
index 7b946173ea..6f86bdcf4c 100644
--- a/src/components/manage/Blocks/LeadImage/View.jsx
+++ b/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 ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * View image block class.
@@ -30,7 +30,7 @@ const View = ({ data, properties }) => (
       <>
         {(() => {
           const image = (
-            <ImageFromUrl
+            <Image
               image={properties.image}
               alt={properties.image_caption}
               className={cx({ 'full-width': data.align === 'full' })}
diff --git a/src/components/manage/Blocks/LeadImage/View.test.jsx b/src/components/manage/Blocks/LeadImage/View.test.jsx
index 5e73bc97af..dd47ce7372 100644
--- a/src/components/manage/Blocks/LeadImage/View.test.jsx
+++ b/src/components/manage/Blocks/LeadImage/View.test.jsx
@@ -8,57 +8,45 @@ test('renders a view image component', () => {
       data={{}}
       properties={{
         image: {
-          'content-type': 'image/jpeg',
-          download:
-            'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
-          filename: 'image.jpg',
-          height: 1280,
+          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.jpeg',
-              height: 21,
+                'http://localhost:8080/Plone/test-images/@@images/image/icon',
               width: 32,
             },
-            large: {
+            tile: {
               download:
-                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
-              height: 512,
-              width: 768,
+                'http://localhost:8080/Plone/test-images/@@images/image/tile',
+              width: 64,
             },
-            listing: {
+            thumb: {
               download:
-                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
-              height: 10,
-              width: 16,
+                'http://localhost:8080/Plone/test-images/@@images/image/thumb',
+              width: 128,
             },
             mini: {
               download:
-                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
-              height: 133,
+                'http://localhost:8080/Plone/test-images/@@images/image/mini',
               width: 200,
             },
             preview: {
               download:
-                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
-              height: 266,
+                'http://localhost:8080/Plone/test-images/@@images/image/preview',
               width: 400,
             },
-            thumb: {
-              download:
-                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
-              height: 85,
-              width: 128,
-            },
-            tile: {
+            large: {
               download:
-                'http://localhost:8080/Plone/test-images/@@images/image.jpeg',
-              height: 42,
-              width: 64,
+                'http://localhost:8080/Plone/test-images/@@images/image/large',
+              width: 768,
             },
           },
-          size: 186918,
-          width: 1920,
         },
       }}
     />,
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index 2aa5fba2bd..902b79d8d7 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -4,14 +4,36 @@ exports[`renders a view image component 1`] = `
 <p
   className="block image align center"
 >
-  <img
-    alt=""
-    className=""
-    loading="lazy"
-    role="img"
-    sizes={null}
-    src="/test-images/@@images/image.jpeg"
-    srcSet="/test-images/@@images/image.jpeg 768w, /test-images/@@images/image.jpeg 400w, /test-images/@@images/image.jpeg 200w, /test-images/@@images/image.jpeg 128w, /test-images/@@images/image.jpeg 64w, /test-images/@@images/image.jpeg 32w, /test-images/@@images/image.jpeg 16w"
+  <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>
 `;
diff --git a/src/components/manage/Blocks/Listing/DefaultTemplate.jsx b/src/components/manage/Blocks/Listing/DefaultTemplate.jsx
index 42cda54615..1be7a17732 100644
--- a/src/components/manage/Blocks/Listing/DefaultTemplate.jsx
+++ b/src/components/manage/Blocks/Listing/DefaultTemplate.jsx
@@ -4,7 +4,7 @@ import { ConditionalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { settings } from '~/config';
 
-import ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
+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';
 
@@ -35,9 +35,8 @@ const DefaultTemplate = ({ items, linkMore, isEditMode }) => {
                 <img src={DefaultImageSVG} alt="" />
               )}
               {item[settings.listingPreviewImageField] && (
-                <ImageFromUrl
+                <Image
                   image={item[settings.listingPreviewImageField]}
-                  size="preview"
                   alt={item.title}
                 />
               )}
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
new file mode 100644
index 0000000000..0aaf2864ba
--- /dev/null
+++ b/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;
diff --git a/src/components/theme/Image/Image.test.jsx b/src/components/theme/Image/Image.test.jsx
new file mode 100644
index 0000000000..1caf865d01
--- /dev/null
+++ b/src/components/theme/Image/Image.test.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import Image from './Image';
+
+const ploneImage = {
+  download: 'http://localhost:8080/Plone/test-images/@@images/image',
+  width: 1920,
+  scales: {
+    icon: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/icon',
+      width: 32,
+    },
+    large: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/large',
+      width: 768,
+    },
+    listing: {
+      download:
+        'http://localhost:8080/Plone/test-images/@@images/image/listing',
+      width: 16,
+    },
+    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,
+    },
+    thumb: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/thumb',
+      width: 128,
+    },
+    tile: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/tile',
+      width: 64,
+    },
+  },
+};
+
+describe('Image', () => {
+  it('renders image with default values and image url', () => {
+    const component = renderer.create(
+      <Image image="http://localhost:8080/Plone/photo.png" />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders image with props and image url', () => {
+    const component = renderer.create(
+      <Image
+        image="http://localhost:8080/Plone/photo.png"
+        alt="Photo"
+        className="photo-image"
+        role="presentation"
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders image with plone image object', () => {
+    const component = renderer.create(
+      <Image
+        image={ploneImage}
+        alt="Photo"
+        className="photo-image"
+        role="presentation"
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders image with external url', () => {
+    const component = renderer.create(
+      <Image
+        image="https://picsum.photos/200/300"
+        alt="External picsum photo"
+      />,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
new file mode 100644
index 0000000000..4aee57a4fd
--- /dev/null
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image renders image with default values and image url 1`] = `
+Array [
+  <picture>
+    <img
+      alt=""
+      loading="lazy"
+      role="img"
+      src="/photo.png/@@images/image/listing"
+      style={
+        Object {
+          "objectFit": "cover",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>,
+  <noscript
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+              <img
+                src=\\"/photo.png/@@images/image/listing\\"
+                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w, /photo.png/@@images/image 1200w\\"
+                alt=\\"\\"
+                className=\\"undefined\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style={{ width: '100%', objectFit: 'cover' }}
+            ",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Image renders image with external url 1`] = `
+Array [
+  <picture>
+    <img
+      alt="External picsum photo"
+      loading="lazy"
+      role="img"
+      src="https://picsum.photos/200/300"
+      style={
+        Object {
+          "objectFit": "cover",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>,
+  <noscript
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+              <img
+                src=\\"https://picsum.photos/200/300\\"
+                undefined
+                alt=\\"External picsum photo\\"
+                className=\\"undefined\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style={{ width: '100%', objectFit: 'cover' }}
+            ",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Image renders image with plone image object 1`] = `
+Array [
+  <picture>
+    <img
+      alt="Photo"
+      className="photo-image"
+      loading="lazy"
+      role="presentation"
+      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=\\"Photo\\"
+                className=\\"photo-image\\"
+                role=\\"presentation\\"
+                loading=\\"lazy\\"
+                style={{ width: '100%', objectFit: 'cover' }}
+            ",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Image renders image with props and image url 1`] = `
+Array [
+  <picture>
+    <source
+      srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w, /photo.png/@@images/image 1200w"
+    />
+    <img
+      alt="Photo"
+      className="photo-image"
+      loading="lazy"
+      role="presentation"
+      src="/photo.png/@@images/image/listing"
+      style={
+        Object {
+          "objectFit": "cover",
+          "width": "100%",
+        }
+      }
+    />
+  </picture>,
+  <noscript
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+              <img
+                src=\\"/photo.png/@@images/image/listing\\"
+                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w, /photo.png/@@images/image 1200w\\"
+                alt=\\"Photo\\"
+                className=\\"photo-image\\"
+                role=\\"presentation\\"
+                loading=\\"lazy\\"
+                style={{ width: '100%', objectFit: 'cover' }}
+            ",
+      }
+    }
+  />,
+]
+`;
diff --git a/src/components/theme/ImageFromUrl/ImageFromUrl.jsx b/src/components/theme/ImageFromUrl/ImageFromUrl.jsx
deleted file mode 100644
index 8162537bd5..0000000000
--- a/src/components/theme/ImageFromUrl/ImageFromUrl.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  isInternalURL,
-  flattenToAppURL,
-  getSrcSet,
-} from '@plone/volto/helpers';
-
-const ImageFromUrl = ({
-  image,
-  url,
-  alt = '',
-  className,
-  size,
-  role,
-  ...imageProps
-}) => {
-  let src = image && image?.scales ? image.download : url;
-
-  if (!src) return null;
-
-  const imageParams = '/@@images/image' + (size ? `/${size}` : '');
-  const isInternal = isInternalURL(src);
-
-  src = isInternal ? flattenToAppURL(src) : src;
-  if (isInternal && src.indexOf('/@@images') === -1)
-    src = `${src}${imageParams}`;
-
-  return (
-    <img
-      alt={alt}
-      role={role ?? 'img'}
-      src={src}
-      loading="lazy"
-      className={className}
-      {...(isInternal ? getSrcSet(image?.scales ? image : src, size) : {})}
-      {...imageProps}
-    />
-  );
-};
-
-ImageFromUrl.propTypes = {
-  image: PropTypes.object,
-  url: PropTypes.string,
-  alt: PropTypes.string,
-  className: PropTypes.string,
-  size: PropTypes.string,
-  role: PropTypes.string,
-};
-
-export default ImageFromUrl;
diff --git a/src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx b/src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx
deleted file mode 100644
index 4fe40e4b39..0000000000
--- a/src/components/theme/ImageFromUrl/ImageFromUrl.test.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import ImageFromUrl from './ImageFromUrl';
-
-describe('ImageFromUrl', () => {
-  it('renders with default values', () => {
-    const component = renderer.create(
-      <ImageFromUrl url="http://localhost:8080/Plone/photo.png" />,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-
-  it('renders with props', () => {
-    const component = renderer.create(
-      <ImageFromUrl
-        url="http://localhost:8080/Plone/photo.png"
-        alt="Photo"
-        className="photo-image"
-        size="preview"
-        role="presentation"
-      />,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-});
diff --git a/src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap b/src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap
deleted file mode 100644
index f00d5790b0..0000000000
--- a/src/components/theme/ImageFromUrl/__snapshots__/ImageFromUrl.test.jsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ImageFromUrl renders with default values 1`] = `
-<img
-  alt=""
-  loading="lazy"
-  role="img"
-  sizes={null}
-  src="/photo.png/@@images/image"
-  srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
-/>
-`;
-
-exports[`ImageFromUrl renders with props 1`] = `
-<img
-  alt="Photo"
-  className="photo-image"
-  loading="lazy"
-  role="presentation"
-  sizes="400px"
-  src="/photo.png/@@images/image/preview"
-  srcSet="/photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
-/>
-`;
diff --git a/src/components/theme/View/ImageView.jsx b/src/components/theme/View/ImageView.jsx
index 4ce474ce03..7225ce4487 100644
--- a/src/components/theme/View/ImageView.jsx
+++ b/src/components/theme/View/ImageView.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Container } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import prettybytes from 'pretty-bytes';
-import ImageFromUrl from '@plone/volto/components/theme/ImageFromUrl/ImageFromUrl';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
@@ -28,11 +28,7 @@ const ImageView = ({ content }) => (
     )}
     {content?.image?.download && (
       <a href={flattenToAppURL(content.image.download)}>
-        <ImageFromUrl
-          image={content.image}
-          size="preview"
-          alt={content.title}
-        />
+        <Image image={content.image} size="preview" alt={content.title} />
         <figcaption>
           <FormattedMessage
             id="Size: {size}"
diff --git a/src/components/theme/View/ImageView.test.jsx b/src/components/theme/View/ImageView.test.jsx
index cb74d9a4b7..cf68546968 100644
--- a/src/components/theme/View/ImageView.test.jsx
+++ b/src/components/theme/View/ImageView.test.jsx
@@ -21,11 +21,44 @@ test('renders an image view component', () => {
           title: 'Hello World!',
           description: 'Hi',
           image: {
+            download: 'http://localhost:8080/Plone/test-images/@@images/image',
             size: 123123,
-            download: 'file:///preview.jpg',
+            width: 1920,
             scales: {
+              icon: {
+                download:
+                  'http://localhost:8080/Plone/test-images/@@images/image/icon',
+                width: 32,
+              },
+              large: {
+                download:
+                  'http://localhost:8080/Plone/test-images/@@images/image/large',
+                width: 768,
+              },
+              listing: {
+                download:
+                  'http://localhost:8080/Plone/test-images/@@images/image/listing',
+                width: 16,
+              },
+              mini: {
+                download:
+                  'http://localhost:8080/Plone/test-images/@@images/image/mini',
+                width: 200,
+              },
               preview: {
-                download: 'file:///preview.jpg',
+                download:
+                  'http://localhost:8080/Plone/test-images/@@images/image/preview',
+                width: 400,
+              },
+              thumb: {
+                download:
+                  'http://localhost:8080/Plone/test-images/@@images/image/thumb',
+                width: 128,
+              },
+              tile: {
+                download:
+                  'http://localhost:8080/Plone/test-images/@@images/image/tile',
+                width: 64,
               },
             },
           },
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 65562557fa..90efef7de9 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -15,13 +15,38 @@ exports[`renders an image view component 1`] = `
     Hi
   </p>
   <a
-    href="file:///preview.jpg"
+    href="/test-images/@@images/image"
   >
-    <img
-      alt="Hello World!"
-      loading="lazy"
-      role="img"
-      src="file:///preview.jpg"
+    <picture>
+      <img
+        alt="Hello World!"
+        loading="lazy"
+        role="img"
+        size="preview"
+        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=\\"Hello World!\\"
+                className=\\"undefined\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style={{ width: '100%', objectFit: 'cover' }}
+            ",
+        }
+      }
     />
     <figcaption>
       Size: 123 kB
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 1a276760a0..3d9d6fcfbd 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -1,55 +1,61 @@
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 import { settings } from '~/config';
 
 /**
  * Get src-set list from image
  * @param {object | string} image - Image content object or url
- * @param {number} maxSize - Maximum size of the image
  */
-export const getSrcSet = (image, maxSize) => {
-  const SRCSET = settings.imageScales;
-  let srcsetList = [];
-  let maxWidth = maxSize ? SRCSET[maxSize] : 0;
+export const getImageAttributes = (image) => {
+  const imageScales = settings.imageScales;
+  const minSize = Object.keys(imageScales).reduce((minSize, scale) => {
+    if (!minSize || imageScales[scale] < imageScales[minSize]) {
+      return scale;
+    }
 
-  if (
+    return minSize;
+  }, null);
+
+  let attrs = {};
+  let imageType =
     Object.prototype.toString.call(image) === '[object Object]' &&
     image.scales &&
     Object.keys(image.scales).length > 0
-  ) {
-    Object.keys(SRCSET).forEach((size) => {
-      if (maxWidth === 0 || SRCSET[size] <= maxWidth) {
-        srcsetList.push(
-          flattenToAppURL(image.scales[size]?.download) +
-            ' ' +
-            SRCSET[size] +
-            'w',
-        );
-      }
-    });
-  }
+      ? 'imageObject'
+      : typeof image === 'string' && isInternalURL(image)
+      ? 'internalUrl'
+      : 'external';
+
+  switch (imageType) {
+    // Scales object from Plone restapi
+    // ideal use of Plone images
+    case 'imageObject':
+      let sortedScales = Object.values(image.scales).sort(
+        (a, b) => a.width - b.width,
+      );
+      attrs.src = sortedScales[0].download;
+      attrs.srcSet = sortedScales
+        .map((scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`)
+        .concat(`${flattenToAppURL(image.download)} ${image.width}w`);
+      break;
 
-  if (typeof image === 'string') {
-    let src =
-      image.indexOf('@@images/') >= 0
-        ? image.substring(0, image.indexOf('@@images/'))
-        : image;
+    // Internal URL
+    case 'internalUrl':
+      let baseUrl = `${flattenToAppURL(image.split('/@@images')[0])}${
+        image.endsWith('/') ? '' : '/'
+      }@@images/image`;
+      attrs.src = `${baseUrl}/${minSize}`;
+      attrs.srcSet = Object.keys(imageScales)
+        .reduce((srcSet, scale) => {
+          return [...srcSet, `${baseUrl}/${scale} ${imageScales[scale]}w`];
+        }, [])
+        .concat(`${baseUrl} 1200w`); // expect that is for desktop screens, I don't have actual size
+      break;
 
-    Object.keys(SRCSET).forEach((size) => {
-      if (maxWidth === 0 || SRCSET[size] <= maxWidth) {
-        srcsetList.push(
-          flattenToAppURL(src) +
-            '@@images/image/' +
-            size +
-            ' ' +
-            SRCSET[size] +
-            'w',
-        );
-      }
-    });
+    // External URL or other element
+    default:
+      attrs.src = typeof image === 'string' ? image : null;
+      break;
   }
 
-  return {
-    srcSet: srcsetList.length > 0 ? srcsetList.join(', ') : null,
-    sizes: maxSize && srcsetList.length > 0 ? `${SRCSET[maxSize]}px` : null,
-  };
+  return attrs;
 };
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index d5ebce4d00..e918be7a45 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -1,27 +1,24 @@
-import { getSrcSet } from './Image';
+import { getImageAttributes } from './Image';
 
 describe('Image', () => {
   describe('getSrcSet', () => {
-    it('returns srcset from scales', () => {
+    it('returns srcset from url', () => {
       expect(
-        getSrcSet('http://localhost:8080/Plone/photo.png/@@images/image'),
-      ).toEqual({
-        srcSet:
-          '/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w',
-        sizes: null,
-      });
-    });
-
-    it('returns srcset and sizes with minitature set', () => {
-      expect(
-        getSrcSet(
+        getImageAttributes(
           'http://localhost:8080/Plone/photo.png/@@images/image',
-          'preview',
         ),
       ).toEqual({
-        srcSet:
-          '/photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w',
-        sizes: '400px',
+        src: '/photo.png/@@images/image/listing',
+        srcSet: [
+          '/photo.png/@@images/image/large 768w',
+          '/photo.png/@@images/image/preview 400w',
+          '/photo.png/@@images/image/mini 200w',
+          '/photo.png/@@images/image/thumb 128w',
+          '/photo.png/@@images/image/tile 64w',
+          '/photo.png/@@images/image/icon 32w',
+          '/photo.png/@@images/image/listing 16w',
+          '/photo.png/@@images/image 1200w',
+        ],
       });
     });
   });
diff --git a/src/helpers/index.js b/src/helpers/index.js
index b4bc99e114..943f00ee83 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -56,4 +56,4 @@ export {
   withServerErrorCode,
 } from '@plone/volto/helpers/Utils/Utils';
 
-export { getSrcSet } from './Image/Image';
+export { getImageAttributes } from './Image/Image';
diff --git a/theme/themes/pastanaga/extras/blocks.less b/theme/themes/pastanaga/extras/blocks.less
index 6d104d1622..79c5936b05 100644
--- a/theme/themes/pastanaga/extras/blocks.less
+++ b/theme/themes/pastanaga/extras/blocks.less
@@ -739,7 +739,7 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
   margin-bottom: 20px;
 
   img {
-    width: 15%;
+    max-width: 15%;
     margin-right: 20px;
 
     @media only screen and (max-width: (@largestMobileScreen)) {

From 2c651dc9233f47cdeef0e552482c479ba701fd62 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Fri, 15 Jan 2021 12:54:13 +0100
Subject: [PATCH 05/45] test: updated cypress image block test

---
 cypress/integration/blocks-image.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/blocks-image.js b/cypress/integration/blocks-image.js
index 96539606b2..5c185d7074 100644
--- a/cypress/integration/blocks-image.js
+++ b/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', () => {

From fa0df06313404eab083f06b7d237e94fd6dcbd62 Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Tue, 19 Jan 2021 11:07:18 +0100
Subject: [PATCH 06/45] docs: Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a56379b8ed..f28ef16758 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -61,7 +61,7 @@
 ### Feature
 
 - Lazy load image in blocks Image and HeroImage @mamico
-- Add ImageFromUrl with srcset and lazy loading using Plone miniatures @nzambello
+- Add Image with srcset and lazy loading using Plone scales @nzambello
 
 ### Bugfix
 

From a3a8df9e3471eac0762d82865fe88e739ef50696 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Wed, 20 Jan 2021 10:28:13 +0100
Subject: [PATCH 07/45] fix: hero block image styles

---
 theme/themes/pastanaga/extras/blocks.less | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/theme/themes/pastanaga/extras/blocks.less b/theme/themes/pastanaga/extras/blocks.less
index 7c3bd0fbee..88a41158f1 100644
--- a/theme/themes/pastanaga/extras/blocks.less
+++ b/theme/themes/pastanaga/extras/blocks.less
@@ -392,6 +392,14 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     max-height: 400px;
   }
 
+  picture {
+    max-width: 50%;
+
+    img.hero-image {
+      max-width: none;
+    }
+  }
+
   .image-add {
     min-width: 50%;
   }

From 1cfa340af14c6a0baff518fe59b56496bb1ee330 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Thu, 21 Jan 2021 15:32:58 +0100
Subject: [PATCH 08/45] fix: hero image mobile

---
 theme/themes/pastanaga/extras/blocks.less | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/theme/themes/pastanaga/extras/blocks.less b/theme/themes/pastanaga/extras/blocks.less
index 88a41158f1..5a4b02d6b3 100644
--- a/theme/themes/pastanaga/extras/blocks.less
+++ b/theme/themes/pastanaga/extras/blocks.less
@@ -393,11 +393,16 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
   }
 
   picture {
+    width: 100%;
     max-width: 50%;
 
     img.hero-image {
       max-width: none;
     }
+
+    @media only screen and (max-width: (@largestMobileScreen)) {
+      max-width: 100%;
+    }
   }
 
   .image-add {
@@ -412,6 +417,10 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     position: relative;
     z-index: 1;
     display: flex;
+
+    @media only screen and (max-width: (@largestMobileScreen)) {
+      flex-wrap: wrap;
+    }
   }
 
   .title-editor,

From 86b7ade9e95476370f90db01f89cf4af5e1960fd Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Thu, 22 Apr 2021 16:20:49 +0200
Subject: [PATCH 09/45] fix: Image noscript styles

---
 .../Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap | 2 +-
 .../Blocks/LeadImage/__snapshots__/View.test.jsx.snap     | 2 +-
 src/components/theme/Image/Image.jsx                      | 2 +-
 .../theme/Image/__snapshots__/Image.test.jsx.snap         | 8 ++++----
 .../theme/View/__snapshots__/ImageView.test.jsx.snap      | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 7afa816ee6..e782102957 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -33,7 +33,7 @@ exports[`renders a view hero component 1`] = `
                 className=\\"hero-image\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style=\\"width: 100%; object-fit: cover;\\"
             ",
         }
       }
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index 902b79d8d7..e6654037ea 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -30,7 +30,7 @@ exports[`renders a view image component 1`] = `
                 className=\\"\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style=\\"width: 100%; object-fit: cover;\\"
             ",
       }
     }
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 0aaf2864ba..e093cb4c5c 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -54,7 +54,7 @@ const Image = ({
                 className="${className}"
                 role="${role}"
                 loading="lazy"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style="width: 100%; object-fit: cover;"
             `,
           }}
         />
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index 4aee57a4fd..ff843860a4 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -27,7 +27,7 @@ Array [
                 className=\\"undefined\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style=\\"width: 100%; object-fit: cover;\\"
             ",
       }
     }
@@ -62,7 +62,7 @@ Array [
                 className=\\"undefined\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style=\\"width: 100%; object-fit: cover;\\"
             ",
       }
     }
@@ -98,7 +98,7 @@ Array [
                 className=\\"photo-image\\"
                 role=\\"presentation\\"
                 loading=\\"lazy\\"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style=\\"width: 100%; object-fit: cover;\\"
             ",
       }
     }
@@ -137,7 +137,7 @@ Array [
                 className=\\"photo-image\\"
                 role=\\"presentation\\"
                 loading=\\"lazy\\"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style=\\"width: 100%; object-fit: cover;\\"
             ",
       }
     }
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 90efef7de9..ee435c02b7 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -43,7 +43,7 @@ exports[`renders an image view component 1`] = `
                 className=\\"undefined\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
-                style={{ width: '100%', objectFit: 'cover' }}
+                style=\\"width: 100%; object-fit: cover;\\"
             ",
         }
       }

From 542b86f849cfd68b48c8b95fdc15fe6d474dba6c Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Tue, 27 Apr 2021 14:54:46 +0200
Subject: [PATCH 10/45] feat: add maxSize and useOriginal props to Image

---
 .../__snapshots__/View.test.jsx.snap          |  2 +-
 .../__snapshots__/View.test.jsx.snap          |  2 +-
 src/components/theme/Image/Image.jsx          | 11 +++++-
 .../Image/__snapshots__/Image.test.jsx.snap   |  8 ++--
 .../__snapshots__/ImageView.test.jsx.snap     |  2 +-
 src/helpers/Image/Image.js                    | 38 +++++++++++++------
 src/helpers/Image/Image.test.js               | 20 +++++-----
 7 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index e782102957..99701eb933 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -28,7 +28,7 @@ exports[`renders a view hero component 1`] = `
           "__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\\"
+                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=\\"\\"
                 className=\\"hero-image\\"
                 role=\\"img\\"
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index e6654037ea..ae88b4de66 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -25,7 +25,7 @@ exports[`renders a view image component 1`] = `
         "__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\\"
+                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=\\"\\"
                 className=\\"\\"
                 role=\\"img\\"
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index e093cb4c5c..3ea3e896c5 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -8,7 +8,9 @@ import { getImageAttributes } from '@plone/volto/helpers';
  * @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
+ * @param {boolean} critical - whether to lazy load the image
+ * @param {number} maxSize - maximum size to render
+ * @param {boolean} useOriginal - whether to render original size
  */
 const Image = ({
   image,
@@ -16,9 +18,11 @@ const Image = ({
   className,
   role = 'img',
   critical = false,
+  maxSize,
+  useOriginal = false,
   ...imageProps
 }) => {
-  const { src, srcSet } = getImageAttributes(image);
+  const { src, srcSet } = getImageAttributes(image, { maxSize, useOriginal });
   const [isClient, setIsClient] = useState(false);
   const [srcset, setSrcset] = useState(
     critical && srcSet ? srcSet.join(', ') : null,
@@ -68,6 +72,9 @@ Image.propTypes = {
   alt: PropTypes.string,
   className: PropTypes.string,
   role: PropTypes.string,
+  critical: PropTypes.bool,
+  maxSize: PropTypes.number,
+  useOriginal: PropTypes.bool,
 };
 
 export default Image;
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index ff843860a4..ee4ab2d8da 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -22,7 +22,7 @@ Array [
         "__html": "
               <img
                 src=\\"/photo.png/@@images/image/listing\\"
-                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w, /photo.png/@@images/image 1200w\\"
+                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w\\"
                 alt=\\"\\"
                 className=\\"undefined\\"
                 role=\\"img\\"
@@ -93,7 +93,7 @@ Array [
         "__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\\"
+                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=\\"Photo\\"
                 className=\\"photo-image\\"
                 role=\\"presentation\\"
@@ -110,7 +110,7 @@ exports[`Image renders image with props and image url 1`] = `
 Array [
   <picture>
     <source
-      srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w, /photo.png/@@images/image 1200w"
+      srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
     />
     <img
       alt="Photo"
@@ -132,7 +132,7 @@ Array [
         "__html": "
               <img
                 src=\\"/photo.png/@@images/image/listing\\"
-                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w, /photo.png/@@images/image 1200w\\"
+                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w\\"
                 alt=\\"Photo\\"
                 className=\\"photo-image\\"
                 role=\\"presentation\\"
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index ee435c02b7..1d324babc3 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -38,7 +38,7 @@ exports[`renders an image view component 1`] = `
           "__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\\"
+                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=\\"Hello World!\\"
                 className=\\"undefined\\"
                 role=\\"img\\"
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index e0a5490d34..e0f7539642 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -4,8 +4,12 @@ import config from '@plone/volto/registry';
 /**
  * Get src-set list from image
  * @param {object | string} image - Image content object or url
+ * @param {object} options - { maxSize [number]: maximum size to render, useOriginal [boolean]: whether to render original img }
  */
-export const getImageAttributes = (image) => {
+export const getImageAttributes = (
+  image,
+  { maxSize = 10000, useOriginal = true } = {},
+) => {
   const imageScales = config.settings.imageScales;
   const minSize = Object.keys(imageScales).reduce((minSize, scale) => {
     if (!minSize || imageScales[scale] < imageScales[minSize]) {
@@ -29,13 +33,23 @@ export const getImageAttributes = (image) => {
     // Scales object from Plone restapi
     // ideal use of Plone images
     case 'imageObject':
-      let sortedScales = Object.values(image.scales).sort(
-        (a, b) => a.width - b.width,
-      );
+      let sortedScales = Object.values(image.scales)
+        .sort((a, b) => {
+          if (a.width > b.width) return 1;
+          else if (a.width < b.width) return -1;
+          else return 0;
+        })
+        .filter((scale) => scale.width <= maxSize)
+        .filter((scale) => scale.width < image.width); // avoid duplicates if image is small and original is smaller than scale
       attrs.src = sortedScales[0].download;
-      attrs.srcSet = sortedScales
-        .map((scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`)
-        .concat(`${flattenToAppURL(image.download)} ${image.width}w`);
+      attrs.srcSet = sortedScales.map(
+        (scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`,
+      );
+
+      if (useOriginal)
+        attrs.srcSet = attrs.srcSet.concat(
+          `${flattenToAppURL(image.download)} ${image.width}w`,
+        );
       break;
 
     // Internal URL
@@ -44,11 +58,11 @@ export const getImageAttributes = (image) => {
         image.endsWith('/') ? '' : '/'
       }@@images/image`;
       attrs.src = `${baseUrl}/${minSize}`;
-      attrs.srcSet = Object.keys(imageScales)
-        .reduce((srcSet, scale) => {
-          return [...srcSet, `${baseUrl}/${scale} ${imageScales[scale]}w`];
-        }, [])
-        .concat(`${baseUrl} 1200w`); // expect that is for desktop screens, I don't have actual size
+      attrs.srcSet = Object.keys(imageScales).reduce((srcSet, scale) => {
+        return [...srcSet, `${baseUrl}/${scale} ${imageScales[scale]}w`];
+      }, []);
+
+      if (useOriginal) attrs.srcSet = attrs.srcSet.concat(`${baseUrl} 1200w`); // expect that is for desktop screens, I don't have actual size
       break;
 
     // External URL or other element
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index 6049f983ed..c239caac21 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -1,18 +1,18 @@
 import { getImageAttributes } from './Image';
 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', () => {
   describe('getSrcSet', () => {
+    config.settings.imageScales = {
+      large: 768,
+      preview: 400,
+      mini: 200,
+      thumb: 128,
+      tile: 64,
+      icon: 32,
+      listing: 16,
+    };
+
     it('returns srcset from url', () => {
       expect(
         getImageAttributes(

From 4da4fb07034d6457990f94d719f5244841225e6e Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Tue, 27 Apr 2021 15:00:27 +0200
Subject: [PATCH 11/45] docs: add Image ref+

---
 docs/source/developer-guidelines/images.md | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 docs/source/developer-guidelines/images.md

diff --git a/docs/source/developer-guidelines/images.md b/docs/source/developer-guidelines/images.md
new file mode 100644
index 0000000000..65bf68cf99
--- /dev/null
+++ b/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.

From 2bf73d992a55ce8e3f2c82e0b09e6f6fe8d6b0fe Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Tue, 27 Apr 2021 15:30:37 +0200
Subject: [PATCH 12/45] test: update Image tests

---
 src/components/theme/Image/Image.test.jsx     | 28 +++++++
 .../Image/__snapshots__/Image.test.jsx.snap   | 75 +++++++++++++++++
 src/helpers/Image/Image.js                    |  8 +-
 src/helpers/Image/Image.test.js               | 82 ++++++++++++++++++-
 4 files changed, 188 insertions(+), 5 deletions(-)

diff --git a/src/components/theme/Image/Image.test.jsx b/src/components/theme/Image/Image.test.jsx
index 0e329a2891..d4b63e3151 100644
--- a/src/components/theme/Image/Image.test.jsx
+++ b/src/components/theme/Image/Image.test.jsx
@@ -97,4 +97,32 @@ describe('Image', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders image with plone image object and opt props', () => {
+    const component = renderer.create(
+      <Image
+        image={ploneImage}
+        alt="Photo"
+        className="photo-image"
+        role="presentation"
+        maxSize={200}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders image with plone image object and original', () => {
+    const component = renderer.create(
+      <Image
+        image={ploneImage}
+        alt="Photo"
+        className="photo-image"
+        role="presentation"
+        useOriginal
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index ee4ab2d8da..5f0763c88f 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -106,6 +106,81 @@ Array [
 ]
 `;
 
+exports[`Image renders image with plone image object and opt props 1`] = `
+Array [
+  <picture>
+    <img
+      alt="Photo"
+      className="photo-image"
+      loading="lazy"
+      role="presentation"
+      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\\"
+                alt=\\"Photo\\"
+                className=\\"photo-image\\"
+                role=\\"presentation\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Image renders image with plone image object and original 1`] = `
+Array [
+  <picture>
+    <source
+      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"
+    />
+    <img
+      alt="Photo"
+      className="photo-image"
+      loading="lazy"
+      role="presentation"
+      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=\\"Photo\\"
+                className=\\"photo-image\\"
+                role=\\"presentation\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+      }
+    }
+  />,
+]
+`;
+
 exports[`Image renders image with props and image url 1`] = `
 Array [
   <picture>
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index e0f7539642..41758ade81 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -8,7 +8,7 @@ import config from '@plone/volto/registry';
  */
 export const getImageAttributes = (
   image,
-  { maxSize = 10000, useOriginal = true } = {},
+  { maxSize = 10000, useOriginal = false } = {},
 ) => {
   const imageScales = config.settings.imageScales;
   const minSize = Object.keys(imageScales).reduce((minSize, scale) => {
@@ -34,13 +34,13 @@ export const getImageAttributes = (
     // ideal use of Plone images
     case 'imageObject':
       let sortedScales = Object.values(image.scales)
+        .filter((scale) => scale.width <= maxSize)
+        .filter((scale) => scale.width < image.width) // avoid duplicates if image is small and original is smaller than scale
         .sort((a, b) => {
           if (a.width > b.width) return 1;
           else if (a.width < b.width) return -1;
           else return 0;
-        })
-        .filter((scale) => scale.width <= maxSize)
-        .filter((scale) => scale.width < image.width); // avoid duplicates if image is small and original is smaller than scale
+        });
       attrs.src = sortedScales[0].download;
       attrs.srcSet = sortedScales.map(
         (scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`,
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index c239caac21..28a42997c4 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -1,6 +1,43 @@
 import { getImageAttributes } from './Image';
 import config from '@plone/volto/registry';
 
+const ploneImage = {
+  download: 'http://localhost:8080/Plone/test-images/@@images/image',
+  width: 1920,
+  scales: {
+    icon: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/icon',
+      width: 32,
+    },
+    large: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/large',
+      width: 768,
+    },
+    listing: {
+      download:
+        'http://localhost:8080/Plone/test-images/@@images/image/listing',
+      width: 16,
+    },
+    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,
+    },
+    thumb: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/thumb',
+      width: 128,
+    },
+    tile: {
+      download: 'http://localhost:8080/Plone/test-images/@@images/image/tile',
+      width: 64,
+    },
+  },
+};
+
 describe('Image', () => {
   describe('getSrcSet', () => {
     config.settings.imageScales = {
@@ -28,7 +65,50 @@ describe('Image', () => {
           '/photo.png/@@images/image/tile 64w',
           '/photo.png/@@images/image/icon 32w',
           '/photo.png/@@images/image/listing 16w',
-          '/photo.png/@@images/image 1200w',
+        ],
+      });
+    });
+
+    it('returns srcset from object', () => {
+      expect(getImageAttributes(ploneImage)).toEqual({
+        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',
+        ],
+      });
+    });
+
+    it('returns srcset from object with maxSize', () => {
+      expect(getImageAttributes(ploneImage, { maxSize: 200 })).toEqual({
+        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',
+        ],
+      });
+    });
+
+    it('returns srcset from url with original included', () => {
+      expect(getImageAttributes(ploneImage, { useOriginal: true })).toEqual({
+        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',
         ],
       });
     });

From c168e48b88241e41c3bb09ab612b0a2a06ce739b Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Tue, 20 Jul 2021 09:57:26 +0200
Subject: [PATCH 13/45] fix: image noscript className

---
 src/components/theme/Image/Image.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 3ea3e896c5..c029697d59 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -55,7 +55,7 @@ const Image = ({
                 src="${src}"
                 ${srcSet?.length && `srcset="${srcSet.join(', ')}"`}
                 alt="${alt}"
-                className="${className}"
+                class="${className}"
                 role="${role}"
                 loading="lazy"
                 style="width: 100%; object-fit: cover;"

From e9a030e28f618e5461a753238fc0b926c2cef7ad Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Mon, 30 Aug 2021 10:34:43 +0200
Subject: [PATCH 14/45] test: update snapshot, fix cypress objectBrowser img,
 fix eslint check

---
 cypress/tests/core/objectBrowser.js                  |  4 ++--
 .../HeroImageLeft/__snapshots__/View.test.jsx.snap   |  2 +-
 .../LeadImage/__snapshots__/View.test.jsx.snap       |  2 +-
 src/components/theme/Image/Image.jsx                 |  5 +++--
 .../theme/Image/__snapshots__/Image.test.jsx.snap    | 12 ++++++------
 .../theme/View/__snapshots__/ImageView.test.jsx.snap |  2 +-
 6 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/cypress/tests/core/objectBrowser.js b/cypress/tests/core/objectBrowser.js
index 58a7b0c444..f39bc846b1 100644
--- a/cypress/tests/core/objectBrowser.js
+++ b/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/listing');
   });
 
   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/listing');
   });
 
   it('As editor I get focus on search box in sidebar when clicking on lens icon', () => {
diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 99701eb933..6519e86ea3 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -30,7 +30,7 @@ exports[`renders a view hero component 1`] = `
                 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=\\"\\"
-                className=\\"hero-image\\"
+                class=\\"hero-image\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index ae88b4de66..1c7162159c 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -27,7 +27,7 @@ exports[`renders a view image component 1`] = `
                 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=\\"\\"
-                className=\\"\\"
+                class=\\"\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index c029697d59..7cff885d87 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -27,11 +27,12 @@ const Image = ({
   const [srcset, setSrcset] = useState(
     critical && srcSet ? srcSet.join(', ') : null,
   );
+  const hasSrcSet = srcset?.length;
 
   useEffect(() => {
     setIsClient(true);
     if (!srcset && srcSet?.length > 0) setSrcset(srcSet.join(', '));
-  }, [srcSet, srcSet?.length, srcset]);
+  }, [srcSet, hasSrcSet, srcset]);
 
   return (
     <>
@@ -55,7 +56,7 @@ const Image = ({
                 src="${src}"
                 ${srcSet?.length && `srcset="${srcSet.join(', ')}"`}
                 alt="${alt}"
-                class="${className}"
+                class="${className || ''}"
                 role="${role}"
                 loading="lazy"
                 style="width: 100%; object-fit: cover;"
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index 5f0763c88f..d338563bc9 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -24,7 +24,7 @@ Array [
                 src=\\"/photo.png/@@images/image/listing\\"
                 srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w\\"
                 alt=\\"\\"
-                className=\\"undefined\\"
+                class=\\"\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
@@ -59,7 +59,7 @@ Array [
                 src=\\"https://picsum.photos/200/300\\"
                 undefined
                 alt=\\"External picsum photo\\"
-                className=\\"undefined\\"
+                class=\\"\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
@@ -95,7 +95,7 @@ Array [
                 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=\\"Photo\\"
-                className=\\"photo-image\\"
+                class=\\"photo-image\\"
                 role=\\"presentation\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
@@ -131,7 +131,7 @@ Array [
                 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\\"
                 alt=\\"Photo\\"
-                className=\\"photo-image\\"
+                class=\\"photo-image\\"
                 role=\\"presentation\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
@@ -170,7 +170,7 @@ Array [
                 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=\\"Photo\\"
-                className=\\"photo-image\\"
+                class=\\"photo-image\\"
                 role=\\"presentation\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
@@ -209,7 +209,7 @@ Array [
                 src=\\"/photo.png/@@images/image/listing\\"
                 srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w\\"
                 alt=\\"Photo\\"
-                className=\\"photo-image\\"
+                class=\\"photo-image\\"
                 role=\\"presentation\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 1d324babc3..8d1932a2e8 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -40,7 +40,7 @@ exports[`renders an image view component 1`] = `
                 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=\\"Hello World!\\"
-                className=\\"undefined\\"
+                class=\\"\\"
                 role=\\"img\\"
                 loading=\\"lazy\\"
                 style=\\"width: 100%; object-fit: cover;\\"

From a786b98fff80ccd4097af3e0880c570dadeb2446 Mon Sep 17 00:00:00 2001
From: Nicola Zambello <nzambello@protonmail.com>
Date: Mon, 30 Aug 2021 17:50:52 +0200
Subject: [PATCH 15/45] test: fix cypress test for new image component

---
 cypress/tests/core/blocks-image.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/tests/core/blocks-image.js b/cypress/tests/core/blocks-image.js
index 4b71b8e6a8..840bf8e00a 100644
--- a/cypress/tests/core/blocks-image.js
+++ b/cypress/tests/core/blocks-image.js
@@ -107,13 +107,13 @@ describe('Blocks Tests', () => {
       subjectType: 'input',
       encoding: 'utf8',
     });
-    cy.waitForResourceToLoad('image.png/@@images/image');
+    cy.waitForResourceToLoad('image.png/@@images/image/listing');
     cy.get('#toolbar-save').click();
 
     // 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');
 
     cy.get('.block img')
       .should('be.visible')

From 5bd771d8e6277d3ea2936fd31dc6c58b3cc79a6b Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Wed, 27 Oct 2021 11:15:12 +0200
Subject: [PATCH 16/45] chore: update image scales from plone.volto sizes

---
 src/config/ImageScales.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/config/ImageScales.jsx b/src/config/ImageScales.jsx
index 0b97a3f960..1b483f305d 100644
--- a/src/config/ImageScales.jsx
+++ b/src/config/ImageScales.jsx
@@ -1,9 +1,12 @@
 export const imageScales = {
-  large: 768,
+  huge: 1600,
+  great: 1200,
+  larger: 1000,
+  large: 800,
+  teaser: 600,
   preview: 400,
   mini: 200,
   thumb: 128,
   tile: 64,
   icon: 32,
-  listing: 16,
 };

From a748813758f383b675192b32c10ac4e1fb6135b9 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Wed, 27 Oct 2021 11:25:41 +0200
Subject: [PATCH 17/45] feat: add srcset to image only when visible and
 placeholder loaded to get actual image size

---
 src/components/theme/Image/Image.jsx          | 47 ++++++++++++++++---
 .../Image/__snapshots__/Image.test.jsx.snap   |  6 ---
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 7cff885d87..663658d46f 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { getImageAttributes } from '@plone/volto/helpers';
 
@@ -23,21 +23,46 @@ const Image = ({
   ...imageProps
 }) => {
   const { src, srcSet } = getImageAttributes(image, { maxSize, useOriginal });
-  const [isClient, setIsClient] = useState(false);
+  const imageRef = useRef();
   const [srcset, setSrcset] = useState(
     critical && srcSet ? srcSet.join(', ') : null,
   );
   const hasSrcSet = srcset?.length;
+  const imageHasLoaded = imageRef?.current?.complete;
 
   useEffect(() => {
-    setIsClient(true);
-    if (!srcset && srcSet?.length > 0) setSrcset(srcSet.join(', '));
-  }, [srcSet, hasSrcSet, srcset]);
+    if ('IntersectionObserver' in window) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (
+            entries[0].isIntersecting === true &&
+            imageHasLoaded &&
+            !srcset &&
+            srcSet?.length > 0
+          ) {
+            setTimeout(() => {
+              setSrcset(
+                srcSet
+                  .filter(
+                    (s) =>
+                      parseInt(s.split(' ')[1].replace('w', ''), 10) <=
+                      imageRef.current.width,
+                  )
+                  .join(', '),
+              );
+            }, 600);
+          }
+        },
+        { threshold: [0] },
+      );
+      observer.observe(imageRef.current);
+    }
+  }, [imageHasLoaded, srcSet, srcset]);
 
   return (
     <>
       <picture>
-        {srcset && (isClient || critical) && <source srcSet={srcset} />}
+        {hasSrcSet && <source srcSet={srcset} />}
         <img
           src={src}
           alt={alt}
@@ -46,6 +71,7 @@ const Image = ({
           loading="lazy"
           style={{ width: '100%', objectFit: 'cover' }}
           {...imageProps}
+          ref={imageRef}
         />
       </picture>
       {!critical && (
@@ -69,7 +95,7 @@ const Image = ({
 };
 
 Image.propTypes = {
-  image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
   alt: PropTypes.string,
   className: PropTypes.string,
   role: PropTypes.string,
@@ -78,4 +104,11 @@ Image.propTypes = {
   useOriginal: PropTypes.bool,
 };
 
+Image.defaultProps = {
+  alt: '',
+  role: 'img',
+  critical: false,
+  useOriginal: false,
+};
+
 export default Image;
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index d338563bc9..f0d8e564e6 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -145,9 +145,6 @@ Array [
 exports[`Image renders image with plone image object and original 1`] = `
 Array [
   <picture>
-    <source
-      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"
-    />
     <img
       alt="Photo"
       className="photo-image"
@@ -184,9 +181,6 @@ Array [
 exports[`Image renders image with props and image url 1`] = `
 Array [
   <picture>
-    <source
-      srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
-    />
     <img
       alt="Photo"
       className="photo-image"

From 1cb2b46d358fd56b7da9c7bd4e10a3221504e285 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Wed, 27 Oct 2021 11:49:32 +0200
Subject: [PATCH 18/45] test: update scales in cy tests

---
 cypress/tests/core/blocks-image.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/tests/core/blocks-image.js b/cypress/tests/core/blocks-image.js
index 840bf8e00a..fdc0b8a7a5 100644
--- a/cypress/tests/core/blocks-image.js
+++ b/cypress/tests/core/blocks-image.js
@@ -107,13 +107,13 @@ describe('Blocks Tests', () => {
       subjectType: 'input',
       encoding: 'utf8',
     });
-    cy.waitForResourceToLoad('image.png/@@images/image/listing');
+    cy.waitForResourceToLoad('image.png/@@images/image');
     cy.get('#toolbar-save').click();
 
     // 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/listing');
+      .and('eq', '/my-page/image.png/@@images/image/icon');
 
     cy.get('.block img')
       .should('be.visible')

From e0ee9e55cccad6a787ee4e15b29b5290729b14f3 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Wed, 27 Oct 2021 12:38:53 +0200
Subject: [PATCH 19/45] test: update scales in cy tests

---
 cypress/tests/core/objectBrowser.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/tests/core/objectBrowser.js b/cypress/tests/core/objectBrowser.js
index f39bc846b1..6c9b78558d 100644
--- a/cypress/tests/core/objectBrowser.js
+++ b/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/listing');
+      .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/listing');
+      .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', () => {

From 1fc051bca19d439b83fd15e2d69579c83d585886 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Fri, 19 Nov 2021 10:24:47 +0100
Subject: [PATCH 20/45] fix: handle svg images whith stranger widht height
 determined by plone

---
 src/helpers/Image/Image.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 41758ade81..a21959c20d 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -41,12 +41,12 @@ export const getImageAttributes = (
           else if (a.width < b.width) return -1;
           else return 0;
         });
-      attrs.src = sortedScales[0].download;
+      attrs.src = sortedScales[0]?.download ?? image.download;
       attrs.srcSet = sortedScales.map(
         (scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`,
       );
 
-      if (useOriginal)
+      if (useOriginal || sortedScales?.length === 0)
         attrs.srcSet = attrs.srcSet.concat(
           `${flattenToAppURL(image.download)} ${image.width}w`,
         );

From 8f89c41509e278967069f2a70c2b152888a7d07a Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Fri, 19 Nov 2021 12:11:56 +0100
Subject: [PATCH 21/45] feat: add image layout options, fix loading async

---
 src/components/theme/Image/Image.jsx    | 77 ++++++++++++++++++-------
 src/helpers/Image/Image.js              | 31 +++++++---
 theme/themes/pastanaga/extras/main.less | 32 ++++++++++
 3 files changed, 109 insertions(+), 31 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 663658d46f..9950c6b110 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -1,12 +1,16 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef } 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} imageField - (default: image) image field for scales URL
  * @param {string} alt - Alternative text for image
  * @param {string} className - CSS class attribute
+ * @param {string} containerClassName - CSS class attribute for picture element
+ * @param {string} floated - float left or right
+ * @param {string} size - actual width: thumb, small, medium or large
  * @param {string} role - img role attribute
  * @param {boolean} critical - whether to lazy load the image
  * @param {number} maxSize - maximum size to render
@@ -14,15 +18,23 @@ import { getImageAttributes } from '@plone/volto/helpers';
  */
 const Image = ({
   image,
+  imageField = 'image',
   alt = '',
   className,
+  containerClassName,
+  floated,
+  size,
   role = 'img',
   critical = false,
   maxSize,
   useOriginal = false,
   ...imageProps
 }) => {
-  const { src, srcSet } = getImageAttributes(image, { maxSize, useOriginal });
+  const { src, srcSet } = getImageAttributes(image, {
+    imageField,
+    maxSize,
+    useOriginal,
+  });
   const imageRef = useRef();
   const [srcset, setSrcset] = useState(
     critical && srcSet ? srcSet.join(', ') : null,
@@ -30,38 +42,54 @@ const Image = ({
   const hasSrcSet = srcset?.length;
   const imageHasLoaded = imageRef?.current?.complete;
 
+  let pictureClassName = `volto-image${
+    containerClassName ? ` ${containerClassName}` : ''
+  }`;
+  if (floated) {
+    pictureClassName = `${pictureClassName} floated ${floated}`;
+  }
+  if (size) {
+    pictureClassName = `${pictureClassName} ${size}`;
+  }
+
+  const applySrcSet = useCallback(() => {
+    setSrcset(
+      srcSet
+        .filter(
+          (s) =>
+            parseInt(s.split(' ')[1].replace('w', ''), 10) <=
+            (imageRef?.current?.width ?? Infinity),
+        )
+        .join(', '),
+    );
+  }, [srcSet]);
+
   useEffect(() => {
     if ('IntersectionObserver' in window) {
       const observer = new IntersectionObserver(
         (entries) => {
-          if (
-            entries[0].isIntersecting === true &&
-            imageHasLoaded &&
-            !srcset &&
-            srcSet?.length > 0
-          ) {
-            setTimeout(() => {
-              setSrcset(
-                srcSet
-                  .filter(
-                    (s) =>
-                      parseInt(s.split(' ')[1].replace('w', ''), 10) <=
-                      imageRef.current.width,
-                  )
-                  .join(', '),
-              );
-            }, 600);
-          }
+          setTimeout(() => {
+            if (
+              entries[0].isIntersecting === true &&
+              imageRef?.current?.complete &&
+              (!srcset || srcset?.split(', ')?.length < 2) &&
+              srcSet?.length > 0
+            ) {
+              applySrcSet();
+            }
+          }, 600);
         },
         { threshold: [0] },
       );
       observer.observe(imageRef.current);
+    } else {
+      applySrcSet();
     }
-  }, [imageHasLoaded, srcSet, srcset]);
+  }, [imageRef, applySrcSet, imageHasLoaded, srcSet, srcset]);
 
   return (
     <>
-      <picture>
+      <picture className={pictureClassName}>
         {hasSrcSet && <source srcSet={srcset} />}
         <img
           src={src}
@@ -95,9 +123,13 @@ const Image = ({
 };
 
 Image.propTypes = {
+  imageField: PropTypes.string,
   image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
   alt: PropTypes.string,
   className: PropTypes.string,
+  containerClassName: PropTypes.string,
+  floated: PropTypes.oneOf(['left', 'right']),
+  size: PropTypes.oneOf(['thumb', 'small', 'medium', 'large']),
   role: PropTypes.string,
   critical: PropTypes.bool,
   maxSize: PropTypes.number,
@@ -105,6 +137,7 @@ Image.propTypes = {
 };
 
 Image.defaultProps = {
+  imageField: 'image',
   alt: '',
   role: 'img',
   critical: false,
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 41758ade81..a5ac93662c 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -4,11 +4,16 @@ import config from '@plone/volto/registry';
 /**
  * Get src-set list from image
  * @param {object | string} image - Image content object or url
- * @param {object} options - { maxSize [number]: maximum size to render, useOriginal [boolean]: whether to render original img }
+ * @param {object} options
+ * @param {number} options.maxSize - maximum size to render
+ * @param {boolean} options.useOriginal - whether to render original img
+ * @returns {object} image attributes
+ * @returns {string} image.src attributes.src
+ * @returns {string} image.srcset attributes.srcset
  */
 export const getImageAttributes = (
   image,
-  { maxSize = 10000, useOriginal = false } = {},
+  { imageField = 'image', maxSize = 10000, useOriginal = false } = {},
 ) => {
   const imageScales = config.settings.imageScales;
   const minSize = Object.keys(imageScales).reduce((minSize, scale) => {
@@ -20,16 +25,22 @@ export const getImageAttributes = (
   }, null);
 
   let attrs = {};
-  let imageType =
+  let imageType = 'external';
+  if (image['content-type'] === 'image/svg+xml') imageType = 'svg';
+  else if (
     Object.prototype.toString.call(image) === '[object Object]' &&
     image.scales &&
     Object.keys(image.scales).length > 0
-      ? 'imageObject'
-      : typeof image === 'string' && isInternalURL(image)
-      ? 'internalUrl'
-      : 'external';
+  )
+    imageType = 'imageObject';
+  else if (typeof image === 'string' && isInternalURL(image))
+    imageType = 'internalUrl';
 
   switch (imageType) {
+    case 'svg':
+      attrs.src = flattenToAppURL(image.download);
+      break;
+
     // Scales object from Plone restapi
     // ideal use of Plone images
     case 'imageObject':
@@ -56,10 +67,12 @@ export const getImageAttributes = (
     case 'internalUrl':
       let baseUrl = `${flattenToAppURL(image.split('/@@images')[0])}${
         image.endsWith('/') ? '' : '/'
-      }@@images/image`;
+      }@@images/${imageField}`;
       attrs.src = `${baseUrl}/${minSize}`;
       attrs.srcSet = Object.keys(imageScales).reduce((srcSet, scale) => {
-        return [...srcSet, `${baseUrl}/${scale} ${imageScales[scale]}w`];
+        if (imageScales[scale] <= maxSize) {
+          return [...srcSet, `${baseUrl}/${scale} ${imageScales[scale]}w`];
+        } else return srcSet;
       }, []);
 
       if (useOriginal) attrs.srcSet = attrs.srcSet.concat(`${baseUrl} 1200w`); // expect that is for desktop screens, I don't have actual size
diff --git a/theme/themes/pastanaga/extras/main.less b/theme/themes/pastanaga/extras/main.less
index 044ed70f70..56c1ea4188 100644
--- a/theme/themes/pastanaga/extras/main.less
+++ b/theme/themes/pastanaga/extras/main.less
@@ -505,6 +505,38 @@ body.has-toolbar-collapsed .mobile-menu {
   transition: transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91);
 }
 
+.volto-image {
+  &.floated {
+    float: left;
+    margin-right: 1em;
+    margin-bottom: 1em;
+
+    &.right {
+      float: right;
+      margin-right: 0;
+      margin-bottom: 1em;
+      margin-left: 1em;
+    }
+  }
+
+  &.large {
+    max-width: 50%;
+  }
+
+  &.medium {
+    max-width: 25%;
+  }
+
+  &.small {
+    max-width: 15%;
+  }
+
+  &.thumb {
+    max-width: 128px;
+    max-height: 128px;
+  }
+}
+
 // Deprecated as per https://github.com/plone/volto/issues/1265
 // @import 'utils';
 @import 'toolbar';

From 071fd692f675b6503eadcc1db984d861a93fe094 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Fri, 19 Nov 2021 12:14:16 +0100
Subject: [PATCH 22/45] refactor: use volto Image component in views

---
 .../manage/Blocks/Listing/SummaryTemplate.jsx | 20 +++++++++++++------
 src/components/theme/View/AlbumView.jsx       | 19 +++++++++---------
 src/components/theme/View/DefaultView.jsx     | 11 +++++-----
 src/components/theme/View/EventView.jsx       |  7 +++++--
 src/components/theme/View/ImageView.jsx       |  2 +-
 src/components/theme/View/ListingView.jsx     | 13 ++++++------
 src/components/theme/View/NewsItemView.jsx    | 17 ++++++----------
 src/components/theme/View/SummaryView.jsx     | 13 ++++++------
 theme/themes/pastanaga/extras/blocks.less     |  2 +-
 9 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/src/components/manage/Blocks/Listing/SummaryTemplate.jsx b/src/components/manage/Blocks/Listing/SummaryTemplate.jsx
index 0e00127253..4290d4c6aa 100644
--- a/src/components/manage/Blocks/Listing/SummaryTemplate.jsx
+++ b/src/components/manage/Blocks/Listing/SummaryTemplate.jsx
@@ -5,6 +5,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   let link = null;
@@ -26,13 +27,20 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
         {items.map((item) => (
           <div className="listing-item" key={item['@id']}>
             <ConditionalLink item={item} condition={!isEditMode}>
-              {!item.image_field && <img src={DefaultImageSVG} alt="" />}
+              {!item.image_field && (
+                <picture>
+                  <img
+                    className="volto-image thumb"
+                    src={DefaultImageSVG}
+                    alt=""
+                  />
+                </picture>
+              )}
               {item.image_field && (
-                <img
-                  src={flattenToAppURL(
-                    `${item['@id']}/@@images/${item.image_field}/preview`,
-                  )}
-                  alt={item.title}
+                <Image
+                  image={item['@id']}
+                  size="thumb"
+                  imageField={item.image_field}
                 />
               )}
               <div className="listing-body">
diff --git a/src/components/theme/View/AlbumView.jsx b/src/components/theme/View/AlbumView.jsx
index 10835d7aa6..be1b938a32 100644
--- a/src/components/theme/View/AlbumView.jsx
+++ b/src/components/theme/View/AlbumView.jsx
@@ -6,16 +6,15 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Container, Image, GridColumn, Segment } from 'semantic-ui-react';
+import { Container, GridColumn, Segment } from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 import openSVG from '@plone/volto/icons/open.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import backSVG from '@plone/volto/icons/back.svg';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
-
 /**
  * Album view component class.
  * @function AlbumView
@@ -73,7 +72,7 @@ class AlbumView extends Component {
               {content.items &&
                 content.items.map((item, index) => (
                   <React.Fragment key={item.url}>
-                    {item.image && (
+                    {item.image_field && (
                       <Modal
                         className="gallery"
                         onClose={this.closeModal}
@@ -88,9 +87,9 @@ class AlbumView extends Component {
                                     ? item.image_caption
                                     : item.title
                                 }
-                                src={flattenToAppURL(
-                                  item.image.scales.preview.download,
-                                )}
+                                image={item['@id']}
+                                imageField={item.image_field}
+                                maxSize={400}
                                 onClick={() => {
                                   this.setState({
                                     openIndex: index,
@@ -137,14 +136,14 @@ class AlbumView extends Component {
                             <Grid.Column width={8}>
                               <Modal.Content image>
                                 <Image
-                                  wrapped
                                   alt={
                                     item.image_caption
                                       ? item.image_caption
                                       : item.title
                                   }
-                                  src={item.image.scales.large.download}
-                                  loading="lazy"
+                                  image={item['@id']}
+                                  imageField={item.image_field}
+                                  maxSize={800}
                                 />
                                 <Modal.Description>
                                   <p>{item.description}</p>
diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
index 79ce9249be..bbe0be35af 100644
--- a/src/components/theme/View/DefaultView.jsx
+++ b/src/components/theme/View/DefaultView.jsx
@@ -6,10 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-
-import { Container, Image } from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { map } from 'lodash';
-import config from '@plone/volto/registry';
 
 import {
   getBlocksFieldname,
@@ -17,6 +16,7 @@ import {
   hasBlocksData,
   getBaseUrl,
 } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -68,9 +68,8 @@ const DefaultView = ({ content, intl, location }) => {
       {content.image && (
         <Image
           className="document-image"
-          src={content.image.scales.thumb.download}
-          floated="right"
-          loading="lazy"
+          containerClassName="block image align right"
+          image={content.image}
         />
       )}
       {content.remoteUrl && (
diff --git a/src/components/theme/View/EventView.jsx b/src/components/theme/View/EventView.jsx
index 55fe7001be..f66822a2c3 100644
--- a/src/components/theme/View/EventView.jsx
+++ b/src/components/theme/View/EventView.jsx
@@ -7,7 +7,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { flattenHTMLToAppURL } from '@plone/volto/helpers';
-import { Container, Image, Segment, Header, List } from 'semantic-ui-react';
+import { Container, Segment, Header, List } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 import {
   When,
@@ -68,8 +69,10 @@ const EventView = ({ intl, content }) => (
     {content.image && (
       <Image
         className="document-image"
-        src={content.image.scales.thumb.download}
+        containerClassName="block image align right"
+        size="medium"
         floated="right"
+        image={content.image}
       />
     )}
     <Segment floated="right">
diff --git a/src/components/theme/View/ImageView.jsx b/src/components/theme/View/ImageView.jsx
index 7225ce4487..860f403e95 100644
--- a/src/components/theme/View/ImageView.jsx
+++ b/src/components/theme/View/ImageView.jsx
@@ -28,7 +28,7 @@ const ImageView = ({ content }) => (
     )}
     {content?.image?.download && (
       <a href={flattenToAppURL(content.image.download)}>
-        <Image image={content.image} size="preview" alt={content.title} />
+        <Image image={content.image} alt={content.title} />
         <figcaption>
           <FormattedMessage
             id="Size: {size}"
diff --git a/src/components/theme/View/ListingView.jsx b/src/components/theme/View/ListingView.jsx
index 6e6356d3c6..10bae8383a 100644
--- a/src/components/theme/View/ListingView.jsx
+++ b/src/components/theme/View/ListingView.jsx
@@ -6,7 +6,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Segment, Container, Image } from 'semantic-ui-react';
+import { Segment, Container } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * List view component class.
@@ -27,12 +28,12 @@ const ListingView = ({ content }) => (
             </h2>
             {item.description && <p>{item.description}</p>}
           </Container>
-          {item.image && (
+          {item.image_field && (
             <Image
-              size="small"
-              alt={item.image_caption ? item.image_caption : item.title}
-              src={item.image.scales.thumb.download}
-              loading="lazy"
+              image={item['@id']}
+              size="thumb"
+              floated="right"
+              imageField={item.image_field}
             />
           )}
         </Segment>
diff --git a/src/components/theme/View/NewsItemView.jsx b/src/components/theme/View/NewsItemView.jsx
index 3ffa6fe8b7..937d920fbb 100644
--- a/src/components/theme/View/NewsItemView.jsx
+++ b/src/components/theme/View/NewsItemView.jsx
@@ -5,9 +5,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Image } from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
-import { flattenToAppURL, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { flattenHTMLToAppURL } from '@plone/volto/helpers';
 
 /**
  * NewsItemView view component class.
@@ -28,16 +29,10 @@ const NewsItemView = ({ content }) => (
     )}
     {content.image && (
       <Image
-        className="documentImage"
-        alt={content.title}
-        title={content.title}
-        src={
-          content.image['content-type'] === 'image/svg+xml'
-            ? flattenToAppURL(content.image.download)
-            : flattenToAppURL(content.image.scales.mini.download)
-        }
+        className="document-image"
+        size="medium"
         floated="right"
-        loading="lazy"
+        image={content.image}
       />
     )}
     {content.text && (
diff --git a/src/components/theme/View/SummaryView.jsx b/src/components/theme/View/SummaryView.jsx
index 406d285e12..2cec7d8e56 100644
--- a/src/components/theme/View/SummaryView.jsx
+++ b/src/components/theme/View/SummaryView.jsx
@@ -6,8 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Container, Image } from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 /**
  * Summary view component class.
@@ -32,13 +33,13 @@ const SummaryView = ({ content }) => (
                 {item.title}
               </Link>
             </h2>
-            {item.image && (
+            {item.image_field && (
               <Image
-                clearing
+                image={item['@id']}
+                imageField={item.image_field}
+                maxSize={128}
+                size="thumb"
                 floated="right"
-                alt={item.image_caption ? item.image_caption : item.title}
-                src={item.image.scales.thumb.download}
-                loading="lazy"
               />
             )}
             {item.description && <p>{item.description}</p>}
diff --git a/theme/themes/pastanaga/extras/blocks.less b/theme/themes/pastanaga/extras/blocks.less
index e4dd2dea32..1b4721f34e 100644
--- a/theme/themes/pastanaga/extras/blocks.less
+++ b/theme/themes/pastanaga/extras/blocks.less
@@ -800,7 +800,7 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 .listing-item {
   margin-bottom: 20px;
 
-  img {
+  picture {
     max-width: 15%;
     margin-right: 20px;
 

From 609ecdb83d8e0c67478e38c2a9c6847fb66dd9c4 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Fri, 19 Nov 2021 12:53:41 +0100
Subject: [PATCH 23/45] docs: update changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5076e1103f..12493d1717 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@
 
 ### Feature
 
+- Add Image with srcset and lazy loading using Plone scales @nzambello
+
 ### Bugfix
 
 - Fix downloadableObjects default value @giuliaghisini
@@ -104,7 +106,6 @@
 ### Feature
 
 - Support Node 16 @timo
-- Add Image with srcset and lazy loading using Plone scales @nzambello
 
 ### Bugfix
 

From ceda0542fa10292983a4ddf214f64f2de2dcd3c7 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Fri, 19 Nov 2021 12:53:53 +0100
Subject: [PATCH 24/45] test: update tests and snapshots

---
 .../__snapshots__/View.test.jsx.snap          |   4 +-
 .../__snapshots__/View.test.jsx.snap          |   4 +-
 src/components/theme/Image/Image.jsx          |   2 +-
 src/components/theme/Image/Image.test.jsx     |  26 ++++
 .../Image/__snapshots__/Image.test.jsx.snap   | 115 +++++++++++++++++-
 src/components/theme/View/AlbumView.test.jsx  |  20 ++-
 .../theme/View/SummaryView.test.jsx           |  18 ++-
 .../__snapshots__/AlbumView.test.jsx.snap     |  74 +++++++++--
 .../__snapshots__/ImageView.test.jsx.snap     |   5 +-
 .../__snapshots__/SummaryView.test.jsx.snap   |  37 +++++-
 10 files changed, 277 insertions(+), 28 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 20fb05cda5..7fbd9fd2b8 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -7,7 +7,9 @@ exports[`renders a view hero component 1`] = `
   <div
     className="block-inner-wrapper"
   >
-    <picture>
+    <picture
+      className="volto-image"
+    >
       <img
         alt=""
         className="hero-image"
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index 1c7162159c..db659b70e1 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -4,7 +4,9 @@ exports[`renders a view image component 1`] = `
 <p
   className="block image align center"
 >
-  <picture>
+  <picture
+    className="volto-image"
+  >
     <img
       alt=""
       className=""
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 9950c6b110..2d34e478fb 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -82,7 +82,7 @@ const Image = ({
         { threshold: [0] },
       );
       observer.observe(imageRef.current);
-    } else {
+    } else if (srcSet?.length > 0) {
       applySrcSet();
     }
   }, [imageRef, applySrcSet, imageHasLoaded, srcSet, srcset]);
diff --git a/src/components/theme/Image/Image.test.jsx b/src/components/theme/Image/Image.test.jsx
index d4b63e3151..bbbcb11d5d 100644
--- a/src/components/theme/Image/Image.test.jsx
+++ b/src/components/theme/Image/Image.test.jsx
@@ -125,4 +125,30 @@ describe('Image', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders image with plone image object and floated prop', () => {
+    const component = renderer.create(
+      <Image
+        image={ploneImage}
+        alt="Photo"
+        className="photo-image"
+        floated="right"
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders image with plone image object and size prop', () => {
+    const component = renderer.create(
+      <Image
+        image={ploneImage}
+        alt="Photo"
+        className="photo-image"
+        size="medium"
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index f0d8e564e6..cc09915322 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -2,7 +2,9 @@
 
 exports[`Image renders image with default values and image url 1`] = `
 Array [
-  <picture>
+  <picture
+    className="volto-image"
+  >
     <img
       alt=""
       loading="lazy"
@@ -37,7 +39,9 @@ Array [
 
 exports[`Image renders image with external url 1`] = `
 Array [
-  <picture>
+  <picture
+    className="volto-image"
+  >
     <img
       alt="External picsum photo"
       loading="lazy"
@@ -72,7 +76,9 @@ Array [
 
 exports[`Image renders image with plone image object 1`] = `
 Array [
-  <picture>
+  <picture
+    className="volto-image"
+  >
     <img
       alt="Photo"
       className="photo-image"
@@ -106,9 +112,55 @@ Array [
 ]
 `;
 
+exports[`Image renders image with plone image object and floated prop 1`] = `
+Array [
+  <picture
+    className="volto-image floated right"
+  >
+    <source
+      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"
+    />
+    <img
+      alt="Photo"
+      className="photo-image"
+      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=\\"Photo\\"
+                class=\\"photo-image\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+      }
+    }
+  />,
+]
+`;
+
 exports[`Image renders image with plone image object and opt props 1`] = `
 Array [
-  <picture>
+  <picture
+    className="volto-image"
+  >
+    <source
+      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"
+    />
     <img
       alt="Photo"
       className="photo-image"
@@ -144,7 +196,12 @@ Array [
 
 exports[`Image renders image with plone image object and original 1`] = `
 Array [
-  <picture>
+  <picture
+    className="volto-image"
+  >
+    <source
+      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"
+    />
     <img
       alt="Photo"
       className="photo-image"
@@ -178,9 +235,55 @@ Array [
 ]
 `;
 
+exports[`Image renders image with plone image object and size prop 1`] = `
+Array [
+  <picture
+    className="volto-image medium"
+  >
+    <source
+      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"
+    />
+    <img
+      alt="Photo"
+      className="photo-image"
+      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=\\"Photo\\"
+                class=\\"photo-image\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+      }
+    }
+  />,
+]
+`;
+
 exports[`Image renders image with props and image url 1`] = `
 Array [
-  <picture>
+  <picture
+    className="volto-image"
+  >
+    <source
+      srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
+    />
     <img
       alt="Photo"
       className="photo-image"
diff --git a/src/components/theme/View/AlbumView.test.jsx b/src/components/theme/View/AlbumView.test.jsx
index 3fcca46570..c93ead9d56 100644
--- a/src/components/theme/View/AlbumView.test.jsx
+++ b/src/components/theme/View/AlbumView.test.jsx
@@ -2,6 +2,18 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import AlbumView from './AlbumView';
 
+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 an gallery view component', () => {
   const component = renderer.create(
     <AlbumView
@@ -10,8 +22,10 @@ test('renders an gallery view component', () => {
         description: 'Hi',
         items: [
           {
+            '@id': 'http://localhost:3000/news',
             url: '/news',
             image: {
+              download: 'file:///preview.jpg',
               scales: {
                 preview: {
                   download: 'file:///preview.jpg',
@@ -21,10 +35,13 @@ test('renders an gallery view component', () => {
                 },
               },
             },
+            image_field: 'image',
           },
           {
-            url: '',
+            '@id': 'http://localhost:3000/events',
+            url: '/events',
             image: {
+              download: 'file:///preview.jpg',
               scales: {
                 preview: {
                   download: 'file:///preview.jpg',
@@ -34,6 +51,7 @@ test('renders an gallery view component', () => {
                 },
               },
             },
+            image_field: 'image',
           },
         ],
       }}
diff --git a/src/components/theme/View/SummaryView.test.jsx b/src/components/theme/View/SummaryView.test.jsx
index 41d33c6577..ed5634d1b6 100644
--- a/src/components/theme/View/SummaryView.test.jsx
+++ b/src/components/theme/View/SummaryView.test.jsx
@@ -3,9 +3,20 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-
 import SummaryView from './SummaryView';
 
+import config from '@plone/volto/registry';
+
+config.settings.imageScales = {
+  large: 768,
+  preview: 400,
+  mini: 200,
+  thumb: 128,
+  tile: 64,
+  icon: 32,
+  listing: 16,
+};
+
 const mockStore = configureStore();
 
 describe('TabularView', () => {
@@ -25,10 +36,13 @@ describe('TabularView', () => {
               description: 'Hi',
               items: [
                 {
+                  '@id': 'http://localhost:3000/my-item',
+                  '@type': 'News Item',
                   title: 'My item',
                   description: 'My item description',
                   url: '/item',
                   image: {
+                    download: 'file:///preview.jpg',
                     scales: {
                       thumb: {
                         download: 'file:///preview.jpg',
@@ -36,7 +50,7 @@ describe('TabularView', () => {
                     },
                   },
                   image_caption: 'My image caption',
-                  '@type': 'News Item',
+                  image_field: 'image',
                 },
               ],
             }}
diff --git a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
index c77e1c982c..55f92cd3d4 100644
--- a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
@@ -36,10 +36,39 @@ exports[`renders an gallery view component 1`] = `
           <div
             className="ui segment imageborder"
           >
-            <img
-              className="ui middle aligned image"
-              onClick={[Function]}
-              src="file:///preview.jpg"
+            <picture
+              className="volto-image"
+            >
+              <img
+                alt=""
+                loading="lazy"
+                onClick={[Function]}
+                role="img"
+                src="http://localhost:3000/news"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                    "width": "100%",
+                  }
+                }
+                verticalAlign="middle"
+              />
+            </picture>
+            <noscript
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "
+              <img
+                src=\\"http://localhost:3000/news\\"
+                undefined
+                alt=\\"\\"
+                class=\\"\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+                }
+              }
             />
           </div>
         </div>
@@ -54,10 +83,39 @@ exports[`renders an gallery view component 1`] = `
           <div
             className="ui segment imageborder"
           >
-            <img
-              className="ui middle aligned image"
-              onClick={[Function]}
-              src="file:///preview.jpg"
+            <picture
+              className="volto-image"
+            >
+              <img
+                alt=""
+                loading="lazy"
+                onClick={[Function]}
+                role="img"
+                src="http://localhost:3000/events"
+                style={
+                  Object {
+                    "objectFit": "cover",
+                    "width": "100%",
+                  }
+                }
+                verticalAlign="middle"
+              />
+            </picture>
+            <noscript
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "
+              <img
+                src=\\"http://localhost:3000/events\\"
+                undefined
+                alt=\\"\\"
+                class=\\"\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+                }
+              }
             />
           </div>
         </div>
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 8d1932a2e8..db609e79ce 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -17,12 +17,13 @@ exports[`renders an image view component 1`] = `
   <a
     href="/test-images/@@images/image"
   >
-    <picture>
+    <picture
+      className="volto-image"
+    >
       <img
         alt="Hello World!"
         loading="lazy"
         role="img"
-        size="preview"
         src="http://localhost:8080/Plone/test-images/@@images/image/listing"
         style={
           Object {
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index 5eaafdbabd..f670d9341c 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -32,12 +32,37 @@ exports[`TabularView renders a summary view component 1`] = `
             My item
           </a>
         </h2>
-        <img
-          alt="My image caption"
-          className="ui right floated image"
-          clearing={true}
-          loading="lazy"
-          src="file:///preview.jpg"
+        <picture
+          className="volto-image floated right thumb"
+        >
+          <img
+            alt=""
+            loading="lazy"
+            role="img"
+            src="http://localhost:3000/my-item"
+            style={
+              Object {
+                "objectFit": "cover",
+                "width": "100%",
+              }
+            }
+          />
+        </picture>
+        <noscript
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "
+              <img
+                src=\\"http://localhost:3000/my-item\\"
+                undefined
+                alt=\\"\\"
+                class=\\"\\"
+                role=\\"img\\"
+                loading=\\"lazy\\"
+                style=\\"width: 100%; object-fit: cover;\\"
+            ",
+            }
+          }
         />
         <p>
           My item description

From 86df9d182ac1bf0411f06ecf6dda741f376a8b45 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Tue, 23 Nov 2021 14:32:13 +0100
Subject: [PATCH 25/45] test: update cy test

---
 cypress/tests/core/blocks-listing-templates.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/tests/core/blocks-listing-templates.js b/cypress/tests/core/blocks-listing-templates.js
index 245bab3bec..50f78be339 100644
--- a/cypress/tests/core/blocks-listing-templates.js
+++ b/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) => {

From 1ac4e2b4dfaf425371835afc5a112425896a9612 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Thu, 25 Nov 2021 21:52:31 +0100
Subject: [PATCH 26/45] refactor: default view classes

---
 src/components/theme/View/DefaultView.jsx | 3 ++-
 src/components/theme/View/EventView.jsx   | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
index bbe0be35af..662390ad41 100644
--- a/src/components/theme/View/DefaultView.jsx
+++ b/src/components/theme/View/DefaultView.jsx
@@ -68,8 +68,9 @@ const DefaultView = ({ content, intl, location }) => {
       {content.image && (
         <Image
           className="document-image"
-          containerClassName="block image align right"
           image={content.image}
+          floated="right"
+          size="medium"
         />
       )}
       {content.remoteUrl && (
diff --git a/src/components/theme/View/EventView.jsx b/src/components/theme/View/EventView.jsx
index f66822a2c3..d7082e3c8f 100644
--- a/src/components/theme/View/EventView.jsx
+++ b/src/components/theme/View/EventView.jsx
@@ -69,7 +69,6 @@ const EventView = ({ intl, content }) => (
     {content.image && (
       <Image
         className="document-image"
-        containerClassName="block image align right"
         size="medium"
         floated="right"
         image={content.image}

From 4fc573ac6cbb87475c0cb3aa439ce34aabe18924 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Thu, 25 Nov 2021 21:52:52 +0100
Subject: [PATCH 27/45] fix: image srcset render

---
 src/components/theme/Image/Image.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 2d34e478fb..88c5f51409 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -39,7 +39,6 @@ const Image = ({
   const [srcset, setSrcset] = useState(
     critical && srcSet ? srcSet.join(', ') : null,
   );
-  const hasSrcSet = srcset?.length;
   const imageHasLoaded = imageRef?.current?.complete;
 
   let pictureClassName = `volto-image${
@@ -90,7 +89,7 @@ const Image = ({
   return (
     <>
       <picture className={pictureClassName}>
-        {hasSrcSet && <source srcSet={srcset} />}
+        {srcset?.length > 0 && <source srcSet={srcset} />}
         <img
           src={src}
           alt={alt}

From 1576e3daea80db63539789ba9e24ff16284dcda9 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Fri, 26 Nov 2021 14:29:39 +0100
Subject: [PATCH 28/45] docs: update Image docs

---
 docs/source/developer-guidelines/images.md | 61 +++++++++++++++-------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/docs/source/developer-guidelines/images.md b/docs/source/developer-guidelines/images.md
index 65bf68cf99..e081bdd4d8 100644
--- a/docs/source/developer-guidelines/images.md
+++ b/docs/source/developer-guidelines/images.md
@@ -8,34 +8,57 @@ It renders images using Plone scales from [plone.app.imaging](https://github.com
 
 ## Usage
 
+Basic example:
+
 ```jsx
 import Image from '@plone/volto/components/theme/Image/Image';
 
-  ...
+<Image image={content.image} />
+
+```
+
+### Usage in a CT view or in a block
+
+Example from NewsItem or Event default views, with some layout props:
 
-  <Image
-    className="listing-image"
-    image={item.image}
-    aria-hidden="true"
-    alt=""
-    useOriginal={false}
-    maxSize={400}
+```jsx
+<Image
+  image={content.image}
+  className="document-image"
+  size="medium"
+  floated="right"
+/>
+```
+
+### Usage in a listing block
+
+Or in general, when dealing with catalog brains:
+
+```jsx
+<Image 
+  image={item['@id']} 
+  size="thumb" 
+  imageField={item.image_field} 
   />
 ```
 
-## Props
+## Image 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                          |
+| prop               | type                                  | required           | default | descirption                                                                    |
+| ------------------ | ------------------------------------- | ------------------ | ------- | ------------------------------------------------------------------------------ |
+| image              | object or string                      | :white_check_mark: |         | Plone image object or image url                                                |
+| imageField         | string                                |                    | `image` | Image field (see https://github.com/plone/volto/pull/2731)                     |
+| alt                | string                                |                    | `''`    | Alternative text for the image                                                 |
+| className          | string                                |                    |         | CSS class for the image                                                        |
+| containerClassName | string                                |                    |         | Additional CSS classes for the container picture element                       |
+| floated            | `left` or `right`                     |                    |         | Float the image to left or right                                               |
+| size               | `thumb`, `small`, `medium` or `large` |                    |         | Image size (CSS-level, not related to img resolution)                          |
+| 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 in pixel, will skip the larger ones                     |
+| useOriginal        | boolean                               |                    | `false` | If true, it will includes the original size in srcset                          |
 
-### image prop
+### 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).

From cf533c153cdf2207c1f662736bc7e970c6eaf088 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 2 Feb 2022 09:09:24 +0100
Subject: [PATCH 29/45] chore: add the next item grather then imageRef width,
 to avoid less quality

---
 src/components/theme/Image/Image.jsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 88c5f51409..da632adede 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -27,6 +27,7 @@ const Image = ({
   role = 'img',
   critical = false,
   maxSize,
+  minSize = 0,
   useOriginal = false,
   ...imageProps
 }) => {
@@ -34,6 +35,7 @@ const Image = ({
     imageField,
     maxSize,
     useOriginal,
+    minSize,
   });
   const imageRef = useRef();
   const [srcset, setSrcset] = useState(
@@ -54,11 +56,18 @@ const Image = ({
   const applySrcSet = useCallback(() => {
     setSrcset(
       srcSet
-        .filter(
-          (s) =>
-            parseInt(s.split(' ')[1].replace('w', ''), 10) <=
-            (imageRef?.current?.width ?? Infinity),
-        )
+        .filter((s, index) => {
+          let addable = (ss) =>
+            ss
+              ? parseInt(ss.split(' ')[1].replace('w', ''), 10) <=
+                (imageRef?.current?.width ?? Infinity)
+              : false;
+          let add = addable(s);
+          if (!add && addable(srcSet[index - 1])) {
+            add = true; //add the next item grather then imageRef width, to avoid less quality
+          }
+          return add;
+        })
         .join(', '),
     );
   }, [srcSet]);

From 1932873c243b7a5a4d754da8c8464d4c119eb99f Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 29 Mar 2022 12:18:22 +0200
Subject: [PATCH 30/45] fix: handle also image height

---
 src/components/theme/Image/Image.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index da632adede..31b9eed2cb 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -57,15 +57,20 @@ const Image = ({
     setSrcset(
       srcSet
         .filter((s, index) => {
-          let addable = (ss) =>
-            ss
-              ? parseInt(ss.split(' ')[1].replace('w', ''), 10) <=
-                (imageRef?.current?.width ?? Infinity)
+          let addable = (ss) => {
+            let w = ss ? parseInt(ss.split(' ')[1].replace('w', ''), 10) : null;
+            return w
+              ? w <= (imageRef?.current?.width ?? Infinity) ||
+                  w <= (imageRef?.current?.height ?? Infinity)
               : false;
+          };
+
           let add = addable(s);
+
           if (!add && addable(srcSet[index - 1])) {
             add = true; //add the next item grather then imageRef width, to avoid less quality
           }
+
           return add;
         })
         .join(', '),

From 4637a372c2401a7d7f0ed5c02e17e5dab99530b2 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 29 Mar 2022 16:07:38 +0200
Subject: [PATCH 31/45] chore: handle devicePixelRatio

---
 src/components/theme/Image/Image.jsx              | 13 ++++++++-----
 .../theme/Image/__snapshots__/Image.test.jsx.snap | 15 ---------------
 src/helpers/Image/Image.js                        |  2 +-
 3 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 31b9eed2cb..53593ee0ed 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -58,18 +58,21 @@ const Image = ({
       srcSet
         .filter((s, index) => {
           let addable = (ss) => {
+            let devicePixelRatio = window.devicePixelRatio;
             let w = ss ? parseInt(ss.split(' ')[1].replace('w', ''), 10) : null;
             return w
-              ? w <= (imageRef?.current?.width ?? Infinity) ||
-                  w <= (imageRef?.current?.height ?? Infinity)
+              ? w <=
+                  (imageRef?.current?.width * devicePixelRatio ?? Infinity) ||
+                  w <=
+                    (imageRef?.current?.height * devicePixelRatio ?? Infinity)
               : false;
           };
 
           let add = addable(s);
 
-          if (!add && addable(srcSet[index - 1])) {
-            add = true; //add the next item grather then imageRef width, to avoid less quality
-          }
+          // if (!add && addable(srcSet[index - 1])) {
+          //   add = true; //add the next item grather then imageRef width, to avoid less quality
+          // }
 
           return add;
         })
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index cc09915322..155f77ab90 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -117,9 +117,6 @@ Array [
   <picture
     className="volto-image floated right"
   >
-    <source
-      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"
-    />
     <img
       alt="Photo"
       className="photo-image"
@@ -158,9 +155,6 @@ Array [
   <picture
     className="volto-image"
   >
-    <source
-      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"
-    />
     <img
       alt="Photo"
       className="photo-image"
@@ -199,9 +193,6 @@ Array [
   <picture
     className="volto-image"
   >
-    <source
-      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"
-    />
     <img
       alt="Photo"
       className="photo-image"
@@ -240,9 +231,6 @@ Array [
   <picture
     className="volto-image medium"
   >
-    <source
-      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"
-    />
     <img
       alt="Photo"
       className="photo-image"
@@ -281,9 +269,6 @@ Array [
   <picture
     className="volto-image"
   >
-    <source
-      srcSet="/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w"
-    />
     <img
       alt="Photo"
       className="photo-image"
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 1437a0933a..8ad99fc7e4 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -75,7 +75,7 @@ export const getImageAttributes = (
         } else return srcSet;
       }, []);
 
-      if (useOriginal) attrs.srcSet = attrs.srcSet.concat(`${baseUrl} 1200w`); // expect that is for desktop screens, I don't have actual size
+      if (useOriginal) attrs.srcSet = attrs.srcSet.concat(`${baseUrl} 1900w`); // expect that is for desktop screens, I don't have actual size
       break;
 
     // External URL or other element

From 7b6af2e44585f9cfe7127dc61e7430777ba89f48 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 29 Mar 2022 17:57:31 +0200
Subject: [PATCH 32/45] fix object images

---
 src/helpers/Image/Image.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 8ad99fc7e4..22a33d4725 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -46,12 +46,17 @@ export const getImageAttributes = (
     case 'imageObject':
       let sortedScales = Object.values(image.scales)
         .filter((scale) => scale.width <= maxSize)
-        .filter((scale) => scale.width < image.width) // avoid duplicates if image is small and original is smaller than scale
+        .filter(
+          (scale, index, array) =>
+            index ===
+            array.findIndex((foundItem) => foundItem.width === scale.width),
+        ) // avoid duplicates if image is small and original is smaller than scale
         .sort((a, b) => {
           if (a.width > b.width) return 1;
           else if (a.width < b.width) return -1;
           else return 0;
         });
+
       attrs.src = sortedScales[0]?.download ?? image.download;
       attrs.srcSet = sortedScales.map(
         (scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`,

From d22b2a3c1ec6a9088f457c1632d0c2e039c80167 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 3 May 2022 16:30:36 +0200
Subject: [PATCH 33/45] chore: added sizes to srcset and fixed lazy loading
 effect

---
 src/components/theme/Image/Image.jsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 53593ee0ed..a67aed10b4 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -29,6 +29,7 @@ const Image = ({
   maxSize,
   minSize = 0,
   useOriginal = false,
+  sizes = '100vw',
   ...imageProps
 }) => {
   const { src, srcSet } = getImageAttributes(image, {
@@ -81,21 +82,21 @@ const Image = ({
   }, [srcSet]);
 
   useEffect(() => {
-    if ('IntersectionObserver' in window) {
+    if ('IntersectionObserver' in window && !srcset) {
       const observer = new IntersectionObserver(
         (entries) => {
-          setTimeout(() => {
-            if (
-              entries[0].isIntersecting === true &&
-              imageRef?.current?.complete &&
-              (!srcset || srcset?.split(', ')?.length < 2) &&
-              srcSet?.length > 0
-            ) {
-              applySrcSet();
-            }
-          }, 600);
+          //setTimeout(() => {
+          if (
+            entries[0].isIntersecting === true &&
+            imageRef?.current?.complete &&
+            (!srcset || srcset?.split(', ')?.length < 2) &&
+            srcSet?.length > 0
+          ) {
+            applySrcSet();
+          }
+          //}, 600);
         },
-        { threshold: [0] },
+        { threshold: [0], rootMargin: '100px' },
       );
       observer.observe(imageRef.current);
     } else if (srcSet?.length > 0) {
@@ -106,7 +107,7 @@ const Image = ({
   return (
     <>
       <picture className={pictureClassName}>
-        {srcset?.length > 0 && <source srcSet={srcset} />}
+        {srcset?.length > 0 && <source srcSet={srcset} sizes={sizes} />}
         <img
           src={src}
           alt={alt}

From a5af866fd76cd11e4af0adf5bcdd565727268316 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 3 May 2022 16:56:35 +0200
Subject: [PATCH 34/45] re-added timout because need for initial visible images

---
 src/components/theme/Image/Image.jsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index a67aed10b4..cc3fcb8114 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -85,16 +85,16 @@ const Image = ({
     if ('IntersectionObserver' in window && !srcset) {
       const observer = new IntersectionObserver(
         (entries) => {
-          //setTimeout(() => {
-          if (
-            entries[0].isIntersecting === true &&
-            imageRef?.current?.complete &&
-            (!srcset || srcset?.split(', ')?.length < 2) &&
-            srcSet?.length > 0
-          ) {
-            applySrcSet();
-          }
-          //}, 600);
+          setTimeout(() => {
+            if (
+              entries[0].isIntersecting === true &&
+              imageRef?.current?.complete &&
+              (!srcset || srcset?.split(', ')?.length < 2) &&
+              srcSet?.length > 0
+            ) {
+              applySrcSet();
+            }
+          }, 10);
         },
         { threshold: [0], rootMargin: '100px' },
       );
@@ -146,7 +146,7 @@ Image.propTypes = {
   className: PropTypes.string,
   containerClassName: PropTypes.string,
   floated: PropTypes.oneOf(['left', 'right']),
-  size: PropTypes.oneOf(['thumb', 'small', 'medium', 'large']),
+  size: PropTypes.string,
   role: PropTypes.string,
   critical: PropTypes.bool,
   maxSize: PropTypes.number,

From b3c879dbb07330c864378de768f148254f019a18 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 4 May 2022 08:28:49 +0200
Subject: [PATCH 35/45] do not lazy critical images

---
 src/components/theme/Image/Image.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index cc3fcb8114..b8ce9e220a 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -113,7 +113,7 @@ const Image = ({
           alt={alt}
           className={className}
           role={role}
-          loading="lazy"
+          loading={critical ? 'eager' : 'lazy'}
           style={{ width: '100%', objectFit: 'cover' }}
           {...imageProps}
           ref={imageRef}
@@ -129,7 +129,7 @@ const Image = ({
                 alt="${alt}"
                 class="${className || ''}"
                 role="${role}"
-                loading="lazy"
+                loading="${critical ? 'eager' : 'lazy'}"
                 style="width: 100%; object-fit: cover;"
             `,
           }}

From fba81252c1788789ee30bf1450f8b086dd115224 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 4 May 2022 10:17:57 +0200
Subject: [PATCH 36/45] removed condition on image complete to load images on
 top of the page

---
 src/components/theme/Image/Image.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index b8ce9e220a..df7ad95020 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -88,7 +88,7 @@ const Image = ({
           setTimeout(() => {
             if (
               entries[0].isIntersecting === true &&
-              imageRef?.current?.complete &&
+              //imageRef?.current?.complete && //removed to load images on top of the page.
               (!srcset || srcset?.split(', ')?.length < 2) &&
               srcSet?.length > 0
             ) {

From af854dcb55b6d19243c861ddde722ef0340467de Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 4 May 2022 12:36:13 +0200
Subject: [PATCH 37/45] removed loading lazy from placeholder

---
 .../__snapshots__/View.test.jsx.snap          |  7 ---
 .../manage/Blocks/Image/View.test.jsx         |  1 -
 .../__snapshots__/View.test.jsx.snap          |  7 ---
 src/components/theme/Image/Image.jsx          |  8 ++-
 .../Image/__snapshots__/Image.test.jsx.snap   | 56 -------------------
 .../__snapshots__/PreviewImage.test.js.snap   | 21 -------
 .../__snapshots__/AlbumView.test.jsx.snap     | 14 -----
 .../__snapshots__/ImageView.test.jsx.snap     |  7 ---
 .../__snapshots__/SummaryView.test.jsx.snap   |  7 ---
 src/helpers/Image/Image.js                    | 33 +++++++----
 theme/themes/pastanaga/extras/blocks.less     |  7 +++
 11 files changed, 33 insertions(+), 135 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 7fbd9fd2b8..ca09746cef 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -13,15 +13,8 @@ exports[`renders a view hero component 1`] = `
       <img
         alt=""
         className="hero-image"
-        loading="lazy"
         role="img"
         src="/heroimage.jpg/@@images/image/listing"
-        style={
-          Object {
-            "objectFit": "cover",
-            "width": "100%",
-          }
-        }
       />
     </picture>
     <noscript
diff --git a/src/components/manage/Blocks/Image/View.test.jsx b/src/components/manage/Blocks/Image/View.test.jsx
index ef9de26a1a..9ca4a25091 100644
--- a/src/components/manage/Blocks/Image/View.test.jsx
+++ b/src/components/manage/Blocks/Image/View.test.jsx
@@ -21,7 +21,6 @@ describe('Image View Component', () => {
     const { getByRole } = render(<View data={{ url: '/image.jpg' }} />);
     const img = getByRole('img');
     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', () => {
     const { container, getByRole } = render(
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index db659b70e1..575ae26e30 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -10,15 +10,8 @@ exports[`renders a view image component 1`] = `
     <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
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index df7ad95020..4abc26bc6e 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -32,7 +32,7 @@ const Image = ({
   sizes = '100vw',
   ...imageProps
 }) => {
-  const { src, srcSet } = getImageAttributes(image, {
+  const { src, srcSet, width, height } = getImageAttributes(image, {
     imageField,
     maxSize,
     useOriginal,
@@ -113,8 +113,10 @@ const Image = ({
           alt={alt}
           className={className}
           role={role}
-          loading={critical ? 'eager' : 'lazy'}
-          style={{ width: '100%', objectFit: 'cover' }}
+          //loading={critical ? 'eager' : 'lazy'} //removed because this is for the placeholder.Lazy loading is made from intersectionObserver
+          //style={{ width: '100%', objectFit: 'cover' }} //moved to blocks.less
+          width={width}
+          height={height}
           {...imageProps}
           ref={imageRef}
         />
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index 155f77ab90..831b256f66 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -7,15 +7,8 @@ Array [
   >
     <img
       alt=""
-      loading="lazy"
       role="img"
       src="/photo.png/@@images/image/listing"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -44,15 +37,8 @@ Array [
   >
     <img
       alt="External picsum photo"
-      loading="lazy"
       role="img"
       src="https://picsum.photos/200/300"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -82,15 +68,8 @@ Array [
     <img
       alt="Photo"
       className="photo-image"
-      loading="lazy"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -120,15 +99,8 @@ Array [
     <img
       alt="Photo"
       className="photo-image"
-      loading="lazy"
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -158,15 +130,8 @@ Array [
     <img
       alt="Photo"
       className="photo-image"
-      loading="lazy"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -196,15 +161,8 @@ Array [
     <img
       alt="Photo"
       className="photo-image"
-      loading="lazy"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -234,15 +192,8 @@ Array [
     <img
       alt="Photo"
       className="photo-image"
-      loading="lazy"
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -272,15 +223,8 @@ Array [
     <img
       alt="Photo"
       className="photo-image"
-      loading="lazy"
       role="presentation"
       src="/photo.png/@@images/image/listing"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
diff --git a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
index eea7c7981d..c6ed9c3984 100644
--- a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
+++ b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
@@ -38,15 +38,8 @@ Array [
   >
     <img
       alt="Item title"
-      loading="lazy"
       role="img"
       src="http://localhost:3000/something"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -75,15 +68,8 @@ Array [
   >
     <img
       alt="Item title"
-      loading="lazy"
       role="img"
       src="http://localhost:3000/something"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
@@ -113,15 +99,8 @@ Array [
     <img
       alt="Item title"
       className="extra"
-      loading="lazy"
       role="img"
       src="http://localhost:3000/something"
-      style={
-        Object {
-          "objectFit": "cover",
-          "width": "100%",
-        }
-      }
     />
   </picture>,
   <noscript
diff --git a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
index 55f92cd3d4..0725cc31d3 100644
--- a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
@@ -41,16 +41,9 @@ exports[`renders an gallery view component 1`] = `
             >
               <img
                 alt=""
-                loading="lazy"
                 onClick={[Function]}
                 role="img"
                 src="http://localhost:3000/news"
-                style={
-                  Object {
-                    "objectFit": "cover",
-                    "width": "100%",
-                  }
-                }
                 verticalAlign="middle"
               />
             </picture>
@@ -88,16 +81,9 @@ exports[`renders an gallery view component 1`] = `
             >
               <img
                 alt=""
-                loading="lazy"
                 onClick={[Function]}
                 role="img"
                 src="http://localhost:3000/events"
-                style={
-                  Object {
-                    "objectFit": "cover",
-                    "width": "100%",
-                  }
-                }
                 verticalAlign="middle"
               />
             </picture>
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index db609e79ce..4cd28e8e5c 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -22,15 +22,8 @@ exports[`renders an image view component 1`] = `
     >
       <img
         alt="Hello World!"
-        loading="lazy"
         role="img"
         src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-        style={
-          Object {
-            "objectFit": "cover",
-            "width": "100%",
-          }
-        }
       />
     </picture>
     <noscript
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index f670d9341c..8a183c031d 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -37,15 +37,8 @@ exports[`TabularView renders a summary view component 1`] = `
         >
           <img
             alt=""
-            loading="lazy"
             role="img"
             src="http://localhost:3000/my-item"
-            style={
-              Object {
-                "objectFit": "cover",
-                "width": "100%",
-              }
-            }
           />
         </picture>
         <noscript
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 22a33d4725..65b3e61e3c 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -1,6 +1,22 @@
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
+const getImageType = (image) => {
+  let imageType = 'external';
+  if (image['content-type'] === 'image/svg+xml') {
+    imageType = 'svg';
+  } else if (
+    Object.prototype.toString.call(image) === '[object Object]' &&
+    image.scales &&
+    Object.keys(image.scales).length > 0
+  ) {
+    imageType = 'imageObject';
+  } else if (typeof image === 'string' && isInternalURL(image)) {
+    imageType = 'internalUrl';
+  }
+  return imageType;
+};
+
 /**
  * Get src-set list from image
  * @param {object | string} image - Image content object or url
@@ -20,21 +36,11 @@ export const getImageAttributes = (
     if (!minSize || imageScales[scale] < imageScales[minSize]) {
       return scale;
     }
-
     return minSize;
   }, null);
 
   let attrs = {};
-  let imageType = 'external';
-  if (image['content-type'] === 'image/svg+xml') imageType = 'svg';
-  else if (
-    Object.prototype.toString.call(image) === '[object Object]' &&
-    image.scales &&
-    Object.keys(image.scales).length > 0
-  )
-    imageType = 'imageObject';
-  else if (typeof image === 'string' && isInternalURL(image))
-    imageType = 'internalUrl';
+  let imageType = getImageType(image);
 
   switch (imageType) {
     case 'svg':
@@ -57,7 +63,10 @@ export const getImageAttributes = (
           else return 0;
         });
 
-      attrs.src = sortedScales[0]?.download ?? image.download;
+      const scale = sortedScales[0];
+      attrs.src = scale?.download ?? image.download;
+      // attrs.width = scale.width ?? image.width;
+      // attrs.height = scale.height ?? image.height;
       attrs.srcSet = sortedScales.map(
         (scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`,
       );
diff --git a/theme/themes/pastanaga/extras/blocks.less b/theme/themes/pastanaga/extras/blocks.less
index 17eabb889c..d017ab9a0a 100644
--- a/theme/themes/pastanaga/extras/blocks.less
+++ b/theme/themes/pastanaga/extras/blocks.less
@@ -1104,3 +1104,10 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     }
   }
 }
+
+.volto-image {
+  img {
+    width: 100%;
+    object-fit: cover;
+  }
+}

From ed1e9e5161528c75e97379f90864b7067f66d336 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 4 May 2022 12:52:52 +0200
Subject: [PATCH 38/45] fixed noscript img

---
 .../__snapshots__/View.test.jsx.snap          |  5 ++-
 .../__snapshots__/View.test.jsx.snap          |  5 ++-
 src/components/theme/Image/Image.jsx          |  5 ++-
 .../Image/__snapshots__/Image.test.jsx.snap   | 40 +++++++++++--------
 .../__snapshots__/PreviewImage.test.js.snap   | 15 ++++---
 .../__snapshots__/AlbumView.test.jsx.snap     | 10 +++--
 .../__snapshots__/ImageView.test.jsx.snap     |  5 ++-
 .../__snapshots__/SummaryView.test.jsx.snap   |  5 ++-
 8 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index ca09746cef..eb204c592b 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -27,8 +27,9 @@ exports[`renders a view hero component 1`] = `
                 alt=\\"\\"
                 class=\\"hero-image\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
         }
       }
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index 575ae26e30..b676647b1a 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -24,8 +24,9 @@ exports[`renders a view image component 1`] = `
                 alt=\\"\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 4abc26bc6e..ff5f897be7 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -131,8 +131,9 @@ const Image = ({
                 alt="${alt}"
                 class="${className || ''}"
                 role="${role}"
-                loading="${critical ? 'eager' : 'lazy'}"
-                style="width: 100%; object-fit: cover;"
+                ${width ? `width="${width}` : ''}
+                ${height ? `height="${height}` : ''}                         
+                loading="lazy"               
             `,
           }}
         />
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index 831b256f66..928c73c389 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -21,8 +21,9 @@ Array [
                 alt=\\"\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -51,8 +52,9 @@ Array [
                 alt=\\"External picsum photo\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -82,8 +84,9 @@ Array [
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -113,8 +116,9 @@ Array [
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -144,8 +148,9 @@ Array [
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -175,8 +180,9 @@ Array [
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -206,8 +212,9 @@ Array [
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -237,8 +244,9 @@ Array [
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
diff --git a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
index c6ed9c3984..940dfca976 100644
--- a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
+++ b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
@@ -52,8 +52,9 @@ Array [
                 alt=\\"Item title\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -82,8 +83,9 @@ Array [
                 alt=\\"Item title\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -113,8 +115,9 @@ Array [
                 alt=\\"Item title\\"
                 class=\\"extra\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
diff --git a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
index 0725cc31d3..a697e78c9c 100644
--- a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
@@ -57,8 +57,9 @@ exports[`renders an gallery view component 1`] = `
                 alt=\\"\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
                 }
               }
@@ -97,8 +98,9 @@ exports[`renders an gallery view component 1`] = `
                 alt=\\"\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
                 }
               }
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 4cd28e8e5c..14639ac962 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -36,8 +36,9 @@ exports[`renders an image view component 1`] = `
                 alt=\\"Hello World!\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
         }
       }
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index 8a183c031d..c63be38fa3 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -51,8 +51,9 @@ exports[`TabularView renders a summary view component 1`] = `
                 alt=\\"\\"
                 class=\\"\\"
                 role=\\"img\\"
-                loading=\\"lazy\\"
-                style=\\"width: 100%; object-fit: cover;\\"
+                
+                                         
+                loading=\\"lazy\\"               
             ",
             }
           }

From 5418d2bfb7040575094030de9c654c8387396863 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 4 May 2022 14:29:08 +0200
Subject: [PATCH 39/45] fixes

---
 .../__snapshots__/View.test.jsx.snap          |  4 +--
 .../__snapshots__/View.test.jsx.snap          |  4 +--
 src/components/theme/Image/Image.jsx          | 15 ++++++---
 .../Image/__snapshots__/Image.test.jsx.snap   | 32 +++++++++----------
 .../__snapshots__/PreviewImage.test.js.snap   | 12 +++----
 .../__snapshots__/AlbumView.test.jsx.snap     |  8 ++---
 .../__snapshots__/ImageView.test.jsx.snap     |  4 +--
 .../__snapshots__/SummaryView.test.jsx.snap   |  4 +--
 8 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index eb204c592b..7f7d6d68be 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -28,8 +28,8 @@ exports[`renders a view hero component 1`] = `
                 class=\\"hero-image\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
         }
       }
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index b676647b1a..f7ab8ec7a0 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -25,8 +25,8 @@ exports[`renders a view image component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index ff5f897be7..741f13ff4d 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -82,13 +82,14 @@ const Image = ({
   }, [srcSet]);
 
   useEffect(() => {
+    const ref = imageRef?.current;
     if ('IntersectionObserver' in window && !srcset) {
       const observer = new IntersectionObserver(
         (entries) => {
           setTimeout(() => {
             if (
               entries[0].isIntersecting === true &&
-              //imageRef?.current?.complete && //removed to load images on top of the page.
+              //ref?.complete && //removed to load images on top of the page.
               (!srcset || srcset?.split(', ')?.length < 2) &&
               srcSet?.length > 0
             ) {
@@ -98,7 +99,12 @@ const Image = ({
         },
         { threshold: [0], rootMargin: '100px' },
       );
-      observer.observe(imageRef.current);
+      if (ref) {
+        observer.observe(ref);
+      }
+      return () => {
+        if (ref) observer.unobserve(ref);
+      };
     } else if (srcSet?.length > 0) {
       applySrcSet();
     }
@@ -114,7 +120,6 @@ const Image = ({
           className={className}
           role={role}
           //loading={critical ? 'eager' : 'lazy'} //removed because this is for the placeholder.Lazy loading is made from intersectionObserver
-          //style={{ width: '100%', objectFit: 'cover' }} //moved to blocks.less
           width={width}
           height={height}
           {...imageProps}
@@ -132,8 +137,8 @@ const Image = ({
                 class="${className || ''}"
                 role="${role}"
                 ${width ? `width="${width}` : ''}
-                ${height ? `height="${height}` : ''}                         
-                loading="lazy"               
+                ${height ? `height="${height}` : ''}
+                loading="lazy"
             `,
           }}
         />
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index 928c73c389..aebcc2f2da 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -22,8 +22,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -53,8 +53,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -85,8 +85,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -117,8 +117,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -149,8 +149,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -181,8 +181,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -213,8 +213,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -245,8 +245,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
diff --git a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
index 940dfca976..5604ff0704 100644
--- a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
+++ b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
@@ -53,8 +53,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -84,8 +84,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
@@ -116,8 +116,8 @@ Array [
                 class=\\"extra\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
       }
     }
diff --git a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
index a697e78c9c..97d3e2ae00 100644
--- a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
@@ -58,8 +58,8 @@ exports[`renders an gallery view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
                 }
               }
@@ -99,8 +99,8 @@ exports[`renders an gallery view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
                 }
               }
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 14639ac962..617a12d91a 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -37,8 +37,8 @@ exports[`renders an image view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
         }
       }
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index c63be38fa3..fa18839def 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -52,8 +52,8 @@ exports[`TabularView renders a summary view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                                         
-                loading=\\"lazy\\"               
+                
+                loading=\\"lazy\\"
             ",
             }
           }

From c74c3b374a734a71add01bdbe343fdaa29f919cd Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 4 May 2022 16:13:19 +0200
Subject: [PATCH 40/45] added 'responsive prop to Image and width and heght
 inline if maxWidth is set

---
 .../__snapshots__/View.test.jsx.snap          |  6 +--
 .../__snapshots__/View.test.jsx.snap          |  6 +--
 src/components/theme/Image/Image.jsx          | 33 ++++++------
 .../Image/__snapshots__/Image.test.jsx.snap   | 51 ++++++++++---------
 .../__snapshots__/PreviewImage.test.js.snap   | 18 +++----
 .../__snapshots__/AlbumView.test.jsx.snap     | 12 ++---
 .../__snapshots__/ImageView.test.jsx.snap     |  6 +--
 .../__snapshots__/SummaryView.test.jsx.snap   |  6 +--
 src/helpers/Image/Image.js                    | 17 +++++--
 src/helpers/Image/Image.test.js               | 10 ++++
 theme/themes/pastanaga/extras/blocks.less     |  7 ---
 theme/themes/pastanaga/extras/main.less       | 19 ++++---
 12 files changed, 107 insertions(+), 84 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 7f7d6d68be..5efaf8939f 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`renders a view hero component 1`] = `
     className="block-inner-wrapper"
   >
     <picture
-      className="volto-image"
+      className="volto-image responsive"
     >
       <img
         alt=""
@@ -28,8 +28,8 @@ exports[`renders a view hero component 1`] = `
                 class=\\"hero-image\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
         }
       }
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index f7ab8ec7a0..35c8e54106 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`renders a view image component 1`] = `
   className="block image align center"
 >
   <picture
-    className="volto-image"
+    className="volto-image responsive"
   >
     <img
       alt=""
@@ -25,8 +25,8 @@ exports[`renders a view image component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 741f13ff4d..56556a22f1 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -10,9 +10,10 @@ import { getImageAttributes } from '@plone/volto/helpers';
  * @param {string} className - CSS class attribute
  * @param {string} containerClassName - CSS class attribute for picture element
  * @param {string} floated - float left or right
- * @param {string} size - actual width: thumb, small, medium or large
+ * @param {string} responsive - if the image is responsive
+ * @param {string} size - (css class) actual width: thumb, small, medium or large
  * @param {string} role - img role attribute
- * @param {boolean} critical - whether to lazy load the image
+ * @param {boolean} critical - if critical, do not lazy load the image
  * @param {number} maxSize - maximum size to render
  * @param {boolean} useOriginal - whether to render original size
  */
@@ -24,6 +25,7 @@ const Image = ({
   containerClassName,
   floated,
   size,
+  responsive = true,
   role = 'img',
   critical = false,
   maxSize,
@@ -44,6 +46,7 @@ const Image = ({
   );
   const imageHasLoaded = imageRef?.current?.complete;
 
+  //picture classname
   let pictureClassName = `volto-image${
     containerClassName ? ` ${containerClassName}` : ''
   }`;
@@ -54,13 +57,20 @@ const Image = ({
     pictureClassName = `${pictureClassName} ${size}`;
   }
 
+  if (responsive) {
+    pictureClassName = `${pictureClassName} responsive`;
+  }
+
+  //apply srcset
   const applySrcSet = useCallback(() => {
     setSrcset(
       srcSet
         .filter((s, index) => {
           let addable = (ss) => {
             let devicePixelRatio = window.devicePixelRatio;
+
             let w = ss ? parseInt(ss.split(' ')[1].replace('w', ''), 10) : null;
+
             return w
               ? w <=
                   (imageRef?.current?.width * devicePixelRatio ?? Infinity) ||
@@ -71,25 +81,21 @@ const Image = ({
 
           let add = addable(s);
 
-          // if (!add && addable(srcSet[index - 1])) {
-          //   add = true; //add the next item grather then imageRef width, to avoid less quality
-          // }
-
           return add;
         })
         .join(', '),
     );
   }, [srcSet]);
 
+  //intersection observer
   useEffect(() => {
-    const ref = imageRef?.current;
     if ('IntersectionObserver' in window && !srcset) {
       const observer = new IntersectionObserver(
         (entries) => {
           setTimeout(() => {
             if (
               entries[0].isIntersecting === true &&
-              //ref?.complete && //removed to load images on top of the page.
+              //imageRef?.current?.complete && //removed to load images on top of the page.
               (!srcset || srcset?.split(', ')?.length < 2) &&
               srcSet?.length > 0
             ) {
@@ -99,12 +105,7 @@ const Image = ({
         },
         { threshold: [0], rootMargin: '100px' },
       );
-      if (ref) {
-        observer.observe(ref);
-      }
-      return () => {
-        if (ref) observer.unobserve(ref);
-      };
+      observer.observe(imageRef.current);
     } else if (srcSet?.length > 0) {
       applySrcSet();
     }
@@ -137,8 +138,8 @@ const Image = ({
                 class="${className || ''}"
                 role="${role}"
                 ${width ? `width="${width}` : ''}
-                ${height ? `height="${height}` : ''}
-                loading="lazy"
+                ${height ? `height="${height}` : ''}                         
+                loading="lazy"               
             `,
           }}
         />
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index aebcc2f2da..08bfd8cba0 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`Image renders image with default values and image url 1`] = `
 Array [
   <picture
-    className="volto-image"
+    className="volto-image responsive"
   >
     <img
       alt=""
@@ -22,8 +22,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -34,7 +34,7 @@ Array [
 exports[`Image renders image with external url 1`] = `
 Array [
   <picture
-    className="volto-image"
+    className="volto-image responsive"
   >
     <img
       alt="External picsum photo"
@@ -53,8 +53,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -65,7 +65,7 @@ Array [
 exports[`Image renders image with plone image object 1`] = `
 Array [
   <picture
-    className="volto-image"
+    className="volto-image responsive"
   >
     <img
       alt="Photo"
@@ -85,8 +85,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -97,7 +97,7 @@ Array [
 exports[`Image renders image with plone image object and floated prop 1`] = `
 Array [
   <picture
-    className="volto-image floated right"
+    className="volto-image floated right responsive"
   >
     <img
       alt="Photo"
@@ -117,8 +117,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -129,13 +129,14 @@ Array [
 exports[`Image renders image with plone image object and opt props 1`] = `
 Array [
   <picture
-    className="volto-image"
+    className="volto-image responsive"
   >
     <img
       alt="Photo"
       className="photo-image"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      width={200}
     />
   </picture>,
   <noscript
@@ -148,9 +149,9 @@ Array [
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
-                
-                
-                loading=\\"lazy\\"
+                width=\\"200
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -161,7 +162,7 @@ Array [
 exports[`Image renders image with plone image object and original 1`] = `
 Array [
   <picture
-    className="volto-image"
+    className="volto-image responsive"
   >
     <img
       alt="Photo"
@@ -181,8 +182,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -193,7 +194,7 @@ Array [
 exports[`Image renders image with plone image object and size prop 1`] = `
 Array [
   <picture
-    className="volto-image medium"
+    className="volto-image medium responsive"
   >
     <img
       alt="Photo"
@@ -213,8 +214,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -225,7 +226,7 @@ Array [
 exports[`Image renders image with props and image url 1`] = `
 Array [
   <picture
-    className="volto-image"
+    className="volto-image responsive"
   >
     <img
       alt="Photo"
@@ -245,8 +246,8 @@ Array [
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
diff --git a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
index 5604ff0704..4832f907c0 100644
--- a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
+++ b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
@@ -34,7 +34,7 @@ exports[`PreviewImage renders a fallback image with extra props 1`] = `
 exports[`PreviewImage renders a preview image 1`] = `
 Array [
   <picture
-    className="volto-image preview"
+    className="volto-image preview responsive"
   >
     <img
       alt="Item title"
@@ -53,8 +53,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -65,7 +65,7 @@ Array [
 exports[`PreviewImage renders a preview image with custom size 1`] = `
 Array [
   <picture
-    className="volto-image large"
+    className="volto-image large responsive"
   >
     <img
       alt="Item title"
@@ -84,8 +84,8 @@ Array [
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
@@ -96,7 +96,7 @@ Array [
 exports[`PreviewImage renders a preview image with extra props 1`] = `
 Array [
   <picture
-    className="volto-image preview"
+    className="volto-image preview responsive"
   >
     <img
       alt="Item title"
@@ -116,8 +116,8 @@ Array [
                 class=\\"extra\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
       }
     }
diff --git a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
index 97d3e2ae00..4fe7659d5e 100644
--- a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
@@ -37,7 +37,7 @@ exports[`renders an gallery view component 1`] = `
             className="ui segment imageborder"
           >
             <picture
-              className="volto-image"
+              className="volto-image responsive"
             >
               <img
                 alt=""
@@ -58,8 +58,8 @@ exports[`renders an gallery view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
                 }
               }
@@ -78,7 +78,7 @@ exports[`renders an gallery view component 1`] = `
             className="ui segment imageborder"
           >
             <picture
-              className="volto-image"
+              className="volto-image responsive"
             >
               <img
                 alt=""
@@ -99,8 +99,8 @@ exports[`renders an gallery view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
                 }
               }
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 617a12d91a..8a577cef2c 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -18,7 +18,7 @@ exports[`renders an image view component 1`] = `
     href="/test-images/@@images/image"
   >
     <picture
-      className="volto-image"
+      className="volto-image responsive"
     >
       <img
         alt="Hello World!"
@@ -37,8 +37,8 @@ exports[`renders an image view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
         }
       }
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index fa18839def..62b2a5940c 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -33,7 +33,7 @@ exports[`TabularView renders a summary view component 1`] = `
           </a>
         </h2>
         <picture
-          className="volto-image floated right thumb"
+          className="volto-image floated right thumb responsive"
         >
           <img
             alt=""
@@ -52,8 +52,8 @@ exports[`TabularView renders a summary view component 1`] = `
                 class=\\"\\"
                 role=\\"img\\"
                 
-                
-                loading=\\"lazy\\"
+                                         
+                loading=\\"lazy\\"               
             ",
             }
           }
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 65b3e61e3c..2f6dbce202 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -27,9 +27,15 @@ const getImageType = (image) => {
  * @returns {string} image.src attributes.src
  * @returns {string} image.srcset attributes.srcset
  */
+
+const DEFAULT_MAX_SIZE = 10000;
 export const getImageAttributes = (
   image,
-  { imageField = 'image', maxSize = 10000, useOriginal = false } = {},
+  {
+    imageField = 'image',
+    maxSize = DEFAULT_MAX_SIZE,
+    useOriginal = false,
+  } = {},
 ) => {
   const imageScales = config.settings.imageScales;
   const minSize = Object.keys(imageScales).reduce((minSize, scale) => {
@@ -65,8 +71,13 @@ export const getImageAttributes = (
 
       const scale = sortedScales[0];
       attrs.src = scale?.download ?? image.download;
-      // attrs.width = scale.width ?? image.width;
-      // attrs.height = scale.height ?? image.height;
+
+      if (maxSize !== DEFAULT_MAX_SIZE) {
+        const maxScale = sortedScales[sortedScales.length - 1];
+        attrs.width = maxScale.width;
+        attrs.height = maxScale.height;
+      }
+
       attrs.srcSet = sortedScales.map(
         (scale) => `${flattenToAppURL(scale.download)} ${scale.width}w`,
       );
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index 28a42997c4..6331cf5df0 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -4,36 +4,44 @@ import config from '@plone/volto/registry';
 const ploneImage = {
   download: 'http://localhost:8080/Plone/test-images/@@images/image',
   width: 1920,
+  height: 960,
   scales: {
     icon: {
       download: 'http://localhost:8080/Plone/test-images/@@images/image/icon',
       width: 32,
+      height: 16,
     },
     large: {
       download: 'http://localhost:8080/Plone/test-images/@@images/image/large',
       width: 768,
+      height: 384,
     },
     listing: {
       download:
         'http://localhost:8080/Plone/test-images/@@images/image/listing',
       width: 16,
+      height: 8,
     },
     mini: {
       download: 'http://localhost:8080/Plone/test-images/@@images/image/mini',
       width: 200,
+      height: 100,
     },
     preview: {
       download:
         'http://localhost:8080/Plone/test-images/@@images/image/preview',
       width: 400,
+      height: 200,
     },
     thumb: {
       download: 'http://localhost:8080/Plone/test-images/@@images/image/thumb',
       width: 128,
+      height: 64,
     },
     tile: {
       download: 'http://localhost:8080/Plone/test-images/@@images/image/tile',
       width: 64,
+      height: 32,
     },
   },
 };
@@ -94,6 +102,8 @@ describe('Image', () => {
           '/test-images/@@images/image/thumb 128w',
           '/test-images/@@images/image/mini 200w',
         ],
+        width: 200,
+        height: 100,
       });
     });
 
diff --git a/theme/themes/pastanaga/extras/blocks.less b/theme/themes/pastanaga/extras/blocks.less
index d017ab9a0a..17eabb889c 100644
--- a/theme/themes/pastanaga/extras/blocks.less
+++ b/theme/themes/pastanaga/extras/blocks.less
@@ -1104,10 +1104,3 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     }
   }
 }
-
-.volto-image {
-  img {
-    width: 100%;
-    object-fit: cover;
-  }
-}
diff --git a/theme/themes/pastanaga/extras/main.less b/theme/themes/pastanaga/extras/main.less
index a5859a577c..cc0f8236a4 100644
--- a/theme/themes/pastanaga/extras/main.less
+++ b/theme/themes/pastanaga/extras/main.less
@@ -557,34 +557,41 @@ body.has-toolbar-collapsed .mobile-menu {
 
 .volto-image {
   &.floated {
-    float: left;
     margin-right: 1em;
     margin-bottom: 1em;
+    float: left;
 
     &.right {
-      float: right;
       margin-right: 0;
       margin-bottom: 1em;
       margin-left: 1em;
+      float: right;
     }
   }
 
   &.large {
-    max-width: 50%;
+    width: 50%;
   }
 
   &.medium {
-    max-width: 25%;
+    width: 25%;
   }
 
   &.small {
-    max-width: 15%;
+    width: 15%;
   }
 
   &.thumb {
-    max-width: 128px;
+    width: 128px;
     max-height: 128px;
   }
+
+  &.responsive {
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
 }
 
 // Deprecated as per https://github.com/plone/volto/issues/1265

From 5a101df16967e370083ea5a1bedc19d6103563d3 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Fri, 6 May 2022 12:05:56 +0200
Subject: [PATCH 41/45] added style aspect-ratio to help browser determining
 image area if no width and height is provided

---
 .../__snapshots__/View.test.jsx.snap          |  5 +++
 .../__snapshots__/View.test.jsx.snap          |  5 +++
 src/components/theme/Image/Image.jsx          | 16 +++++---
 .../Image/__snapshots__/Image.test.jsx.snap   | 40 +++++++++++++++++++
 .../__snapshots__/PreviewImage.test.js.snap   | 15 +++++++
 .../__snapshots__/AlbumView.test.jsx.snap     | 10 +++++
 .../__snapshots__/ImageView.test.jsx.snap     |  5 +++
 .../__snapshots__/SummaryView.test.jsx.snap   |  5 +++
 src/helpers/Image/Image.js                    |  1 +
 src/helpers/Image/Image.test.js               |  3 ++
 10 files changed, 99 insertions(+), 6 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 5efaf8939f..4e3578206d 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -15,6 +15,11 @@ exports[`renders a view hero component 1`] = `
         className="hero-image"
         role="img"
         src="/heroimage.jpg/@@images/image/listing"
+        style={
+          Object {
+            "aspect-ratio": "undefined",
+          }
+        }
       />
     </picture>
     <noscript
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index 35c8e54106..ff813f20d1 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -12,6 +12,11 @@ exports[`renders a view image component 1`] = `
       className=""
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "NaN",
+        }
+      }
     />
   </picture>
   <noscript
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 56556a22f1..d410703124 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -34,12 +34,15 @@ const Image = ({
   sizes = '100vw',
   ...imageProps
 }) => {
-  const { src, srcSet, width, height } = getImageAttributes(image, {
-    imageField,
-    maxSize,
-    useOriginal,
-    minSize,
-  });
+  const { src, srcSet, width, height, aspectRatio } = getImageAttributes(
+    image,
+    {
+      imageField,
+      maxSize,
+      useOriginal,
+      minSize,
+    },
+  );
   const imageRef = useRef();
   const [srcset, setSrcset] = useState(
     critical && srcSet ? srcSet.join(', ') : null,
@@ -123,6 +126,7 @@ const Image = ({
           //loading={critical ? 'eager' : 'lazy'} //removed because this is for the placeholder.Lazy loading is made from intersectionObserver
           width={width}
           height={height}
+          style={{ 'aspect-ratio': `${aspectRatio}` }}
           {...imageProps}
           ref={imageRef}
         />
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index 08bfd8cba0..ca2392db74 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -9,6 +9,11 @@ Array [
       alt=""
       role="img"
       src="/photo.png/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "undefined",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -40,6 +45,11 @@ Array [
       alt="External picsum photo"
       role="img"
       src="https://picsum.photos/200/300"
+      style={
+        Object {
+          "aspect-ratio": "undefined",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -72,6 +82,11 @@ Array [
       className="photo-image"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "NaN",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -104,6 +119,11 @@ Array [
       className="photo-image"
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "NaN",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -136,6 +156,11 @@ Array [
       className="photo-image"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "NaN",
+        }
+      }
       width={200}
     />
   </picture>,
@@ -169,6 +194,11 @@ Array [
       className="photo-image"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "NaN",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -201,6 +231,11 @@ Array [
       className="photo-image"
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "NaN",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -233,6 +268,11 @@ Array [
       className="photo-image"
       role="presentation"
       src="/photo.png/@@images/image/listing"
+      style={
+        Object {
+          "aspect-ratio": "undefined",
+        }
+      }
     />
   </picture>,
   <noscript
diff --git a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
index 4832f907c0..96cbad1686 100644
--- a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
+++ b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
@@ -40,6 +40,11 @@ Array [
       alt="Item title"
       role="img"
       src="http://localhost:3000/something"
+      style={
+        Object {
+          "aspect-ratio": "undefined",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -71,6 +76,11 @@ Array [
       alt="Item title"
       role="img"
       src="http://localhost:3000/something"
+      style={
+        Object {
+          "aspect-ratio": "undefined",
+        }
+      }
     />
   </picture>,
   <noscript
@@ -103,6 +113,11 @@ Array [
       className="extra"
       role="img"
       src="http://localhost:3000/something"
+      style={
+        Object {
+          "aspect-ratio": "undefined",
+        }
+      }
     />
   </picture>,
   <noscript
diff --git a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
index 4fe7659d5e..f250a755f6 100644
--- a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
@@ -44,6 +44,11 @@ exports[`renders an gallery view component 1`] = `
                 onClick={[Function]}
                 role="img"
                 src="http://localhost:3000/news"
+                style={
+                  Object {
+                    "aspect-ratio": "undefined",
+                  }
+                }
                 verticalAlign="middle"
               />
             </picture>
@@ -85,6 +90,11 @@ exports[`renders an gallery view component 1`] = `
                 onClick={[Function]}
                 role="img"
                 src="http://localhost:3000/events"
+                style={
+                  Object {
+                    "aspect-ratio": "undefined",
+                  }
+                }
                 verticalAlign="middle"
               />
             </picture>
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 8a577cef2c..5321088097 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -24,6 +24,11 @@ exports[`renders an image view component 1`] = `
         alt="Hello World!"
         role="img"
         src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+        style={
+          Object {
+            "aspect-ratio": "NaN",
+          }
+        }
       />
     </picture>
     <noscript
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index 62b2a5940c..7d5f19eb88 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -39,6 +39,11 @@ exports[`TabularView renders a summary view component 1`] = `
             alt=""
             role="img"
             src="http://localhost:3000/my-item"
+            style={
+              Object {
+                "aspect-ratio": "undefined",
+              }
+            }
           />
         </picture>
         <noscript
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 2f6dbce202..f6e0a09f9e 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -72,6 +72,7 @@ export const getImageAttributes = (
       const scale = sortedScales[0];
       attrs.src = scale?.download ?? image.download;
 
+      attrs.aspectRatio = (image.width / image.height).toFixed(2);
       if (maxSize !== DEFAULT_MAX_SIZE) {
         const maxScale = sortedScales[sortedScales.length - 1];
         attrs.width = maxScale.width;
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index 6331cf5df0..f7db0021af 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -89,6 +89,7 @@ describe('Image', () => {
           '/test-images/@@images/image/preview 400w',
           '/test-images/@@images/image/large 768w',
         ],
+        aspectRatio: '2.00',
       });
     });
 
@@ -104,6 +105,7 @@ describe('Image', () => {
         ],
         width: 200,
         height: 100,
+        aspectRatio: '2.00',
       });
     });
 
@@ -120,6 +122,7 @@ describe('Image', () => {
           '/test-images/@@images/image/large 768w',
           '/test-images/@@images/image 1920w',
         ],
+        aspectRatio: '2.00',
       });
     });
   });

From 6f4ff20da30fb22f617ab1210927bfb7bbd87e2e Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Fri, 6 May 2022 12:09:54 +0200
Subject: [PATCH 42/45] added style aspect-ratio to help browser determining
 image area if no width and height is provided

---
 src/helpers/Image/Image.js      | 2 +-
 src/helpers/Image/Image.test.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index f6e0a09f9e..9dcd6e851c 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -72,7 +72,7 @@ export const getImageAttributes = (
       const scale = sortedScales[0];
       attrs.src = scale?.download ?? image.download;
 
-      attrs.aspectRatio = (image.width / image.height).toFixed(2);
+      attrs.aspectRatio = Math.round((image.width / image.height) * 100) / 100;
       if (maxSize !== DEFAULT_MAX_SIZE) {
         const maxScale = sortedScales[sortedScales.length - 1];
         attrs.width = maxScale.width;
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index f7db0021af..447b693d7e 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -89,7 +89,7 @@ describe('Image', () => {
           '/test-images/@@images/image/preview 400w',
           '/test-images/@@images/image/large 768w',
         ],
-        aspectRatio: '2.00',
+        aspectRatio: 2,
       });
     });
 
@@ -105,7 +105,7 @@ describe('Image', () => {
         ],
         width: 200,
         height: 100,
-        aspectRatio: '2.00',
+        aspectRatio: 2,
       });
     });
 
@@ -122,7 +122,7 @@ describe('Image', () => {
           '/test-images/@@images/image/large 768w',
           '/test-images/@@images/image 1920w',
         ],
-        aspectRatio: '2.00',
+        aspectRatio: 2,
       });
     });
   });

From 1fb6a0ac48dc320c2ccec171fc43f3f231eed60b Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Fri, 6 May 2022 12:50:17 +0200
Subject: [PATCH 43/45] fixed order of srcset in internalUrl case image

---
 .../__snapshots__/View.test.jsx.snap          |  8 +--
 .../__snapshots__/View.test.jsx.snap          |  6 +--
 src/components/theme/Image/Image.jsx          |  2 +-
 .../Image/__snapshots__/Image.test.jsx.snap   | 52 ++++---------------
 .../__snapshots__/PreviewImage.test.js.snap   | 18 ++-----
 .../__snapshots__/AlbumView.test.jsx.snap     | 12 +----
 .../__snapshots__/ImageView.test.jsx.snap     |  6 +--
 .../__snapshots__/SummaryView.test.jsx.snap   |  6 +--
 src/helpers/Image/Image.js                    | 19 ++++---
 src/helpers/Image/Image.test.js               | 12 ++---
 10 files changed, 40 insertions(+), 101 deletions(-)

diff --git a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
index 4e3578206d..c05c8f35e6 100644
--- a/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/HeroImageLeft/__snapshots__/View.test.jsx.snap
@@ -15,11 +15,7 @@ exports[`renders a view hero component 1`] = `
         className="hero-image"
         role="img"
         src="/heroimage.jpg/@@images/image/listing"
-        style={
-          Object {
-            "aspect-ratio": "undefined",
-          }
-        }
+        style={null}
       />
     </picture>
     <noscript
@@ -28,7 +24,7 @@ exports[`renders a view hero component 1`] = `
           "__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\\"
+                srcset=\\"/heroimage.jpg/@@images/image/listing 16w, /heroimage.jpg/@@images/image/icon 32w, /heroimage.jpg/@@images/image/tile 64w, /heroimage.jpg/@@images/image/thumb 128w, /heroimage.jpg/@@images/image/mini 200w, /heroimage.jpg/@@images/image/preview 400w, /heroimage.jpg/@@images/image/large 768w\\"
                 alt=\\"\\"
                 class=\\"hero-image\\"
                 role=\\"img\\"
diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index ff813f20d1..def7cd8faa 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -12,11 +12,7 @@ exports[`renders a view image component 1`] = `
       className=""
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "NaN",
-        }
-      }
+      style={null}
     />
   </picture>
   <noscript
diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index d410703124..0d683be50a 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -126,7 +126,7 @@ const Image = ({
           //loading={critical ? 'eager' : 'lazy'} //removed because this is for the placeholder.Lazy loading is made from intersectionObserver
           width={width}
           height={height}
-          style={{ 'aspect-ratio': `${aspectRatio}` }}
+          style={aspectRatio ? { 'aspect-ratio': `${aspectRatio}` } : null}
           {...imageProps}
           ref={imageRef}
         />
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index ca2392db74..dfb150247d 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -9,11 +9,7 @@ Array [
       alt=""
       role="img"
       src="/photo.png/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "undefined",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -22,7 +18,7 @@ Array [
         "__html": "
               <img
                 src=\\"/photo.png/@@images/image/listing\\"
-                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w\\"
+                srcset=\\"/photo.png/@@images/image/listing 16w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/large 768w\\"
                 alt=\\"\\"
                 class=\\"\\"
                 role=\\"img\\"
@@ -45,11 +41,7 @@ Array [
       alt="External picsum photo"
       role="img"
       src="https://picsum.photos/200/300"
-      style={
-        Object {
-          "aspect-ratio": "undefined",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -82,11 +74,7 @@ Array [
       className="photo-image"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "NaN",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -119,11 +107,7 @@ Array [
       className="photo-image"
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "NaN",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -156,11 +140,7 @@ Array [
       className="photo-image"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "NaN",
-        }
-      }
+      style={null}
       width={200}
     />
   </picture>,
@@ -194,11 +174,7 @@ Array [
       className="photo-image"
       role="presentation"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "NaN",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -231,11 +207,7 @@ Array [
       className="photo-image"
       role="img"
       src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "NaN",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -268,11 +240,7 @@ Array [
       className="photo-image"
       role="presentation"
       src="/photo.png/@@images/image/listing"
-      style={
-        Object {
-          "aspect-ratio": "undefined",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -281,7 +249,7 @@ Array [
         "__html": "
               <img
                 src=\\"/photo.png/@@images/image/listing\\"
-                srcset=\\"/photo.png/@@images/image/large 768w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/listing 16w\\"
+                srcset=\\"/photo.png/@@images/image/listing 16w, /photo.png/@@images/image/icon 32w, /photo.png/@@images/image/tile 64w, /photo.png/@@images/image/thumb 128w, /photo.png/@@images/image/mini 200w, /photo.png/@@images/image/preview 400w, /photo.png/@@images/image/large 768w\\"
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
                 role=\\"presentation\\"
diff --git a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
index 96cbad1686..6d5ca71e60 100644
--- a/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
+++ b/src/components/theme/PreviewImage/__snapshots__/PreviewImage.test.js.snap
@@ -40,11 +40,7 @@ Array [
       alt="Item title"
       role="img"
       src="http://localhost:3000/something"
-      style={
-        Object {
-          "aspect-ratio": "undefined",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -76,11 +72,7 @@ Array [
       alt="Item title"
       role="img"
       src="http://localhost:3000/something"
-      style={
-        Object {
-          "aspect-ratio": "undefined",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
@@ -113,11 +105,7 @@ Array [
       className="extra"
       role="img"
       src="http://localhost:3000/something"
-      style={
-        Object {
-          "aspect-ratio": "undefined",
-        }
-      }
+      style={null}
     />
   </picture>,
   <noscript
diff --git a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
index f250a755f6..a40c4e4da2 100644
--- a/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/AlbumView.test.jsx.snap
@@ -44,11 +44,7 @@ exports[`renders an gallery view component 1`] = `
                 onClick={[Function]}
                 role="img"
                 src="http://localhost:3000/news"
-                style={
-                  Object {
-                    "aspect-ratio": "undefined",
-                  }
-                }
+                style={null}
                 verticalAlign="middle"
               />
             </picture>
@@ -90,11 +86,7 @@ exports[`renders an gallery view component 1`] = `
                 onClick={[Function]}
                 role="img"
                 src="http://localhost:3000/events"
-                style={
-                  Object {
-                    "aspect-ratio": "undefined",
-                  }
-                }
+                style={null}
                 verticalAlign="middle"
               />
             </picture>
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 5321088097..5b648d9d78 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -24,11 +24,7 @@ exports[`renders an image view component 1`] = `
         alt="Hello World!"
         role="img"
         src="http://localhost:8080/Plone/test-images/@@images/image/listing"
-        style={
-          Object {
-            "aspect-ratio": "NaN",
-          }
-        }
+        style={null}
       />
     </picture>
     <noscript
diff --git a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
index 7d5f19eb88..373cf8ff2f 100644
--- a/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/SummaryView.test.jsx.snap
@@ -39,11 +39,7 @@ exports[`TabularView renders a summary view component 1`] = `
             alt=""
             role="img"
             src="http://localhost:3000/my-item"
-            style={
-              Object {
-                "aspect-ratio": "undefined",
-              }
-            }
+            style={null}
           />
         </picture>
         <noscript
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index 9dcd6e851c..de02c9b267 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -71,8 +71,8 @@ export const getImageAttributes = (
 
       const scale = sortedScales[0];
       attrs.src = scale?.download ?? image.download;
-
       attrs.aspectRatio = Math.round((image.width / image.height) * 100) / 100;
+
       if (maxSize !== DEFAULT_MAX_SIZE) {
         const maxScale = sortedScales[sortedScales.length - 1];
         attrs.width = maxScale.width;
@@ -95,11 +95,18 @@ export const getImageAttributes = (
         image.endsWith('/') ? '' : '/'
       }@@images/${imageField}`;
       attrs.src = `${baseUrl}/${minSize}`;
-      attrs.srcSet = Object.keys(imageScales).reduce((srcSet, scale) => {
-        if (imageScales[scale] <= maxSize) {
-          return [...srcSet, `${baseUrl}/${scale} ${imageScales[scale]}w`];
-        } else return srcSet;
-      }, []);
+
+      attrs.srcSet = Object.keys(imageScales)
+        .sort((a, b) => {
+          if (imageScales[a] > imageScales[b]) return 1;
+          else if (imageScales[a] < imageScales[b]) return -1;
+          else return 0;
+        })
+        .reduce((srcSet, scale) => {
+          if (imageScales[scale] <= maxSize) {
+            return [...srcSet, `${baseUrl}/${scale} ${imageScales[scale]}w`];
+          } else return srcSet;
+        }, []);
 
       if (useOriginal) attrs.srcSet = attrs.srcSet.concat(`${baseUrl} 1900w`); // expect that is for desktop screens, I don't have actual size
       break;
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index 447b693d7e..c6fbb75f73 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -66,13 +66,13 @@ describe('Image', () => {
       ).toEqual({
         src: '/photo.png/@@images/image/listing',
         srcSet: [
-          '/photo.png/@@images/image/large 768w',
-          '/photo.png/@@images/image/preview 400w',
-          '/photo.png/@@images/image/mini 200w',
-          '/photo.png/@@images/image/thumb 128w',
-          '/photo.png/@@images/image/tile 64w',
-          '/photo.png/@@images/image/icon 32w',
           '/photo.png/@@images/image/listing 16w',
+          '/photo.png/@@images/image/icon 32w',
+          '/photo.png/@@images/image/tile 64w',
+          '/photo.png/@@images/image/thumb 128w',
+          '/photo.png/@@images/image/mini 200w',
+          '/photo.png/@@images/image/preview 400w',
+          '/photo.png/@@images/image/large 768w',
         ],
       });
     });

From 4d764ca26c80f8e05e6a82fa7dd9b32c8b9c5d59 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Mon, 9 May 2022 15:28:25 +0200
Subject: [PATCH 44/45] handle minSize in getImageAttributes

---
 src/components/theme/Image/Image.jsx |  4 ++++
 src/helpers/Image/Image.js           | 13 +++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/theme/Image/Image.jsx b/src/components/theme/Image/Image.jsx
index 0d683be50a..cba292b6fe 100644
--- a/src/components/theme/Image/Image.jsx
+++ b/src/components/theme/Image/Image.jsx
@@ -84,6 +84,10 @@ const Image = ({
 
           let add = addable(s);
 
+          if (!add && addable(srcSet[index - 1])) {
+            add = true; //add the next item grather then imageRef width, to avoid less quality
+          }
+
           return add;
         })
         .join(', '),
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index de02c9b267..c3ea1d9353 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -35,14 +35,19 @@ export const getImageAttributes = (
     imageField = 'image',
     maxSize = DEFAULT_MAX_SIZE,
     useOriginal = false,
+    minSize = 0,
   } = {},
 ) => {
   const imageScales = config.settings.imageScales;
-  const minSize = Object.keys(imageScales).reduce((minSize, scale) => {
-    if (!minSize || imageScales[scale] < imageScales[minSize]) {
+
+  const minScale = Object.keys(imageScales).reduce((minScale, scale) => {
+    if (!minScale || imageScales[scale] < imageScales[minScale]) {
+      if (minSize > 0 && minSize > imageScales[scale]) {
+        return minScale;
+      }
       return scale;
     }
-    return minSize;
+    return minScale;
   }, null);
 
   let attrs = {};
@@ -94,7 +99,7 @@ export const getImageAttributes = (
       let baseUrl = `${flattenToAppURL(image.split('/@@images')[0])}${
         image.endsWith('/') ? '' : '/'
       }@@images/${imageField}`;
-      attrs.src = `${baseUrl}/${minSize}`;
+      attrs.src = `${baseUrl}/${minScale}`;
 
       attrs.srcSet = Object.keys(imageScales)
         .sort((a, b) => {

From a07bc4c13ea948e7aacddf47dab623b072939cd2 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Wed, 22 Jun 2022 15:35:55 +0200
Subject: [PATCH 45/45] fix: fixed src of imageObject

---
 .../__snapshots__/View.test.jsx.snap          |  4 ++--
 .../Image/__snapshots__/Image.test.jsx.snap   | 20 +++++++++----------
 .../__snapshots__/ImageView.test.jsx.snap     |  4 ++--
 src/helpers/Image/Image.js                    |  2 +-
 src/helpers/Image/Image.test.js               |  6 +++---
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
index def7cd8faa..e47718b247 100644
--- a/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/LeadImage/__snapshots__/View.test.jsx.snap
@@ -11,7 +11,7 @@ exports[`renders a view image component 1`] = `
       alt=""
       className=""
       role="img"
-      src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      src="/test-images/@@images/image/listing"
       style={null}
     />
   </picture>
@@ -20,7 +20,7 @@ exports[`renders a view image component 1`] = `
       Object {
         "__html": "
               <img
-                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                src=\\"/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=\\"\\"
diff --git a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
index dfb150247d..309763bd87 100644
--- a/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
+++ b/src/components/theme/Image/__snapshots__/Image.test.jsx.snap
@@ -73,7 +73,7 @@ Array [
       alt="Photo"
       className="photo-image"
       role="presentation"
-      src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      src="/test-images/@@images/image/listing"
       style={null}
     />
   </picture>,
@@ -82,7 +82,7 @@ Array [
       Object {
         "__html": "
               <img
-                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                src=\\"/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=\\"Photo\\"
                 class=\\"photo-image\\"
@@ -106,7 +106,7 @@ Array [
       alt="Photo"
       className="photo-image"
       role="img"
-      src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      src="/test-images/@@images/image/listing"
       style={null}
     />
   </picture>,
@@ -115,7 +115,7 @@ Array [
       Object {
         "__html": "
               <img
-                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                src=\\"/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=\\"Photo\\"
                 class=\\"photo-image\\"
@@ -139,7 +139,7 @@ Array [
       alt="Photo"
       className="photo-image"
       role="presentation"
-      src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      src="/test-images/@@images/image/listing"
       style={null}
       width={200}
     />
@@ -149,7 +149,7 @@ Array [
       Object {
         "__html": "
               <img
-                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                src=\\"/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\\"
                 alt=\\"Photo\\"
                 class=\\"photo-image\\"
@@ -173,7 +173,7 @@ Array [
       alt="Photo"
       className="photo-image"
       role="presentation"
-      src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      src="/test-images/@@images/image/listing"
       style={null}
     />
   </picture>,
@@ -182,7 +182,7 @@ Array [
       Object {
         "__html": "
               <img
-                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                src=\\"/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=\\"Photo\\"
                 class=\\"photo-image\\"
@@ -206,7 +206,7 @@ Array [
       alt="Photo"
       className="photo-image"
       role="img"
-      src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+      src="/test-images/@@images/image/listing"
       style={null}
     />
   </picture>,
@@ -215,7 +215,7 @@ Array [
       Object {
         "__html": "
               <img
-                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                src=\\"/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=\\"Photo\\"
                 class=\\"photo-image\\"
diff --git a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
index 5b648d9d78..f64071f74a 100644
--- a/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
+++ b/src/components/theme/View/__snapshots__/ImageView.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`renders an image view component 1`] = `
       <img
         alt="Hello World!"
         role="img"
-        src="http://localhost:8080/Plone/test-images/@@images/image/listing"
+        src="/test-images/@@images/image/listing"
         style={null}
       />
     </picture>
@@ -32,7 +32,7 @@ exports[`renders an image view component 1`] = `
         Object {
           "__html": "
               <img
-                src=\\"http://localhost:8080/Plone/test-images/@@images/image/listing\\"
+                src=\\"/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=\\"Hello World!\\"
                 class=\\"\\"
diff --git a/src/helpers/Image/Image.js b/src/helpers/Image/Image.js
index c3ea1d9353..b5de6c6c6e 100644
--- a/src/helpers/Image/Image.js
+++ b/src/helpers/Image/Image.js
@@ -75,7 +75,7 @@ export const getImageAttributes = (
         });
 
       const scale = sortedScales[0];
-      attrs.src = scale?.download ?? image.download;
+      attrs.src = flattenToAppURL(scale?.download ?? image.download);
       attrs.aspectRatio = Math.round((image.width / image.height) * 100) / 100;
 
       if (maxSize !== DEFAULT_MAX_SIZE) {
diff --git a/src/helpers/Image/Image.test.js b/src/helpers/Image/Image.test.js
index c6fbb75f73..a443f737da 100644
--- a/src/helpers/Image/Image.test.js
+++ b/src/helpers/Image/Image.test.js
@@ -79,7 +79,7 @@ describe('Image', () => {
 
     it('returns srcset from object', () => {
       expect(getImageAttributes(ploneImage)).toEqual({
-        src: 'http://localhost:8080/Plone/test-images/@@images/image/listing',
+        src: '/test-images/@@images/image/listing',
         srcSet: [
           '/test-images/@@images/image/listing 16w',
           '/test-images/@@images/image/icon 32w',
@@ -95,7 +95,7 @@ describe('Image', () => {
 
     it('returns srcset from object with maxSize', () => {
       expect(getImageAttributes(ploneImage, { maxSize: 200 })).toEqual({
-        src: 'http://localhost:8080/Plone/test-images/@@images/image/listing',
+        src: '/test-images/@@images/image/listing',
         srcSet: [
           '/test-images/@@images/image/listing 16w',
           '/test-images/@@images/image/icon 32w',
@@ -111,7 +111,7 @@ describe('Image', () => {
 
     it('returns srcset from url with original included', () => {
       expect(getImageAttributes(ploneImage, { useOriginal: true })).toEqual({
-        src: 'http://localhost:8080/Plone/test-images/@@images/image/listing',
+        src: '/test-images/@@images/image/listing',
         srcSet: [
           '/test-images/@@images/image/listing 16w',
           '/test-images/@@images/image/icon 32w',