syntaxbullet/bmp-website-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: manage press fallback card media

Browse Source
This commit is contained in:
syntaxbullet
2026-06-22 13:15:13 +02:00
parent a2a5f8b343
commit b7e3318aad
4 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/collections/Pages/pressIndexFields.ts
View File

@@ -35,6 +35,7 @@ const eventFields: Field[] = [
text('location', 'Location'),
text('cat', 'Category'),
text('status', 'Status'),
uploadField('image', 'Image'),
text('img', 'Image URL or path'),
textarea('desc', 'Description'),
text('slug', 'Route'),
@@ -49,6 +50,7 @@ const newsFields: Field[] = [
text('title', 'Title'),
textarea('excerpt', 'Excerpt'),
text('cat', 'Category'),
uploadField('image', 'Image'),
text('img', 'Image URL or path'),
text('slug', 'Route'),
]

4
src/payload-types.ts
View File

@@ -1543,6 +1543,7 @@ export interface Page {
location?: string | null;
cat?: string | null;
status?: string | null;
image?: (number | null) | Media;
img?: string | null;
desc?: string | null;
slug?: string | null;
@@ -1569,6 +1570,7 @@ export interface Page {
title?: string | null;
excerpt?: string | null;
cat?: string | null;
image?: (number | null) | Media;
img?: string | null;
slug?: string | null;
id?: string | null;
@@ -4443,6 +4445,7 @@ export interface PagesSelect<T extends boolean = true> {
location?: T;
cat?: T;
status?: T;
image?: T;
img?: T;
desc?: T;
slug?: T;
@@ -4465,6 +4468,7 @@ export interface PagesSelect<T extends boolean = true> {
title?: T;
excerpt?: T;
cat?: T;
image?: T;
img?: T;
slug?: T;
id?: T;

22
src/scripts/preload-press-index-page-cms.ts
View File

@@ -15,6 +15,22 @@ const mediaByFilename = async (payload: Payload, filename: string) => {
return result.docs[0]?.id
}
const filenameFromPath = (source: string) => source.split('?')[0]?.split('/').filter(Boolean).pop()
const fallbackItemsWithImages = async <T extends { img?: string }>(
payload: Payload,
items: T[],
) =>
Promise.all(
items.map(async (item) => {
const filename = item.img ? filenameFromPath(item.img) : undefined
return {
...item,
image: filename ? await mediaByFilename(payload, filename) : undefined,
}
}),
)
async function main() {
const payload = await getPayload({ config })
@@ -41,6 +57,10 @@ async function main() {
const { imageFilename: _heroFilename, ...heroContent } = pressIndexContent.hero
const { collectionFallbackImageFilename: _eventFallbackFilename, ...eventsContent } = pressIndexContent.events
const { collectionFallbackImageFilename: _newsFallbackFilename, ...newsContent } = pressIndexContent.news
const [eventFallbackItems, newsFallbackItems] = await Promise.all([
fallbackItemsWithImages(payload, pressIndexContent.events.fallbackItems),
fallbackItemsWithImages(payload, pressIndexContent.news.fallbackItems),
])
await payload.update({
collection: 'pages',
@@ -57,10 +77,12 @@ async function main() {
events: {
...eventsContent,
collectionFallbackImage: eventFallbackImage,
fallbackItems: eventFallbackItems,
},
news: {
...newsContent,
collectionFallbackImage: newsFallbackImage,
fallbackItems: newsFallbackItems,
},
downloads: {
...pressIndexContent.downloads,

14
src/spa/pages/Press.tsx
View File

@@ -16,13 +16,13 @@ const FB = '"Inter", sans-serif';
type PressIndexCms = Partial<typeof pressIndexContent> & {
hero?: Partial<typeof pressIndexContent.hero> & { image?: unknown }
events?: Partial<typeof pressIndexContent.events> & { collectionFallbackImage?: unknown }
news?: Partial<typeof pressIndexContent.news> & { collectionFallbackImage?: unknown }
events?: Partial<typeof pressIndexContent.events> & { collectionFallbackImage?: unknown; fallbackItems?: PressEventItem[] }
news?: Partial<typeof pressIndexContent.news> & { collectionFallbackImage?: unknown; fallbackItems?: PressNewsItem[] }
downloads?: Partial<typeof pressIndexContent.downloads> & { kitFile?: unknown }
}
type PressEventItem = (typeof pressIndexContent.events.fallbackItems)[number]
type PressNewsItem = (typeof pressIndexContent.news.fallbackItems)[number]
type PressEventItem = (typeof pressIndexContent.events.fallbackItems)[number] & { image?: unknown }
type PressNewsItem = (typeof pressIndexContent.news.fallbackItems)[number] & { image?: unknown }
const fallbackText = (value: unknown, fallback: string) => typeof value === 'string' && value.length > 0 ? value : fallback;
const fallbackArray = <T,>(value: unknown, fallback: T[]) => Array.isArray(value) && value.length ? value as T[] : fallback;
@@ -73,6 +73,8 @@ function Lines({ text }: { text: string }) {
return <>{text.split('\n').map((line, i) => <React.Fragment key={`${line}-${i}`}>{i > 0 && <br />}{line}</React.Fragment>)}</>
}
const fallbackCardImage = (item: PressEventItem | PressNewsItem) => mediaUrl(item.image, fallbackText(item.img, ''))
function NewsCard({ item, idx, isMobile, readMoreLabel, total }: { item: PressNewsItem; idx: number; isMobile: boolean; readMoreLabel: string; total: number }) {
const [hovered, setHovered] = React.useState(false);
return (
@@ -92,7 +94,7 @@ function NewsCard({ item, idx, isMobile, readMoreLabel, total }: { item: PressNe
{/* image */}
<div style={{ position: 'relative', overflow: 'hidden', height: 220 }}>
<Image unoptimized
src={item.img}
src={fallbackCardImage(item)}
alt={item.title}
style={{
width: '100%',
@@ -422,7 +424,7 @@ const Press: React.FC = () => {
>
{/* Left – image cell */}
<div style={{ position: 'relative', overflow: 'hidden', height: isMobile ? 200 : 240 }}>
<Image unoptimized src={event.img} alt={event.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
<Image unoptimized src={fallbackCardImage(event)} alt={event.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
<div style={{ position: 'absolute', top: 20, left: 20, padding: '5px 12px', fontFamily: FF, fontSize: 9, fontWeight: 700, textTransform: 'uppercase' as const, letterSpacing: '0.18em', background: event.status === fallbackText(eventsSection.openStatusLabel, pressIndexContent.events.openStatusLabel) ? GOLD : 'rgba(3,9,58,0.85)', color: event.status === fallbackText(eventsSection.openStatusLabel, pressIndexContent.events.openStatusLabel) ? NAVY : 'rgba(255,255,255,0.6)' }}>
{event.status}
</div>