Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: www.netlify.com
Dynamically Generating Thousands of OG Images for a Viral Twitter Campaign
If you spend any amount of time on Twitter, you'll notice that most links have some sort of image attached to them. For example, here's one of Netlify's tweets: Look at that beautiful, on-brand image that stands out in everyone's Twitter feed!
There are times though when you want to attach many different OG images to the same link.
function populateTemplate(content, data) { for (const [key, value] of Object.entries(data)) { content = content.replace(new RegExp(`{{ ${key}}}`, 'g'), value)} return content; }
And your edge function could simply swap out hardcoded images: export default async (request, context) => { const url = new URL(request.url) const response = await context.next() const page = await response.text() const search = '/images/og/vacation.png' const replace = url.searchParams.has('image')?
There are times though when you want to attach many different OG images to the same link.
function populateTemplate(content, data) { for (const [key, value] of Object.entries(data)) { content = content.replace(new RegExp(`{{ ${key}}}`, 'g'), value)} return content; }
And your edge function could simply swap out hardcoded images: export default async (request, context) => { const url = new URL(request.url) const response = await context.next() const page = await response.text() const search = '/images/og/vacation.png' const replace = url.searchParams.has('image')?
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers