It's pretty important that dev.to posts with no cover image have a well-designed "card" that grabs a Twitter user's attention as they scroll throug...
For further actions, you may consider blocking this person and/or reporting abuse
Very interesting post, never thought of how those images were generated (to be fair, I don't use Twitter so I didn't know this was a thing), but it seems so simple and effective I might say.
Isn't the cache-busting bot a primitive way of doing the "cleaning", are there any alternatives to that?
I've seen Cloudinary in action in a few projects me and a friend worked at college, didn't know it had that capability, really awesome feature.
You guys plan on moving to the HTML generated image in a short term?
I'm not totally sure I understand the question. Perhaps you could rephrase? To my knowledge this is the best way to go about it. Twitter associates the image with the URL which cannot be changed after it gets tweeted out. For updating future tweets we could tag a random hash on at the end like some do, but that wouldn't help the first part.
But maybe I'm misunderstanding.
No plans on moving away from this style immediately, but it will happen soon enough.
That's actually what I wanted to know, thanks.
I mean, I have zero knowledge regarding cache-busting, was just asking for curiosity.
Thanks for sharing this. Not heard of Cloudinary before so going to check it out. Are you still on the free plan or are you paying for it at this point?
Paying. One downside is their service is more expensive than a CDN, which you can work around, but at the expense of some convenience. Always trade offs.
Which metric got you that made it so you had to move off of free?
For this project it has been the bandwidth. We get plenty of traffic and even though we serve plenty of images from other CDN sources, the Cloudinary ones are still enough to be costly. The economics still work out okay because traffic is associated with revenue etc. but needs to be optimized more in the future.
I want to reproduce social previews for
dev.tomanually, but where I can get the source files for the social preview generation from Forem or is it specific here? For example, this one below:Thanks in advance!
I'm testing DEV.TO now and social images doesn't work for my posts but it works for others. Why?!
Probably an issue with _the first time you load it, it sometimes doesn't load fast enough and Twitter, etc. time out within milliseconds.
If you go to cards-dev.twitter.com/validator and try a couple times (helped by adding gobbledeegook params to cache-bust)...
Oh, thanks for the response. It works for Twitter and Facebook somehow. However Slack is totally not working for my posts. Other users' posts are handled easily in Slack. Is something missing?
Hmmmmm I'm not sure... My best guess is a caching issue, like once Slack has cached the scenario where it doesn't think there's a social image it keeps rolling with that?
Thank you for your time. It started to work because of unknown reason for me. Maybe I need to wait a little bit more after publishing.
I would suggest a much simpler alternative: render your image as a webpage and use a headless browser to generate a screenshot.
The only issue is that the integration of browsers is not equal with all languages and often requires specific things to be installed that are a bit flaky, but in the end that's the same issue as PDF generation right?
Also, social images are cached by the platforms themselves so there is no need for a CDN (as the CDN is provided by FB/Twitter/etc)
Wouldnt it be a lot simpler to have an SVG template and fill it? You can then have a simple Server (or function for our hipsters) that converts the SVG to an image. You can then use your normal CDN.
Yes, that approach seems solid.