Use image scales from restapi refs#254622

src/PreviewImage.js

@@ -1,16 +1,11 @@
 // TODO: see if possible to replace with Volto's PreviewImage component
 import React from 'react';
 
+import { getImageScaleParams } from '@eeacms/volto-listing-block/helpers';
 import { Image, Label } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
 
 import DefaultImageSVG from './default-image.svg';
 
-const getSrc = (item, size) =>
-  flattenToAppURL(
-    `${item['@id']}/@@images/${item.image_field || 'image'}/${size}`,
-  );
-
 // TODO: do we still need volto-depiction compatibility?
 // import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 // const makeImage = (item, style) => (
@@ -42,10 +37,10 @@ function PreviewImage(props) {
     label,
     ...rest
   } = props;
-  const src = preview_image?.[0]
-    ? getSrc(preview_image[0], size)
-    : item.image_field
-    ? getSrc(item, size)
+  const params = preview_image?.[0]
+    ? getImageScaleParams(preview_image?.[0], size)
+    : item
+    ? getImageScaleParams(item, size)
     : DefaultImageSVG;
 
   return (
@@ -55,7 +50,13 @@ function PreviewImage(props) {
           {label.text}
         </Label>
       ) : null}
-      <Image src={preview_image_url || src} alt={item.title} {...rest} />
+      <Image
+        src={preview_image_url || params?.download}
+        alt={item.title}
+        {...rest}
+        width={params.width}
+        height={params.height}
+      />
     </>
   );
 }

src/blocks/Item/Edit.jsx

@@ -27,6 +27,7 @@ const Edit = (props) => {
     properties,
     onChangeBlock,
     onSelectBlock,
+    id,
   } = props;
   const { description } = data;
   const schema = React.useMemo(() => getSchema(props), [props]);
@@ -47,7 +48,7 @@ const Edit = (props) => {
 
   return (
     <>
-      <Item {...data} mode="edit">
+      <Item {...data} block={id} mode="edit">
         <SlateEditor
           index={index}
           properties={properties}

src/blocks/Item/Item.jsx

@@ -1,6 +1,11 @@
 import cx from 'classnames';
 import { Item as UiItem, Icon } from 'semantic-ui-react';
-import { getFieldURL } from '@eeacms/volto-listing-block/helpers';
+import {
+  getFieldURL,
+  getImageScaleParams,
+} from '@eeacms/volto-listing-block/helpers';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 function Item({
   assetType,
@@ -15,17 +20,23 @@ function Item({
   imageSize = 'big',
   meta,
   mode = 'view',
+  block,
+  image: imageUrl,
   ...props
 }) {
-  const image = getFieldURL(props.image);
+  const scaledImage = getImageScaleParams(imageUrl, imageSize);
+
+  const image = getFieldURL(imageUrl);
   return (
     <UiItem.Group unstackable className="row">
       <UiItem className={cx(theme)}>
         {assetType === 'image' && image && (
           <UiItem.Image
-            src={`${image}/@@images/image/${imageSize}`}
+            src={flattenToAppURL(scaledImage?.download)}
             className={cx('ui', imageSize, verticalAlign, 'aligned')}
             alt={header || 'Item image'}
+            width={scaledImage?.width}
+            height={scaledImage?.height}
           />
         )}
         {assetType === 'icon' && icon && (

src/blocks/Item/View.jsx

@@ -9,10 +9,11 @@ export const serializeText = (text) => {
 };
 
 const View = (props) => {
-  const { data = {} } = props;
+  const { data = {}, id } = props;
   return (
     <Item
       {...data}
+      block={id}
       description={data.description ? serializeText(data.description) : null}
     />
   );

src/blocks/Item/schema.js

@@ -35,6 +35,7 @@ const ItemBlockSchema = ({ data }) => {
       image: {
         title: 'Image',
         widget: 'attachedimage',
+        selectedItemAttrs: ['image_field', 'image_scales', '@type'],
       },
       imageSize: {
         title: 'Image size',

src/blocks/Listing/item-templates/ItemTemplates.test.jsx

@@ -14,6 +14,7 @@ describe('ItemTemplates', () => {
       description: 'Default listing description',
       meta: 'Default listing meta',
       EffectiveDate: '2023-10-05T08:21:00+02:00',
+      url: '/my-item-url',
     };
 
     const itemModel = {

src/blocks/Listing/item-templates/SearchItemTemplate.test.jsx

@@ -2,12 +2,13 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { SearchItemLayout } from './SearchItemTemplate';
 
-describe('SimpleItemTemplates', () => {
+describe('SearchItemTemplates', () => {
   it('renders correctly', () => {
     const item = {
       title: 'Search listing title',
       description: 'Search listing description',
       meta: 'Search listing meta',
+      url: '/my-item-url',
     };
 
     const itemModel = {

src/blocks/Listing/item-templates/__snapshots__/ItemTemplates.test.jsx.snap

@@ -16,7 +16,7 @@ exports[`ItemTemplates renders correctly 1`] = `
         <img
           alt="Default listing title"
           className="ui image"
-          src="default-image.svg"
+          src="/my-item-url/@@images/image/preview"
         />
       </div>
       <div

src/blocks/Listing/item-templates/__snapshots__/SearchItemTemplate.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SimpleItemTemplates renders correctly 1`] = `
+exports[`SearchItemTemplates renders correctly 1`] = `
 <div
   className="u-item listing-item result-item my-class"
 >
@@ -21,7 +21,7 @@ exports[`SimpleItemTemplates renders correctly 1`] = `
         <img
           alt="Search listing title"
           className="ui image"
-          src="default-image.svg"
+          src="/my-item-url/@@images/image/preview"
         />
       </div>
       <div

src/helpers.js

@@ -1,6 +1,7 @@
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
+import config from '@plone/volto/registry';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 
 export const getFieldURL = (data) => {
@@ -17,3 +18,57 @@ export const getFieldURL = (data) => {
   if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
   return url;
 };
+
+export function getImageScaleParams(image, size) {
+  const imageScale =
+    config.blocks.blocksConfig['teaser']?.imageScale || size || 'preview';
+
+  if (isString(image))
+    return isInternalURL(image)
+      ? { download: flattenToAppURL(`${image}/@@images/image/${imageScale}`) }
+      : { download: image };
+
+  if (image) {
+    if (isInternalURL(getFieldURL(image))) {
+      if (image?.image_scales?.[image?.image_field]) {
+        const scale =
+          image.image_scales[image.image_field]?.[0].scales?.[imageScale] ||
+          image.image_scales[image.image_field]?.[0];
+
+        const download = flattenToAppURL(
+          `${getFieldURL(image)}/${scale?.download}`,
+        );
+        const width = scale?.width;
+        const height = scale?.height;
+
+        return {
+          download,
+          width,
+          height,
+        };
+      } else if (image?.image?.scales) {
+        const scale = image.image?.scales?.[imageScale] || image.image;
+        const download = flattenToAppURL(scale?.download);
+        const width = scale?.width;
+        const height = scale?.height;
+
+        return {
+          download,
+          width,
+          height,
+        };
+      } else {
+        //fallback if we do not have scales
+        return {
+          download: flattenToAppURL(
+            `${getFieldURL(image)}/@@images/${
+              image.image_field || 'image'
+            }/${imageScale}`,
+          ),
+        };
+      }
+    } else {
+      return { download: getFieldURL(image) };
+    }
+  }
+}