fix: new condition to show alt and title attr inside ListingImage

RedTurtle · Jan 9, 2025 · 022d685 · 022d685
1 parent abf980d
commit 022d685
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 13 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx
@@ -61,7 +61,9 @@ const CardWithImageDefault = (props) => {
     : getEventRecurrenceMore(item, isEditMode);
   const listingText = show_description ? <ListingText item={item} /> : null;
 
-  const image = ListingImage({ item, showTitleAttr: false });
+  const image = ListingImage({
+    item,
+  });
 
   const showImage =
     (index < imagesToShow || always_show_image) && image != null;

diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx
@@ -9,31 +9,43 @@ const ListingImage = ({
   showDefault = false,
   className = 'listing-image',
   responsive = true,
-  showTitleAttr = true,
+  showTitleAttr = !!(
+    (item.hasPreviewImage && item.preview_caption) ||
+    (item.image_field && item.image_caption)
+  ), // show title only if the listing image have an image and caption
   sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
   noWrapLink = false,
   ...imageProps
 }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
+
+  const imageCaption = item.hasPreviewImage
+    ? item.preview_caption
+      ? item.preview_caption
+      : ''
+    : item.image_field
+    ? item.image_caption
+      ? item.image_caption
+      : ''
+    : '';
+
   let commonImageProps = {
     item,
     'aria-hidden': imageProps.alt || item.title ? false : true,
-    alt: imageProps.alt ?? item.title ?? '',
+    alt: imageCaption,
     role: imageProps.alt || item.title ? '' : 'presentation',
     className,
     loading,
     responsive,
     sizes,
     ...imageProps,
   };
+
+  // show title attribute if preview_caption or image_caption is present for the alt text
   if (showTitleAttr) {
     commonImageProps = {
       ...commonImageProps,
-      title: item.hasPreviewImage
-        ? item.preview_caption || item.title
-        : item.image_field
-        ? item.image_caption || item.title
-        : '',
+      title: imageCaption,
     };
   }
   // photogallery needs to check for null image

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -60,7 +60,6 @@ const CompleteBlockLinksTemplate = (props) => {
               item,
               className: '',
               sizes: '60px',
-              alt: item.title,
             });
 
             const BlockExtraTags = getComponentWithFallback({

diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx
@@ -71,7 +71,6 @@ const ContentInEvidenceTemplate = (props) => {
             className: 'item-image',
             loading: 'eager',
             sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
-            showTitleAttr: false,
           });
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({

diff --git a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx
@@ -58,7 +58,6 @@ const GridGalleryTemplate = ({
             let image = ListingImage({
               item,
               className: '',
-              showTitleAttr: false,
             });
             let scale = null;
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {

diff --git a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx
@@ -90,7 +90,6 @@ const InEvidenceTemplate = (props) => {
             const image = ListingImage({
               item,
               sizes: '(max-width:320px) 200px, 300px',
-              showTitleAttr: false,
             });
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;

diff --git a/src/components/ItaliaTheme/Cards/CardPersona.jsx b/src/components/ItaliaTheme/Cards/CardPersona.jsx
@@ -23,7 +23,6 @@ export const CardPersona = ({
   const image = ListingImage({
     item,
     sizes: '130px',
-    showTitleAttr: false,
   });
 
   const hasImage = image !== null && showImage;