Add missing placeholder image for person grid variation of a listing (#897)

Co-authored-by: Dante Álvarez <89805481+danalvrz@users.noreply.github.com>
Co-authored-by: Alok Kumar <ialokkumarsingh0@gmail.com>

Author: 3 people

frontend/packages/volto-light-theme/news/897.feature

@@ -0,0 +1 @@
+Add missing placeholder image for person grid variation of a listing @iRohitSingh

frontend/packages/volto-light-theme/src/components/Blocks/Listing/GridTemplate.jsx

@@ -42,16 +42,19 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
           if (item['@type'] === 'Person' && showProfileLinks !== undefined) {
             showLink = showProfileLinks && !isEditMode;
           }
-
+          const placeholderSrc =
+            config.settings.placeholderImages?.[item['@type']];
           const ItemBodyTemplate = (props) =>
             CustomItemBodyTemplate ? (
               <CustomItemBodyTemplate item={item} />
             ) : (
               <>
-                {item.image_field !== '' && (
+                {(item.image_field !== '' || placeholderSrc) && (
                   <Card.Image
                     className="item-image"
                     item={item}
+                    showPlaceholderImage={true}
+                    placeholderSrc={placeholderSrc}
                     imageComponent={PreviewImageComponent}
                     sizes={`(max-width: ${config.settings.layout.tabletBreakpoint}px) 100vw, ${Math.trunc(config.settings.layout.defaultContainerWidth / 2)}px`}
                   />

frontend/packages/volto-light-theme/src/components/Blocks/Listing/SummaryTemplate.jsx

@@ -41,6 +41,8 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
           if (item['@type'] === 'Person' && showProfileLinks !== undefined) {
             showLink = showProfileLinks && !isEditMode;
           }
+          const placeholderSrc =
+            config.settings.placeholderImages?.[item['@type']];
           const ItemBodyTemplate = (props) =>
             CustomItemBodyTemplate ? (
               <CustomItemBodyTemplate item={item} />
@@ -49,6 +51,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                 <Card.Image
                   item={item}
                   showPlaceholderImage={true}
+                  placeholderSrc={placeholderSrc}
                   imageComponent={PreviewImageComponent}
                   sizes={`(max-width: ${config.settings.layout.tabletBreakpoint}px) 100vw, 220px`}
                 />

frontend/packages/volto-light-theme/src/components/Blocks/Teaser/DefaultBody.tsx

@@ -51,13 +51,17 @@ const TeaserDefaultTemplate = (props) => {
     head_title: data.head_title || '',
   };
 
+  const placeholderSrc = config.settings.placeholderImages?.[href['@type']];
+
   return (
     <Card item={showLink ? href : null} openLinkInNewTab={openLinkInNewTab}>
       <Card.Image
         src={url && !image?.image_field ? url : undefined}
         item={!data.overwrite ? href : { ...href, ...localOverrides }}
         image={data.overwrite ? image : undefined}
         imageComponent={Image}
+        showPlaceholderImage={Boolean(placeholderSrc)}
+        placeholderSrc={placeholderSrc}
         sizes={sizes}
       />
       <Card.Summary>

frontend/packages/volto-light-theme/src/primitives/Card/Card.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import cx from 'classnames';
 import type { ObjectBrowserItem } from '@plone/types';
+import defaultPlaceholderSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 
 type BaseCardProps = {
   /** Optional additional CSS class names to apply to the card. */
@@ -93,33 +94,49 @@ type CardImageProps = {
   /** A custom React component to render the image. */
   imageComponent?: React.ComponentType<any>;
   children?: React.ReactNode;
+  /** Show a placeholder image when the item has no image of its own. */
   showPlaceholderImage?: boolean;
+  /**
+   * Optional custom image configurable per content type at config.settings.placeholderImages.[type]. Falls back to the default placeholder image.
+   */
+  placeholderSrc?: string;
   sizes?: string;
 };
 
 const CardImage = (props: CardImageProps) => {
-  const { src, item, image, imageComponent, showPlaceholderImage, sizes } =
-    props;
+  const {
+    src,
+    item,
+    image,
+    imageComponent,
+    showPlaceholderImage,
+    placeholderSrc,
+    sizes,
+  } = props;
   const Image = imageComponent || DefaultImage;
+  const imageField = image ? image.image_field : item?.image_field;
+  const hasItemImage = item?.hasPreviewImage || imageField || image;
 
   return (
     <div className="image-wrapper">
       {src ? (
         <Image src={src} alt="" loading="lazy" responsive={true} />
-      ) : item || image ? (
-        (item?.hasPreviewImage ||
-          item?.image_field ||
-          image ||
-          showPlaceholderImage) && (
-          <Image
-            item={image || item}
-            imageField={image ? image.image_field : item?.image_field}
-            alt=""
-            loading="lazy"
-            responsive={true}
-            sizes={sizes}
-          />
-        )
+      ) : showPlaceholderImage && !hasItemImage ? (
+        <DefaultImage
+          src={placeholderSrc || defaultPlaceholderSVG}
+          alt=""
+          loading="lazy"
+          responsive={true}
+        />
+      ) : hasItemImage ? (
+        <Image
+          item={image || item}
+          imageField={imageField}
+          alt=""
+          loading="lazy"
+          responsive={true}
+          sizes={sizes}
+        />
       ) : (
         props.children
       )}

frontend/packages/volto-light-theme/src/types.d.ts

@@ -116,4 +116,11 @@ declare module '@plone/types' {
     sticky_menu: Array<stickyMenu>;
     footer_links: Array<Link>;
   }
+  export interface SettingsConfig {
+    /**
+     * Maps a content type to the placeholder image, shown in Cards when
+     * an item has no image of its own. If undefined, it falls back to the default placeholder image.
+     */
+    placeholderImages?: Record<string, string>;
+  }
 }