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

feat: manage network people media

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

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

@@ -39,6 +39,7 @@ const sectionAdmin = (description: string) => ({
const statFields: Field[] = [text('value', 'Value'), text('label', 'Label')]
const personFields: Field[] = [
uploadField('imageUpload', 'Image'),
text('image', 'Image URL'),
text('imageAlt', 'Image alt text'),
text('name', 'Name'),
@@ -51,6 +52,7 @@ const juryMemberFields: Field[] = [
text('name', 'Name'),
text('role', 'Role'),
textarea('bio', 'Bio'),
uploadField('imageUpload', 'Image'),
text('image', 'Image URL'),
]

4
src/payload-types.ts
View File

@@ -1716,6 +1716,7 @@ export interface Page {
description?: string | null;
people?:
| {
imageUpload?: (number | null) | Media;
image?: string | null;
imageAlt?: string | null;
name?: string | null;
@@ -1769,6 +1770,7 @@ export interface Page {
name?: string | null;
role?: string | null;
bio?: string | null;
imageUpload?: (number | null) | Media;
image?: string | null;
id?: string | null;
}[]
@@ -4596,6 +4598,7 @@ export interface PagesSelect<T extends boolean = true> {
people?:
| T
| {
imageUpload?: T;
image?: T;
imageAlt?: T;
name?: T;
@@ -4647,6 +4650,7 @@ export interface PagesSelect<T extends boolean = true> {
name?: T;
role?: T;
bio?: T;
imageUpload?: T;
image?: T;
id?: T;
};

36
src/scripts/preload-netzwerk-page-cms.ts
View File

@@ -1,6 +1,7 @@
import 'dotenv/config'
import config from '@payload-config'
import crypto from 'crypto'
import { getPayload, type Payload } from 'payload'
import { netzwerkContent } from '@/spa/netzwerkContent'
@@ -15,6 +16,29 @@ const mediaByFilename = async (payload: Payload, filename: string) => {
return result.docs[0]?.id
}
const safeRemoteName = (url: string) => {
const parsed = new URL(url)
const ext = parsed.pathname.split('/').pop()?.includes('.') ? `.${parsed.pathname.split('.').pop()}` : '.jpg'
const hash = crypto.createHash('sha1').update(url).digest('hex').slice(0, 10)
return `${parsed.hostname.replace(/[^a-z0-9]+/gi, '-')}-${hash}${ext}`.toLowerCase()
}
const filenameForSource = (source: string) => {
if (source.startsWith('http')) return safeRemoteName(source)
return source.split('?')[0]?.split('/').filter(Boolean).pop()
}
const itemsWithImageUploads = async <T extends { image?: string }>(payload: Payload, items: T[]) =>
Promise.all(
items.map(async (item) => {
const filename = item.image ? filenameForSource(item.image) : undefined
return {
...item,
imageUpload: filename ? await mediaByFilename(payload, filename) : undefined,
}
}),
)
async function main() {
const payload = await getPayload({ config })
@@ -36,6 +60,10 @@ async function main() {
const sponsoringImage = await mediaByFilename(payload, netzwerkContent.sponsoring.imageFilename)
const { imageFilename: _heroFilename, ...heroContent } = netzwerkContent.hero
const { imageFilename: _sponsoringFilename, ...sponsoringContent } = netzwerkContent.sponsoring
const [patronPeople, juryMembers] = await Promise.all([
itemsWithImageUploads(payload, netzwerkContent.patronage.people),
itemsWithImageUploads(payload, netzwerkContent.jury.members),
])
await payload.update({
collection: 'pages',
@@ -49,6 +77,14 @@ async function main() {
...heroContent,
image: heroImage,
},
patronage: {
...netzwerkContent.patronage,
people: patronPeople,
},
jury: {
...netzwerkContent.jury,
members: juryMembers,
},
sponsoring: {
...sponsoringContent,
image: sponsoringImage,

11
src/spa/pages/Netzwerk.tsx
View File

@@ -28,8 +28,8 @@ type NetzwerkCms = Partial<typeof netzwerkContent> & {
sponsoring?: Partial<typeof netzwerkContent.sponsoring> & { image?: unknown }
}
type PatronPerson = (typeof netzwerkContent.patronage.people)[number]
type JuryMember = (typeof netzwerkContent.jury.members)[number]
type PatronPerson = (typeof netzwerkContent.patronage.people)[number] & { imageUpload?: unknown }
type JuryMember = (typeof netzwerkContent.jury.members)[number] & { imageUpload?: unknown }
type Partner = (typeof netzwerkContent.partners.items)[number] & { tier: 1 | 2 | 3; heroImg?: string; linkedin?: string; logoSubtext?: string }
type PartnerTier = (typeof netzwerkContent.partners.tiers)[number]
type ExpertiseRow = (typeof netzwerkContent.expertise.rows)[number]
@@ -39,6 +39,7 @@ type PartnerModalCopy = typeof netzwerkContent.partners.modal
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;
const managedImage = (upload: unknown, fallback: unknown) => mediaUrl(upload, fallbackText(fallback, ''))
function Lines({ text, highlight }: { text: string; highlight?: string }) {
return (
@@ -112,7 +113,7 @@ const JuryCard: React.FC<{ member: JuryMember; idx: number }> = ({ member, idx }
style={{ borderLeft: !isMobileCard && idx > 0 ? '1px solid rgba(255,255,255,0.07)' : 'none', display: 'flex', flexDirection: 'column', cursor: 'default', background: hovered ? 'rgba(255,255,255,0.03)' : 'transparent', transition: 'background 0.2s', ...(isMobileCard ? { minWidth: '74vw', maxWidth: '74vw', flexShrink: 0, scrollSnapAlign: 'start', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, overflow: 'hidden' } : {}) }}
>
<div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '3/4' }}>
<Image unoptimized src={member.image} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
<Image unoptimized src={managedImage(member.imageUpload, member.image)} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '40%', background: 'linear-gradient(to top, rgba(3,9,58,0.65), transparent)' }} />
</div>
<div style={{ padding: isMobileCard ? '28px 28px 32px' : '32px 32px 36px' }}>
@@ -145,7 +146,7 @@ const JuryChairCard: React.FC<{ member: JuryMember; badge: string }> = ({ member
}}
>
<div style={{ position: 'relative', overflow: 'hidden', aspectRatio: isMobileCard ? '16/10' : '3/4', minHeight: isMobileCard ? 240 : 'auto' }}>
<Image unoptimized src={member.image} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
<Image unoptimized src={managedImage(member.imageUpload, member.image)} alt={member.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', filter: hovered ? 'none' : 'grayscale(100%)', transition: 'filter 0.5s', display: 'block' }} />
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '45%', background: 'linear-gradient(to top, rgba(3,9,58,0.7), transparent)' }} />
</div>
<div style={{ padding: isMobileCard ? '32px 28px 36px' : '56px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
@@ -502,7 +503,7 @@ const Netzwerk: React.FC = () => {
{patronPeople.map((person, index) => (
<PersonCard
key={`${person.name}-${index}`}
imgSrc={fallbackText(person.image, netzwerkContent.patronage.people[index]?.image || '')}
imgSrc={managedImage(person.imageUpload, fallbackText(person.image, netzwerkContent.patronage.people[index]?.image || ''))}
imgAlt={fallbackText(person.imageAlt, person.name)}
name={fallbackText(person.name, netzwerkContent.patronage.people[index]?.name || '')}
titleLine1={fallbackText(person.titleLine1, netzwerkContent.patronage.people[index]?.titleLine1 || '')}