Fix slider images not loading

plone · Sep 22, 2023 · a7cd9d3 · a7cd9d3
1 parent 4caf8cd
commit a7cd9d3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -148,7 +148,7 @@
     "@kitconcept/volto-export": "1.1.0",
     "@kitconcept/volto-heading-block": "2.4.0",
     "@kitconcept/volto-separator-block": "4.0.0",
-    "@kitconcept/volto-slider-block": "4.3.0",
+    "@kitconcept/volto-slider-block": "5.1.1",
     "@plone-collective/volto-authomatic": "1.3.0",
     "@plone/volto": "17.0.0-alpha.26",
     "date-fns": "2.30.0",

diff --git a/...olto-plonede/src/customizations/@kitconcept/volto-slider-block/components/DefaultBody.jsx b/...olto-plonede/src/customizations/@kitconcept/volto-slider-block/components/DefaultBody.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { getTeaserImageURL } from '@kitconcept/volto-slider-block/helpers';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { Icon, MaybeWrap, UniversalLink } from '@plone/volto/components';
 import { Input, Button, Message } from 'semantic-ui-react';
 import cx from 'classnames';
@@ -48,10 +46,7 @@ const SliderBody = ({
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
 
-  const hasImageComponent = config.getComponent('Image').component;
   const Image = config.getComponent('Image').component || DefaultImage;
-  const defaultImageSrc =
-    href && flattenToAppURL(getTeaserImageURL({ href, image }));
 
   const handleClick = () => {
     openObjectBrowser({
@@ -120,15 +115,19 @@ const SliderBody = ({
             target={data.openLinkInNewTab ? '_blank' : null}
             tabIndex="-1"
           >
-            {(href?.hasPreviewImage || image) && (
+            {/* START CUSTOMSTARTIZATION */}
+            {(href?.hasPreviewImage || href.image_field || image) && (
               <div className="highlight-image-wrapper gradient">
                 <Image
-                  src={hasImageComponent ? href : defaultImageSrc}
+                  item={image || href}
+                  imageField={image ? image.image_field : href.image_field}
                   alt=""
                   loading="lazy"
+                  responsive={true}
                 />
               </div>
             )}
+            {/* END CUSTOMIZATION */}
             <div className="teaser-item-title fix-width-issue">
               <div className="title">
                 {data?.head_title && (

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2587,16 +2587,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@kitconcept/volto-slider-block@npm:4.3.0":
-  version: 4.3.0
-  resolution: "@kitconcept/volto-slider-block@npm:4.3.0"
+"@kitconcept/volto-slider-block@npm:5.1.1":
+  version: 5.1.1
+  resolution: "@kitconcept/volto-slider-block@npm:5.1.1"
   dependencies:
     deepmerge: 4.2.2
     react-slick: 0.29.0
     slick-carousel: 1.8.1
   peerDependencies:
-    "@plone/volto": ^16.1.0
-  checksum: 16ebddcc3cd5c85d59e06123123a4738f80ba7f92ca7351a3270c41a1c7f8a4b21365ac7a0d9ebbda729dc539377dc215c8ab2423788578529c86d106f1cb91e
+    "@plone/volto": ^17.0.0-alpha.21
+  checksum: b871a72da958fcdf766e6ef4a7375059787c41d23112c9db879e08d5cf203714c7d577bbccea3443121e69444c8d75f04f65505240b2b03049ede05195ee5d62
   languageName: node
   linkType: hard
 
@@ -11862,7 +11862,7 @@ __metadata:
     "@kitconcept/volto-export": 1.1.0
     "@kitconcept/volto-heading-block": 2.4.0
     "@kitconcept/volto-separator-block": 4.0.0
-    "@kitconcept/volto-slider-block": 4.3.0
+    "@kitconcept/volto-slider-block": 5.1.1
     "@plone-collective/volto-authomatic": 1.3.0
     "@plone/scripts": ^3.0.0
     "@plone/volto": 17.0.0-alpha.26