RedTurtle · pnicolli · Feb 6, 2025 · Jan 27, 2025 · Jan 28, 2025 · Feb 6, 2025
diff --git a/RELEASE.md b/RELEASE.md
@@ -41,12 +41,6 @@
 - ...
  -->
 
-## Versione x.x.x (xx/xx/xxxx)
-
-### Fix
-
-- a11y - Migliorata l'accessibilità in edit dei blocchi Contatti, Icone, Numeri
-
 ## Versione X.X.X (dd/mm/yyyy)
 
 ### Migliorie
@@ -55,17 +49,14 @@
 - Impostando degli heading all'interno delle sezioni di testo nei vari CT, gli stili sono ora coerenti con l'ordine corretto dei titoli utilizzati.
 - La sezione contatti del CT Evento è stata riorganizzata per una maggiore chiarezza e coerenza.
 
-### Novità
-
-- ...
-
 ### Fix
 
 - I bottoni del menu nel pannello di controllo dei cookies visualizzano correttamente le icone.
 - Gli argomenti nelle card con immagine sono allineati correttamente.
 - Sistemata l'opzione "Mostra i PDF in anteprima" dell template "Allegati" del blocco elenco, perchè non aveva alcun effetto.
 - Sistemata la visualizzazione del blocco griglia su mobile: disposti verticalmente ogni blocco della griglia
-
+- Sistemata la visualizzazione delle card con immagine in cui il contenuto rappresentato non ha un'immagine da mostrare.
+- a11y - Migliorata l'accessibilità in modifica dei blocchi Contatti, Icone, Numeri.
 
 ## Versione 11.26.3 (15/01/2025)
 

diff --git a/src/components/ImageWithErrors/ImageWithErrors.jsx b/src/components/ImageWithErrors/ImageWithErrors.jsx
@@ -11,7 +11,6 @@ const ImageWithErrors = ({ src, fallbackSrc = '', ...rest }) => {
       className,
       sizes,
     });
