Add auto-generated brand graphic as default event photo

[joethreepwood]

Changes

Events on /events now get an auto-generated, brand-templated graphic as their default photo whenever no photo has been uploaded.

• New EventGraphic component: a square promo graphic with the speaker topic (or event name) in Squeak (uppercase/bold, per the visual identity guidelines), the date and city/country in Open Runde, the first speaker's community profile portrait in a white-ringed circle, and a footer bar with the PostHog logo plus "with {partner}". The background is the speaker's favorite color from their community profile, with automatic black/white text contrast. Events without speakers fall back to hedgehog artwork.
• The event creation/edit form shows a live preview that updates as fields change, a note explaining the graphic is used as the event's photo everywhere unless one is uploaded, and a 1080×1080 PNG download button (via html-to-image, same pattern as the photobooth).
• The events list card and detail panel render the graphic whenever an event has no uploaded photos; the events API now populates speaker avatars/colors to support this.

Rendered output was verified in headless Chromium (speaker card with partner, long-title step-down, no-speaker fallback, and the 80px list thumbnail) — worth re-checking visually in the Vercel preview.

Why: event organizers currently have to hand-make promo images for each meetup; this generates an on-brand default from data already captured in the event creation flow.

Checklist

• I've read the docs and/or content style guides.
• Words are spelled using American English
• Use relative URLs for internal links
• I've checked the pages added or changed in the Vercel preview build
• If I moved a page, I added a redirect in vercel.json (no pages moved)

---

Created with PostHog Code

[github-actions]

Deploy preview

Status	Details	Updated (UTC)
🟢 Ready	View preview	Jul 14, 2026 03:14PM

[github-actions]

Vale prose linter → found 0 errors, 6 warnings, 0 suggestions in your markdown

Full report → Copy the linter results into an LLM to batch-fix issues.

Linter being weird? Update the rules!

src/components/EventGraphic/README.md — 0 errors, 6 warnings, 0 suggestions

Line	Severity	Message	Rule
10:97	warning	'Runde' is a possible misspelling.	PostHogBase.Spelling
11:122	warning	'safelisted' is a possible misspelling.	PostHogBase.Spelling
12:5	warning	'Headshot' is a possible misspelling.	PostHogBase.Spelling
12:187	warning	'Runde' is a possible misspelling.	PostHogBase.Spelling
33:84	warning	'rasterizes' is a possible misspelling.	PostHogBase.Spelling
50:42	warning	'Strapi' is a possible misspelling.	PostHogBase.Spelling

[joethreepwood]

Works for me locally. Needs a @smallbrownbike pass and probably a look over by @lottiecoxon but it now automatically generates art for you as a template when you create an event.

You can override this by adding custom photos.

It has a fallback of using a hedgehog if no speaker is specified, otherwise it pulls in the speaker for the image and uses their specified favourite colour to set the background for some visual variation.

Text placement and sizing can be tricky, potentially overrunning etc. So, this generates a live preview for you to tailor around. You can add partners as just text.

It even lets you download the image so you can share it with Liam for socials too.

Basic template and the fallback for when there's no speaker:

Couple of examples of what gets auto-generated when you add a speaker:

[github-actions]

Bundle report

Total JS (gzip)

6.31 MiB (+1.5 KiB / +0.0%)

Largest changed named chunks

Chunk	Gzip	Δ vs master
7684c223c60c6151d5ac4f7fb0dacc1b8f166646.js	13.1 KiB	+1.5 KiB / +13.1%

Eager graph (modules shipped in each entrypoint's initial chunks)

Entrypoint	Eager size	Budget	Modules
✅ app	15.57 MiB (+1.1 KiB / +0.0%)	report-only	1941

Largest modules in the app closure

Module	Size
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css	710.9 KiB
./src/components/Stickers/Stickers.tsx	696.4 KiB
./.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/31a094f140f119e73085d847ae81b99b.js + 2 modules	615.0 KiB
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js	481.4 KiB
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules	395.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.cjs.js	364.8 KiB
./src/hooks/useCustomers.tsx + 54 modules	355.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js	354.8 KiB
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules	351.4 KiB
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js	281.9 KiB
./src/components/ProductComparisonTable/index.tsx + 118 modules	275.6 KiB
./node_modules/.pnpm/d3@7.9.0/node_modules/d3/src/index.js + 208 modules	247.4 KiB
./src/components/Pricing/PricingSlider/Slider.tsx + 87 modules	239.9 KiB
./gatsby-browser.tsx + 41 modules	239.8 KiB
./src/components/SearchUI/index.tsx + 73 modules	223.4 KiB

---

Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).