feat: use image_scales metadata (#14)

* feat: use image_scales metadata * Update helpers.js
RedTurtle · Dec 16, 2022 · 12a4c2e · 12a4c2e
1 parent 9821d63
commit 12a4c2e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -21,7 +21,7 @@ services:
       - traefik.http.routers.backend.rule=Host(`localhost`) && PathPrefix(`/++api++`)
       - traefik.http.routers.backend.service=plone-backend
       - "traefik.http.middlewares.backend.replacepathregex.regex=^/\\+\\+api\\+\\+($$|/.*)"
-      - "traefik.http.middlewares.backend.replacepathregex.replacement=/VirtualHostBase/http/localhost/Plone/++api++/VirtualHostRoot/$$1"
+      - "traefik.http.middlewares.backend.replacepathregex.replacement=/VirtualHostBase/http/localhost/Plone/++api++/VirtualHostRoot$$1"
       - traefik.http.routers.backend.middlewares=gzip,backend
 
   frontend:

diff --git a/src/components/Image/Image.jsx b/src/components/Image/Image.jsx
@@ -123,7 +123,7 @@ const Image = ({
           alt={alt}
           className={className}
           role={role}
-          // removed because this is for the placeholder.Lazy loading is made from intersectionObserver
+          // removed because this is for the placeholder. Lazy loading is made using intersectionObserver
           // loading={critical ? 'eager' : 'lazy'}
           width={width}
           height={height}

diff --git a/src/components/Image/helpers.js b/src/components/Image/helpers.js
@@ -1,4 +1,5 @@
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+
 import config from '@plone/volto/registry';
 
 const getImageType = (image) => {
@@ -50,8 +51,8 @@ export const getImageAttributes = (
     return minScale;
   }, null);
 
-  let attrs = {};
-  let imageType = getImageType(image);
+  const attrs = {};
+  const imageType = getImageType(image);
 
   switch (imageType) {
     case 'svg':
@@ -61,7 +62,7 @@ export const getImageAttributes = (
     // Scales object from Plone restapi
     // ideal use of Plone images
     case 'imageObject':
-      let sortedScales = Object.values(image.scales)
+      const sortedScales = Object.values(image.scales)
         .filter((scale) => scale.width <= maxSize)
         .filter(
           (scale, index, array) =>
@@ -77,8 +78,10 @@ export const getImageAttributes = (
       const scale = sortedScales[0];
       attrs.src = flattenToAppURL(scale?.download ?? image.download);
       attrs.aspectRatio = Math.round((image.width / image.height) * 100) / 100;
+      attrs.width = image.width;
+      attrs.height = image.height;
 
-      if (maxSize !== DEFAULT_MAX_SIZE) {
+      if (maxSize !== DEFAULT_MAX_SIZE && sortedScales.length > 0) {
         const maxScale = sortedScales[sortedScales.length - 1];
         attrs.width = maxScale.width;
         attrs.height = maxScale.height;
@@ -121,6 +124,5 @@ export const getImageAttributes = (
       attrs.src = typeof image === 'string' ? image : null;
       break;
   }
-
   return attrs;
 };
diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx
@@ -20,7 +20,11 @@ const ListingImage = ({
     return (
       <Image
         className={className}
-        image={item[item.image_field] || item.image || item['@id']}
+        image={
+          item.image_scales?.[item.image_field]?.[0] ||
+          item.image ||
+          item['@id']
+        }
         aria-hidden="true"
         alt={item.title}
         title={item.title}