From 235b16e3cfffb11c72cc07c9b635e1202b094ad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katja=20Su=CC=88ss?= <k.suess@rohberg.ch>
Date: Wed, 2 Oct 2024 18:05:49 +0200
Subject: [PATCH] Relations: Show related speakers on Talk and Listing

---
 .../src/components/Views/Talk.jsx             | 90 ++++++++++---------
 .../variations/TalkListingBlockVariation.jsx  | 10 ++-
 2 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/packages/volto-ploneconf/src/components/Views/Talk.jsx b/packages/volto-ploneconf/src/components/Views/Talk.jsx
index ec02b25..8239311 100644
--- a/packages/volto-ploneconf/src/components/Views/Talk.jsx
+++ b/packages/volto-ploneconf/src/components/Views/Talk.jsx
@@ -1,12 +1,16 @@
+import { isEmpty } from 'lodash';
 import {
   Container as SemanticContainer,
+  Grid,
   Header,
   Image,
   Label,
   Segment,
 } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { Component, UniversalLink } from '@plone/volto/components';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
+import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import config from '@plone/volto/registry';
 
 const TalkView = (props) => {
@@ -28,6 +32,13 @@ const TalkView = (props) => {
         <p className="documentDescription">{content.description}</p>
       )}
       <Segment floated="right">
+        {content.image?.scales && (
+          <Image
+            src={flattenToAppURL(content.image?.scales?.preview?.download)}
+            size="medium"
+            alt={content.title}
+          />
+        )}
         {content.start && !content.hide_date && (
           <>
             <Header dividing sub>
@@ -67,50 +78,41 @@ const TalkView = (props) => {
       </Segment>
       <div dangerouslySetInnerHTML={{ __html: content.details.data }} />
       <Segment clearing>
-        {content.speaker && <Header dividing>{content.speaker}</Header>}
-        {content.website ? (
-          <p>
-            <a href={content.website}>{content.company || content.website}</a>
-          </p>
-        ) : (
-          <p>{content.company}</p>
-        )}
-        {content.email && (
-          <p>
-            Email: <a href={`mailto:${content.email}`}>{content.email}</a>
-          </p>
-        )}
-        {content.twitter && (
-          <p>
-            X:{' '}
-            <a href={`https://x.com/${content.twitter}`}>
-              {content.twitter.startsWith('@')
-                ? content.twitter
-                : '@' + content.twitter}
-            </a>
-          </p>
-        )}
-        {content.github && (
-          <p>
-            Github:{' '}
-            <a href={`https://github.com/${content.github}`}>
-              {content.github}
-            </a>
-          </p>
-        )}
-        <Image
-          src={flattenToAppURL(content.image?.scales?.preview?.download)}
-          size="small"
-          floated="right"
-          alt={content.speaker}
-          avatar
-        />
-        {content.speaker_biography && (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: content.speaker_biography.data,
-            }}
-          />
+        <Header dividing>Speaker</Header>
+        {content.speaker?.length > 0 && (
+          <Grid>
+            <Grid.Row columns={5}>
+              {content.speaker.map((el) => (
+                <Grid.Column>
+                  <UniversalLink href={el['@id']}>
+                    {isEmpty(el.image_scales) ? (
+                      <img
+                        src={
+                          config.getComponent({
+                            name: 'DefaultImage',
+                            dependencies: ['listing', 'summary'],
+                          }).component || DefaultImageSVG
+                        }
+                        alt={el.title}
+                        className="ui image"
+                      />
+                    ) : (
+                      <Component
+                        componentName="PreviewImage"
+                        item={el}
+                        image_field={isEmpty(el.image_scales) ? null : 'image'}
+                        showDefault={true}
+                        alt={el.title}
+                        responsive={true}
+                        className="ui image"
+                      />
+                    )}
+                    <div>{el.title}</div>
+                  </UniversalLink>
+                </Grid.Column>
+              ))}
+            </Grid.Row>
+          </Grid>
         )}
       </Segment>
     </Container>
diff --git a/packages/volto-ploneconf/src/components/variations/TalkListingBlockVariation.jsx b/packages/volto-ploneconf/src/components/variations/TalkListingBlockVariation.jsx
index 4919bf2..f5aaf24 100644
--- a/packages/volto-ploneconf/src/components/variations/TalkListingBlockVariation.jsx
+++ b/packages/volto-ploneconf/src/components/variations/TalkListingBlockVariation.jsx
@@ -38,7 +38,11 @@ const TalkListingBlockVariation = ({
           <Segment>
             <div className="listing-item" key={item['@id']}>
               <ConditionalLink item={item} condition={!isEditMode}>
-                <Component componentName="PreviewImage" item={item} alt="" />
+                <Component
+                  componentName="PreviewImage"
+                  item={item}
+                  alt={item.title}
+                />
                 <div className="listing-body">
                   <When
                     start={item.start}
@@ -47,7 +51,9 @@ const TalkListingBlockVariation = ({
                     open_end={item.open_end}
                   />
                   <h3>{item.title || item.id}</h3>
-                  <p>{item.speaker}</p>
+                  {item.speaker?.length > 0 && (
+                    <p>{item.speaker.map((el) => el.title).join(', ')}</p>
+                  )}
                   <p>
                     {item.room && (
                       <>