-
   let commonProps = { ...rest };
   const fallbackStyle = getFallbackImageStyle({
     src,

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx
@@ -21,6 +21,7 @@ import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
 
@@ -61,18 +62,17 @@ const CardWithImageDefault = (props) => {
     : getEventRecurrenceMore(item, isEditMode);
   const listingText = show_description ? <ListingText item={item} /> : null;
 
-  const image = ListingImage({ item, showTitleAttr: false });
-
-  const showImage =
-    (index < imagesToShow || always_show_image) && image != null;
+  const showImage = contentHasImage(
+    item,
+    index < imagesToShow || always_show_image,
+  );
   const category = getCategory(item, show_type, show_section, props);
   const topics = show_topics ? item.tassonomia_argomenti : null;
 
   const BlockExtraTags = getComponentWithFallback({
     name: 'BlockExtraTags',
     dependencies: ['CardWithImageDefault', item['@type']],
   }).component;
-
   const isEventAppointment =
     item?.parent?.['@type'] === 'Event' && item?.['@type'] === 'Event';
 
@@ -106,7 +106,7 @@ const CardWithImageDefault = (props) => {
               })}
             >
               <div className="img-responsive img-responsive-panoramic">
-                {image}
+                <ListingImage item={item} showTitleAttr={false} />
                 {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
@@ -1,8 +1,19 @@
 import { UniversalLink } from '@plone/volto/components';
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
+const ListingImageWrapper = ({ children, item, noWrapLink }) => {
+  return noWrapLink ? (
+    children
+  ) : (
+    <UniversalLink item={item} className="img-wrapper">
+      {children}
+    </UniversalLink>
+  );
+};
+
 const ListingImage = ({
   item = {},
   loading = 'lazy',
@@ -14,6 +25,26 @@ const ListingImage = ({
   noWrapLink = false,
   ...imageProps
 }) => {
+  if (!contentHasImage(item) && !imageProps?.image_field) {
+    if (showDefault) {
+      return (
+        <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+          <img
+            src={DefaultImageSVG}
+            alt=""
+            sizes={sizes}
+            aria-hidden={true}
+            role="presentation"
+            className="listing-image responsive"
+            style={{
+              minHeight: 'unset',
+              height: '100%',
+            }}
+          />
+        </ListingImageWrapper>
+      );
+    } else return null;
+  }
   const Image = config.getComponent({ name: 'Image' }).component;
   let commonImageProps = {
     item,
@@ -28,20 +59,11 @@ const ListingImage = ({
   };
   if (showTitleAttr)
     commonImageProps = { ...commonImageProps, title: item.title };
-  // photogallery needs to check for null image
-  // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null
-
-  const image = Image(commonImageProps);
-  const defaultImage = <img src={DefaultImageSVG} alt="" />;
-
-  if (image === null && !showDefault) return null;
 
-  return !noWrapLink ? (
-    <UniversalLink item={item} className="img-wrapper">
-      {image ?? defaultImage}
-    </UniversalLink>
-  ) : (
-    image ?? defaultImage
+  return (
+    <ListingImageWrapper item={item} noWrapLink={noWrapLink}>
+      <Image {...commonImageProps} />
+    </ListingImageWrapper>
   );
 };
 

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -19,7 +19,10 @@ import {
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { getComponentWithFallback } from 'design-comuni-plone-theme/helpers';
+import {
+  getComponentWithFallback,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
 import config from '@plone/volto/registry';
@@ -56,14 +59,7 @@ const CompleteBlockLinksTemplate = (props) => {
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              className: '',
-              sizes: '60px',
-              showTitleAttr: false,
-              alt: item.title,
-            });
-
+            const hasImage = contentHasImage(item);
             const BlockExtraTags = getComponentWithFallback({
               name: 'BlockExtraTags',
               dependencies: ['CompleteBlockLinksTemplate', item['@type']],
@@ -84,7 +80,17 @@ const CompleteBlockLinksTemplate = (props) => {
                     className={'no-external-if-link'}
                   >
                     <div className="d-flex">
-                      {image && <div className="image-container">{image}</div>}
+                      {hasImage && (
+                        <div className="image-container">
+                          <ListingImage
+                            item={item}
+                            className=""
+                            sizes="60px"
+                            showTitleAttr={false}
+                            alt={item.title}
+                          />
+                        </div>
+                      )}
                       <div>
                         <CardBody>
                           <CardTitle tag="h3" className="text-secondary">

diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx
@@ -23,6 +23,7 @@ import {
   getCalendarDate,
   getEventRecurrenceMore,
   getComponentWithFallback,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   ListingCategory,
@@ -66,13 +67,7 @@ const ContentInEvidenceTemplate = (props) => {
           const date = getCalendarDate(item, rrule.rrulestr);
           const eventRecurrenceMore = getEventRecurrenceMore(item, isEditMode);
           const listingText = <ListingText item={item} />;
-          const image = ListingImage({
-            item,
-            className: 'item-image',
-            loading: 'eager',
-            sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px',
-            showTitleAttr: false,
-          });
+          const hasImage = contentHasImage(item);
           const icon = getItemIcon(item);
           const BlockExtraTags = getComponentWithFallback({
             name: 'BlockExtraTags',
@@ -84,8 +79,16 @@ const ContentInEvidenceTemplate = (props) => {
 
           return (
             <Row key={item['@id']} className="content-in-evidence">
-              {image && (
-                <Col lg={{ size: 6, offset: 1, order: 2 }}>{image}</Col>
+              {hasImage && (
+                <Col lg={{ size: 6, offset: 1, order: 2 }}>
+                  <ListingImage
+                    item={item}
+                    className="item-image"
+                    loading="eager"
+                    sizes="(max-width:425px) 400px, (max-width:767px) 520px, 650px"
+                    showTitleAttr={false}
+                  />
+                </Col>
               )}
               <Col lg={{ size: 5, order: 1 }}>
                 <Card>

diff --git a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx
@@ -7,7 +7,7 @@ import {
   ListingLinkMore,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { defineMessages, useIntl } from 'react-intl';
-
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
@@ -55,12 +55,11 @@ const GridGalleryTemplate = ({
         )}
         <div className="grid-gallery-grid">
           {items.map((item, index) => {
-            let image = ListingImage({
-              item,
-              className: '',
-              showTitleAttr: false,
-            });
+            let image = (
+              <ListingImage item={item} className="" showTitleAttr={false} />
+            );
             let scale = null;
+            let hasImage = contentHasImage(item);
             if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {
               scale = 'great';
             }
@@ -83,6 +82,7 @@ const GridGalleryTemplate = ({
                   loading={critical ? 'eager' : 'lazy'}
                 />
               );
+              hasImage = true;
             }
 
             return (
@@ -94,7 +94,7 @@ const GridGalleryTemplate = ({
                   item={!isEditMode ? item : null}
                   href={isEditMode ? '#' : null}
                 >
-                  {image && (
+                  {hasImage && (
                     <picture className="volto-image responsive">
                       {image}
                     </picture>

diff --git a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx
@@ -23,6 +23,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  contentHasImage,
 } from 'design-comuni-plone-theme/helpers';
 import {
   CardCalendar,
@@ -87,11 +88,7 @@ const InEvidenceTemplate = (props) => {
             const listingText = show_description ? (
               <ListingText item={item} />
             ) : null;
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:320px) 200px, 300px',
-              showTitleAttr: false,
-            });
+            const hasImage = contentHasImage(item);
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;
 
@@ -103,18 +100,22 @@ const InEvidenceTemplate = (props) => {
               <CardPersona
                 item={item}
                 className="listing-item card-bg"
-                showImage={image ? true : false}
+                showImage={hasImage}
                 show_description={show_description}
                 icon={icon}
                 isEditMode={isEditMode}
                 key={index}
               />
             ) : (
               <Card key={index} className={cx('listing-item card-bg')}>
-                {index === 0 && image && (
+                {index === 0 && hasImage && (
                   <div className="img-responsive-wrapper">
                     <div className="img-responsive">
-                      {image}
+                      <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/Blocks/Listing/PhotogalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx
@@ -127,10 +127,10 @@ const PhotogalleryTemplate = ({
 
   const getCaption = (item) => item.description ?? item.rights ?? null;
 
-  const figure = (image, item) => {
+  const figure = (imageProps, item) => {
     return (
       <figure className="img-wrapper volto-image responsive">
-        {image}
+        <ListingImage {...imageProps} />
         {getCaption(item) && <figcaption>{getCaption(item)}</figcaption>}
       </figure>
     );
@@ -152,19 +152,20 @@ const PhotogalleryTemplate = ({
           <CarouselWrapper className="it-card-bg">
             <Slider {...settings} ref={slider}>
               {items.map((item, i) => {
-                const image = ListingImage({
+                const imageProps = {
                   item,
                   sizes: `(max-width:600px) 450px, (max-width:1024px) ${
                     items.length < 2 ? '1000' : '500'
                   }px, ${
                     items.length === 1
                       ? '1300'
                       : items.length === 2
-                        ? '650'
-                        : '450'
+                      ? '650'
+                      : '450'
                   }px`,
                   noWrapLink: true,
-                });
+                  showDefault: true,
+                };
                 return (
                   <SingleSlideWrapper
                     className={cx('', {
@@ -179,7 +180,7 @@ const PhotogalleryTemplate = ({
                         openLinkInNewTab={true}
                         title={intl.formatMessage(messages.viewImage)}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </UniversalLink>
                     ) : (
                       <a
@@ -204,7 +205,7 @@ const PhotogalleryTemplate = ({
                           messages.viewPreview,
                         )} ${item.title}`}
                       >
-                        {figure(image, item)}
+                        {figure(imageProps, item)}
                       </a>
                     )}
                   </SingleSlideWrapper>
-Original file line number
+Diff line change
@@ Expand Up @@
           className,
           sizes,
         });
       let commonProps = { ...rest };
       const fallbackStyle = getFallbackImageStyle({
         src,
@@ Expand Down @@