feat: manage preistraeger fallback media via payload

src/spa/pages/Preistraeger.tsx

@@ -17,18 +17,19 @@ const BG_ALT = '#E4E2E3';
 
 type PreistraegerIndexCms = Partial<typeof preistraegerIndexContent> & {
   hero?: Partial<typeof preistraegerIndexContent.hero> & { image?: unknown }
+  card?: Partial<typeof preistraegerIndexContent.card> & { fallbackImage?: unknown }
 }
 
 const fallbackText = (value: unknown, fallback: string) => typeof value === 'string' && value.length > 0 ? value : fallback;
 
-const normalizeWinner = (doc: CmsRouteDoc): Winner => ({
+const normalizeWinner = (doc: CmsRouteDoc, fallbackImage: string): Winner => ({
   id: String(doc.id),
   slug: String(doc.slug || ''),
   name: String(doc.title || 'Preisträger'),
   category: String(doc.category || 'Preisträger'),
   year: Number(doc.year || new Date().getFullYear()),
   type: String(doc.awardType || 'Auszeichnung'),
-  img: docImageUrl(doc, '/images/gala-saal-overview.jpg'),
+  img: docImageUrl(doc, fallbackImage),
   shortDesc: String(doc.shortDesc || doc.description || doc.meta?.description || ''),
   longDesc: String(doc.longDesc || doc.description || doc.meta?.description || ''),
   quote: String(doc.quote || ''),
@@ -52,12 +53,16 @@ export default function Preistraeger() {
   const filters = { ...preistraegerIndexContent.filters, ...(cms.filters || {}) };
   const count = { ...preistraegerIndexContent.count, ...(cms.count || {}) };
   const empty = { ...preistraegerIndexContent.empty, ...(cms.empty || {}) };
-  const card = { ...preistraegerIndexContent.card, ...(cms.card || {}) };
+  const card = useMemo(() => ({ ...preistraegerIndexContent.card, ...(cms.card || {}) }), [cms.card]);
   const cta = { ...preistraegerIndexContent.cta, ...(cms.cta || {}) };
+  const cardFallbackImage = useMemo(
+    () => mediaUrl(card.fallbackImage, `/images/${preistraegerIndexContent.card.fallbackImageFilename}`),
+    [card],
+  );
   const winners = useMemo(() => {
-    if (cmsPreistraeger.length) return cmsPreistraeger.map(normalizeWinner).filter((winner) => winner.slug);
+    if (cmsPreistraeger.length) return cmsPreistraeger.map((doc) => normalizeWinner(doc, cardFallbackImage)).filter((winner) => winner.slug);
     return WINNERS;
-  }, [cmsPreistraeger]);
+  }, [cardFallbackImage, cmsPreistraeger]);
   const years = useMemo(() => [...new Set(winners.map((winner) => winner.year))].sort((a, b) => b - a), [winners]);
   const categories = useMemo(() => [...new Set(winners.map((winner) => winner.category))].sort((a, b) => a.localeCompare(b, 'de')), [winners]);
   const [activeYear, setActiveYear] = useState<number | undefined>(undefined);

src/spa/pages/PreistraegerDetail.tsx

@@ -17,6 +17,7 @@ const GRAY = '#666666';
 const BG_ALT = '#E4E2E3';
 
 type PreistraegerDetailCms = Partial<typeof preistraegerDetailContent> & {
+  fallbackImage?: unknown
   sideImage?: Partial<typeof preistraegerDetailContent.sideImage> & { image?: unknown }
 }
 
@@ -26,6 +27,11 @@ export default function PreistraegerDetail() {
   const { slug } = useParams<{ slug: string }>();
   const route = useCmsRoute();
   const cmsWinner = route?.collection === 'preistraeger' ? route.doc : undefined;
+  const cmsDetail = {
+    ...preistraegerDetailContent,
+    ...((cmsWinner?.detailPage || {}) as PreistraegerDetailCms),
+  } as PreistraegerDetailCms;
+  const winnerFallbackImage = mediaUrl(cmsDetail.fallbackImage, `/images/${preistraegerDetailContent.fallbackImageFilename}`);
   const winner = cmsWinner ? {
     id: String(cmsWinner.id),
     slug: String(cmsWinner.slug || slug),
@@ -33,7 +39,7 @@ export default function PreistraegerDetail() {
     category: String(cmsWinner.category || 'Preisträger'),
     year: Number(cmsWinner.year || new Date().getFullYear()),
     type: String(cmsWinner.awardType || 'Auszeichnung'),
-    img: docImageUrl(cmsWinner, '/images/gala-saal-overview.jpg'),
+    img: docImageUrl(cmsWinner, winnerFallbackImage),
     shortDesc: String(cmsWinner.shortDesc || cmsWinner.description || cmsWinner.meta?.description || ''),
     longDesc: String(cmsWinner.longDesc || cmsWinner.description || cmsWinner.meta?.description || 'Dieser Preisträger wird aus Payload CMS geladen.'),
     quote: String(cmsWinner.quote || 'Diese Erfolgsgeschichte wird aktuell in Payload CMS gepflegt.'),
@@ -47,10 +53,7 @@ export default function PreistraegerDetail() {
   } : WINNERS.find(w => w.slug === slug);
   const isMobile = useIsMobile();
 
-  const detail = {
-    ...preistraegerDetailContent,
-    ...((winner && 'detailPage' in winner ? winner.detailPage : {}) || {}),
-  } as PreistraegerDetailCms;
+  const detail = (winner && 'detailPage' in winner ? { ...preistraegerDetailContent, ...(winner.detailPage || {}) } : cmsDetail) as PreistraegerDetailCms;
   const breadcrumb = { ...preistraegerDetailContent.breadcrumb, ...(detail.breadcrumb || {}) };
   const sections = { ...preistraegerDetailContent.sections, ...(detail.sections || {}) };
   const sideImage = { ...preistraegerDetailContent.sideImage, ...(detail.sideImage || {}) };

src/spa/preistraegerDetailContent.ts

@@ -1,4 +1,5 @@
 export const preistraegerDetailContent = {
+  fallbackImageFilename: 'gala-saal-overview.jpg',
   notFoundRedirect: '/preistraeger',
   breadcrumb: {
     url: '/preistraeger',

src/spa/preistraegerIndexContent.ts

@@ -21,6 +21,7 @@ export const preistraegerIndexContent = {
     message: 'Keine Preisträger für diese Auswahl.',
   },
   card: {
+    fallbackImageFilename: 'gala-saal-overview.jpg',
     hoverLabel: 'Mehr erfahren',
   },
   cta: {