fix: added condition to set the listing image caption

RELEASE.md

@@ -41,6 +41,21 @@
 - ...
  -->
 
+## Versione X.X.X (dd/mm/yyyy)
+
+### Migliorie
+
+- ...
+
+### Novità
+
+- ...
+
+### Fix
+
+- Aggiunta una nuova condizione per la corretta compilazione dell’attributo **alt** e **title** nelle immagini dei blocchi listing. Ora questi attributi utilizzano correttamente i testi delle didascalie dell'immagine di anteprima o testata se impostati. L'attributo **title** viene valorizzato solo se esiste una didascalia associata all’immagine.
+
+- Rimosso l’attributo **showTitleAttr** dal componente _ListingImage_ utilizzato nei template del blocco listing: card con immagine, persona, blocco link completo, contenuto in evidenza, gallery a griglia, e in evidenza. Ora gli attributi **title** e **alt** vengono calcolati e impostati direttamente dal componente _ListingImage_.
 ## Versione 11.26.3 (15/01/2025)
 
 ### Fix

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;

src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx

@@ -9,25 +9,45 @@ const ListingImage = ({
   showDefault = false,
   className = 'listing-image',
   responsive = true,
-  showTitleAttr = true,
   sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
   noWrapLink = false,
   ...imageProps
 }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
+
+  //Verifies if the item has a preview image or an header image
+  const showTitleAttr = !!(
+    (item.hasPreviewImage && item.preview_caption) ||
+    (item.image_field && item.image_caption)
+  );
+
+  //Verifies with caption to show as alt and title text
+  const imageCaption =
+    item.hasPreviewImage && item.preview_caption
+      ? item.preview_caption
+      : item.image_field && item.image_caption
+      ? item.image_caption
+      : null;
+
   let commonImageProps = {
     item,
     'aria-hidden': imageProps.alt || item.title ? false : true,
-    alt: imageProps.alt ?? item.title ?? '',
+    alt: imageProps.alt ?? imageCaption ?? '',
     role: imageProps.alt || item.title ? '' : 'presentation',
     className,
     loading,
     responsive,
     sizes,
     ...imageProps,
   };
-  if (showTitleAttr)
-    commonImageProps = { ...commonImageProps, title: item.title };
+
+  // show title attribute if preview_caption or image_caption is present for the alt text
+  if (showTitleAttr) {
+    commonImageProps = {
+      ...commonImageProps,
+      title: imageCaption,
+    };
+  }
   // photogallery needs to check for null image
   // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
 

src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx

@@ -60,8 +60,6 @@ const CompleteBlockLinksTemplate = (props) => {
               item,
               className: '',
               sizes: '60px',
-              showTitleAttr: false,
-              alt: item.title,
             });
 
             const BlockExtraTags = getComponentWithFallback({

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({

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) {

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;

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;