Content pfp
Content
@
0 reply
0 recast
2 reactions
phil pfp
phil
@phil
What is the best way to compose a dynamic image for use in social sharing? For example, when I share a Warpcast URL to a friend, it generates a preview. How is this done without needing to upload and store an image somewhere?
25 replies
2 recasts
29 reactions
Dan Romero pfp
Dan Romero
@dwr.eth
It generates an image and stores it on our server.
2 replies
0 recast
7 reactions
Colin pfp
Colin
@colin
Satori, Sharp, Vercel and NextJS API routes are what we use at Paragraph and it works well.
0 reply
0 recast
3 reactions
jtgi pfp
jtgi
@jtgi
satori w/sharp works well - vercel has this built in if you're hosted there (but can get expensive). create the svg then convert to base64 encoded png and return it, roughly like this: ``` const svg = await satori(...) const png = await sharp(Buffer.from(svg)).png().toBuffer().then(buff => buff.toString('base64')) ... ``` i think gpt should recommend from there.
0 reply
0 recast
3 reactions
jacopo pfp
jacopo
@jacopo
satori https://github.com/vercel/satori
1 reply
0 recast
2 reactions
sean 🔹 pfp
sean 🔹
@swabbie.eth
as others have said, generated on the fly with satori / sharp is probably best and is what most people are doing with the images returned in frames. it's also the method that merkle recommended for frames. a bit slower and can't be indexed in the same way, but is way easier to return updated link previews vs regularly saving a new preview image file
0 reply
0 recast
1 reaction
alex pfp
alex
@alexgrover.eth
if you’re using nextjs the next/OG package has a wrapper around satori you can use: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
0 reply
0 recast
1 reaction
Pain🖤🌹 pfp
Pain🖤🌹
@painn.eth
Hear me out ..I think open graph meta properties should work just fine.
0 reply
0 recast
0 reaction
Abbas🎩👾 pfp
Abbas🎩👾
@abbass.eth
Maybe WhatsApp >>Meta<< now knows about Farcaster and is already working on collaborating!
1 reply
0 recast
1 reaction
Dvyne pfp
Dvyne
@dummie.eth
Since warpcast is built on open data It's easily recognized Especially on a pc or desktop My WhatsApp also does that
1 reply
0 recast
0 reaction
matthias pfp
matthias
@iammatthias
satori (+ resvg.js if you want a png) https://knaap.dev/posts/dynamic-og-images-with-any-static-site-generator/
0 reply
0 recast
0 reaction
Jai pfp
Jai
@jaivsdawrld
Use Open Graph tags in your HTML to specify the image and description for automatic previews when sharing URLs.
0 reply
0 recast
0 reaction
Push 🎩🤌🏻 pfp
Push 🎩🤌🏻
@push-
Idk man I’ve always wondered, it also looks kinda sick when you share it discord or telegram. Mystery of farcaster✨
0 reply
0 recast
0 reaction
samvox pfp
samvox
@samvox
Tools like Adobe Photoshop, Illustrator, Canva, or Figma can be used for creating high-quality images.
0 reply
0 recast
1 reaction
joshisdead.eth pfp
joshisdead.eth
@joshisdead.eth
What I do is just share a link plus screenshot 🥹
0 reply
0 recast
1 reaction
Refan pfp
Refan
@refan
this warpcast support metadata opengraph ?
0 reply
0 recast
1 reaction
Just Build pfp
Just Build
@justbuild
I'm supporting you through @microsub! 74 $DEGEN (Please mute the keyword "ms!t" if you prefer not to see these casts.)
0 reply
0 recast
0 reaction
Archilles ༄ pfp
Archilles ༄
@archilles
Open graph metadata does the work
0 reply
0 recast
0 reaction
Fadil pfp
Fadil
@blackkhammer.eth
It's the same way, if you share almost any URL on warpcast, you get a preview. I think @dwr.eth can answer best as to what they did
0 reply
0 recast
0 reaction
OTTI🎨🖌 pfp
OTTI🎨🖌
@zeuzc
Tried server side rendering¿
0 reply
0 recast
0 reaction