fix: added condition to set the listing image caption (#851)

* fix: added condition to set the listing image caption * fix: new condition to show alt and title attr inside ListingImage * chore: release.md * fix: condition changed * fix: showTitleAttr declared inside ListingImage * fix: file cleaned * chore: comments * Update RELEASE.md Co-authored-by: Giulia Ghisini <[email protected]> * fix: image_filed removed as condition to show title/alt --------- Co-authored-by: Giulia Ghisini <[email protected]> Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Feb 25, 2025 · 63c8dd7 · 63c8dd7
1 parent ff1f093
commit 63c8dd7
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 12 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -53,6 +53,8 @@
 
 ### 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_.
 - Condizione per la Label per i select ripristinata.
 
 ## Versione 11.26.5 (06/02/2025)

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx
@@ -106,7 +106,7 @@ const CardWithImageDefault = (props) => {
               })}
             >
               <div className="img-responsive img-responsive-panoramic">
-                <ListingImage item={item} showTitleAttr={false} />
+                <ListingImage item={item} />
                 {item['@type'] === 'Event' && (
                   <CardCalendar
                     start={item.start}

diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx
@@ -20,7 +20,6 @@ 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
@@ -46,19 +45,33 @@ const ListingImage = ({
     } else return null;
   }
   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);
+
+  //Verifies with caption to show as alt and title text
+  const imageCaption =
+    item.hasPreviewImage && item.preview_caption ? item.preview_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,
+    };
+  }
 
   return (
     <ListingImageWrapper item={item} noWrapLink={noWrapLink}>

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -86,7 +86,6 @@ const CompleteBlockLinksTemplate = (props) => {
                             item={item}
                             className=""
                             sizes="60px"
-                            showTitleAttr={false}
                             alt={item.title}
                           />
                         </div>

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

diff --git a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx
@@ -55,9 +55,10 @@ const GridGalleryTemplate = ({
         )}
         <div className="grid-gallery-grid">
           {items.map((item, index) => {
-            let image = (
-              <ListingImage item={item} className="" showTitleAttr={false} />
-            );
+            let image = ListingImage({
+              item,
+              className: '',
+            });
             let scale = null;
             let hasImage = contentHasImage(item);
             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
@@ -114,7 +114,6 @@ const InEvidenceTemplate = (props) => {
                       <ListingImage
                         item={item}
                         sizes="(max-width:320px) 200px, 300px"
-                        showTitleAttr={false}
                       />
                       {item['@type'] === 'Event' && (
                         <CardCalendar start={item.start} end={item.end} />

diff --git a/src/components/ItaliaTheme/Cards/CardPersona.jsx b/src/components/ItaliaTheme/Cards/CardPersona.jsx
@@ -54,7 +54,7 @@ export const CardPersona = ({
         </CardBody>
         {hasImage && (
           <div className="card-image card-image-rounded">
-            <ListingImage item={item} sizes="130px" showTitleAttr={false} />
+            <ListingImage item={item} sizes="130px" />
           </div>
         )}
       </div>