design-comuni-plone-theme 11.26.4 → 11.26.5

package/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>

package/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,7 +100,7 @@ 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}
@@ -111,10 +108,14 @@ const InEvidenceTemplate = (props) => {
               />
             ) : (
               <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} />
                       )}

package/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,7 +152,7 @@ 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'
@@ -164,7 +164,8 @@ const PhotogalleryTemplate = ({
                       : '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>

package/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx

@@ -218,12 +218,15 @@ const SliderTemplate = ({
 
             <Slider {...settings} ref={slider}>
               {items.map((item, index) => {
-                const image = ListingImage({
-                  item,
-                  loading: index === 0 ? 'eager' : 'lazy',
-                  sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
-                  critical: true,
-                });
+                const image = (
+                  <ListingImage
+                    item={item}
+                    loading={index === 0 ? 'eager' : 'lazy'}
+                    sizes={`max-width(991px) 620px, ${1300 / nSlidesToShow}px`}
+                    critical
+                    showDefault
+                  />
+                );
                 const nextIndex = index < items.length - 1 ? index + 1 : null;
                 const prevIndex = index > 0 ? index - 1 : null;
                 return (

package/src/components/ItaliaTheme/Blocks/Listing/SmallBlockLinksTemplate.jsx

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { Container, Row, Col } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
-
 import {
   ListingLinkMore,
   ListingImage,
@@ -38,34 +37,31 @@ const SmallBlockLinksTemplate = ({
         )}
         <Row className="items">
           {items.map((item, index) => {
-            const image = ListingImage({
-              item,
-              sizes: '(max-width:575px) 520px, 200px',
-              style: {},
-              alt: item.title,
-              noWrapLink: true,
-            });
-
             return (
               <Col
                 md="3"
                 key={item['@id']}
                 className="col-item col-sm-4 col-lg-2"
               >
-                {image && (
-                  <div className="center-image-card">
-                    <UniversalLink
-                      item={!isEditMode ? item : null}
-                      href={isEditMode ? '#' : ''}
-                      className="img-link"
-                      overrideMarkSpecialLinks={
-                        override_links_accessibility_marker
-                      }
-                    >
-                      {image}
-                    </UniversalLink>
-                  </div>
-                )}
+                <div className="center-image-card">
+                  <UniversalLink
+                    item={!isEditMode ? item : null}
+                    href={isEditMode ? '#' : ''}
+                    className="img-link"
+                    overrideMarkSpecialLinks={
+                      override_links_accessibility_marker
+                    }
+                  >
+                    <ListingImage
+                      item={item}
+                      sizes="(max-width:575px) 520px, 200px"
+                      style={{}}
+                      alt={item.title}
+                      noWrapLink
+                      showDefault
+                    />
+                  </UniversalLink>
+                </div>
               </Col>
             );
           })}

package/src/components/ItaliaTheme/Cards/CardPersona.jsx

@@ -8,6 +8,7 @@ import {
   ListingCategory,
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 
 export const CardPersona = ({
   item,
@@ -20,13 +21,7 @@ export const CardPersona = ({
   type,
   isEditMode,
 }) => {
-  const image = ListingImage({
-    item,
-    sizes: '130px',
-    showTitleAttr: false,
-  });
-
-  const hasImage = image !== null && showImage;
+  const hasImage = contentHasImage(item) && showImage;
 
   return (
     <Card
@@ -58,7 +53,9 @@ export const CardPersona = ({
           )}
         </CardBody>
         {hasImage && (
-          <div className="card-image card-image-rounded">{image}</div>
+          <div className="card-image card-image-rounded">
+            <ListingImage item={item} sizes="130px" showTitleAttr={false} />
+          </div>
         )}
       </div>
     </Card>

package/src/components/ItaliaTheme/View/Commons/GenericCard.jsx

@@ -4,7 +4,10 @@ import cx from 'classnames';
 
 import { UniversalLink } from '@plone/volto/components';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { getCalendarDate } from 'design-comuni-plone-theme/helpers';
+import {
+  getCalendarDate,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import {
   Icon,
   CardCategory,
@@ -48,23 +51,21 @@ const GenericCard = ({
     </>
   );
   const cooked_image_field = image_field || item.image_field;
-  // (item.preview_image ? 'preview_image' : 'image');
-  const image =
-    showimage &&
-    item &&
-    Image({
-      item: item,
-      imageField: cooked_image_field,
-      alt: '',
-      title: item.title,
-    });
+  const showImage = showimage && contentHasImage(item) && cooked_image_field;
 
   return item ? (
-    image ? (
+    showImage ? (
       <div className={cx('genericcard card shadow rounded mt-3')}>
         <div className="img-responsive-wrapper">
           <div className="img-responsive img-responsive-panoramic">
-            <figure className="img-wrapper">{image}</figure>
+            <figure className="img-wrapper">
+              <Image
+                item={item}
+                imageField={cooked_image_field}
+                alt={''}
+                title={item.title}
+              />
+            </figure>
           </div>
         </div>
         <div className="card-body px-4">

package/src/components/ItaliaTheme/View/Commons/LocationItem.jsx

@@ -8,6 +8,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -41,24 +42,25 @@ const LocationItem = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, sizes: '80px', loading: 'lazy' });
+  const showImage = contentHasImage(location) && location['@type'] === 'Venue';
   const address = ['street', 'city', 'zip_code']
     .map((key) => location?.[key])
     .filter(Boolean)
     .join(' - ');
 
   return location ? (
-    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune p-4 rounded location-item">
-      {show_icon && (
-        <Icon
-          icon={'it-pin'}
-          title={intl.formatMessage(messages.icona_luoghi)}
-        />
-      )}
+    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune pt-4 pb-4 ps-3 pe-4 rounded location-item">
       <div className="card-body">
         <div className="card-title h5 venue-card-title">
           {(location.nome_sede || location.title) && (
             <>
+              {show_icon && (
+                <Icon
+                  icon={'it-pin'}
+                  title={intl.formatMessage(messages.icona_luoghi)}
+                  className="pin-icon"
+                />
+              )}
               {location['@type'] === 'Venue' ||
               (location['@type'] === 'UnitaOrganizzativa' &&
                 show_title_link) ? (
@@ -104,7 +106,11 @@ const LocationItem = ({
           )}
         </div>
       </div>
-      {image && <div className="avatar size-xl">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={location} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   ) : (
     ''

package/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx

@@ -3,6 +3,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 /**
@@ -24,8 +25,7 @@ const OfficeCard = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    showimage && Image({ item: office, sizes: '80px', loading: 'lazy' });
+  const showImage = showimage && contentHasImage(office);
 
   return (
     <div
@@ -74,7 +74,11 @@ const OfficeCard = ({
 
         {children && <div className="card-text">{children}</div>}
       </div>
-      {image && <div className="image-container">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={office} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   );
 };

package/src/components/ItaliaTheme/View/Commons/Sponsors.jsx

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import { searchContent, resetSearchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
@@ -23,19 +24,22 @@ const messages = defineMessages({
  */
 const Sponsor = ({ item }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image =
-    item?.image &&
-    Image({
-      item: item,
-      sizes: '600px',
-      loading: 'lazy',
-      className: 'img-fluid',
-      alt: item.image.filename ?? item.title,
-    });
+  const showImage = contentHasImage(item);
+
   return item ? (
     <div className="sponsor-item">
       <UniversalLink href={item.remoteUrl}>
-        {image ? image : item.title}
+        {showImage ? (
+          <Image
+            item={item}
+            sizes="600px"
+            loading="lazy"
+            className="img-fluid"
+            alt={item.image.filename ?? item.title}
+          />
+        ) : (
+          item.title
+        )}
       </UniversalLink>
     </div>
   ) : null;

package/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx

@@ -2,6 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import config from '@plone/volto/registry';
 
@@ -26,13 +27,15 @@ const messages = defineMessages({
 const Location = ({ location, show_icon }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, loading: 'lazy', sizes: '80px' });
+  const showImage = contentHasImage(location);
   return (
     location && (
-      <div className="card card-teaser shadow border-left-card mt-3 rounded location-item">
-        {show_icon && <Icon icon={'it-pin'} />}
+      <div className="card card-teaser shadow border-left-card mt-3 card-small rounded location-item">
         <div className="card-body">
-          <div className="card-title h5">{location.title}</div>
+          <div className="card-title h5">
+            {show_icon && <Icon icon={'it-pin'} />}
+            {location.title}
+          </div>
           <div className="card-text">
             {(location.street || location.zip_code) && (
               <p>
@@ -51,7 +54,11 @@ const Location = ({ location, show_icon }) => {
             </p>
           </div>
         </div>
-        {image && <div className="avatar size-xl">{image}</div>}
+        {showImage && (
+          <div className="avatar size-lg">
+            <Image item={location} loading="lazy" sizes="80px" />
+          </div>
+        )}
       </div>
     )
   );
@@ -65,7 +72,7 @@ const Location = ({ location, show_icon }) => {
  */
 const VenuesSmall = ({ venues, show_icon }) => {
   return venues ? (
-    <div className="card-wrapper card-teaser-wrapper">
+    <div className="card-wrapper card-teaser-wrapper align-items-stretch">
       {venues.map((item) => (
         <Location key={item['@id']} location={item} show_icon={show_icon} />
       ))}

package/src/components/ItaliaTheme/View/EventoView/EventoContatti.jsx

@@ -5,9 +5,10 @@ import {
   RichTextSection,
   ContactsCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
-import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
-import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+
 import EventoContattiSupportatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiSupportatoDa';
+import EventoOrganizzatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa';
+import EventoPatrocinatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa';
 
 const messages = defineMessages({
   contatti: {
@@ -31,14 +32,14 @@ const EventoContatti = ({ content }) => {
         <ContactsCard contact={contact} key={contact['@id']} />
       ))}
 
-      {/* ---organizzato da esterno */}
-      <EventoContattiOrganizzatoreEsterno content={content} />
-
-      {/* ---contatti interno */}
-      <EventoContattiOrganizzatoreInterno content={content} />
+      {/* ---organizzato da */}
+      <EventoOrganizzatoDa content={content} />
 
       {/* ---supportato da */}
       <EventoContattiSupportatoDa content={content} />
+
+      {/* ---patrocinato da */}
+      <EventoPatrocinatoDa content={content} />
     </RichTextSection>
   ) : null;
 };

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody } from 'design-react-kit';
 import {
   RichText,
@@ -7,22 +6,12 @@ import {
   ContactLink,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzatore: {
-    id: 'organizzatore',
-    defaultMessage: 'Organizzatore',
-  },
-});
-
 const EventoContattiOrganizzatoreEsterno = ({ content }) => {
-  const intl = useIntl();
-
   return richTextHasContent(content?.organizzato_da_esterno) ||
     content?.telefono ||
     content?.email ||
     content?.fax ? (
-    <div className="mb-5 mt-3">
-      <h3 className="h5">{intl.formatMessage(messages.organizzatore)}</h3>
+    <div className="mb-5">
       <Card
         className="card card-teaser rounded shadow mt-3"
         noWrapper={true}

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno.jsx

@@ -1,23 +1,12 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import {
   richTextHasContent,
   OfficeCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzato_da: {
-    id: 'organizzato_da',
-    defaultMessage: 'Organizzato da',
-  },
-});
-
 const EventoContattiOrganizzatoreInterno = ({ content }) => {
-  const intl = useIntl();
-
   return content?.organizzato_da_interno?.length > 0 ? (
-    <div className="mb-5">
-      <h3 className="h5">{intl.formatMessage(messages.organizzato_da)}</h3>
+    <div className="mb-3">
       {content?.organizzato_da_interno?.map((item, index) => (
         <OfficeCard
           margin_bottom={index < content?.organizzato_da_interno?.length - 1}

package/src/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
+
+const messages = defineMessages({
+  organizzato_da: {
+    id: 'organizzato_da',
+    defaultMessage: 'Organizzato da',
+  },
+});
+
+const EventoOrganizzatoDa = ({ content }) => {
+  const intl = useIntl();
+
+  return content?.organizzato_da_interno?.length > 0 ||
+    richTextHasContent(content?.organizzato_da_esterno) ||
+    content?.telefono ||
+    content?.email ||
+    content?.fax ? (
+    <div className="mb-5 mt-3">
+      <h3 className="h5 mb-3">{intl.formatMessage(messages.organizzato_da)}</h3>
+
+      {content?.organizzato_da_interno.length > 0 && (
+        <EventoContattiOrganizzatoreInterno content={content} />
+      )}
+
+      {(richTextHasContent(content?.organizzato_da_esterno) ||
+        content?.telefono ||
+        content?.email ||
+        content?.fax) && (
+        <EventoContattiOrganizzatoreEsterno content={content} />
+      )}
+    </div>
+  ) : null;
+};
+
+export default EventoOrganizzatoDa;

package/src/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Card, CardBody } from 'design-react-kit';
+
+import {
+  richTextHasContent,
+  RichText,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+const messages = defineMessages({
+  patrocinato_da: {
+    id: 'patrocinato_da',
+    defaultMessage: 'Patrocinato da',
+  },
+});
+
+const EventoPatrocinatoDa = ({ content }) => {
+  const intl = useIntl();
+  return richTextHasContent(content?.patrocinato_da) ? (
+    <div className="mb-5">
+      <h3 className="mt-4 patrocinato-da h5">
+        {intl.formatMessage(messages.patrocinato_da)}
+      </h3>
+      <Card
+        className="card card-teaser rounded shadow mt-3"
+        noWrapper={true}
+        tag="div"
+      >
+        <CardBody tag="div" className={'card-body pe-3'}>
+          <div className="mb-5">
+            <RichText data={content?.patrocinato_da} />
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  ) : null;
+};
+
+export default EventoPatrocinatoDa;