Learn how to leverage the powerfully flexible templating capabilities of 11ty to generate templates for automating social sharing screenshots with ...
For further actions, you may consider blocking this person and/or reporting abuse
Hi Stephanie,
After investigating various approaches to generate social images automatically, I settled on using yours as my starting point. This article has been very helpful in getting it implemented in my site (cdnplanet.com) and Eleventy setup. It's all done now, including a some optimizations that make sense for me, for example check with fs to not generate the image if it already exists.
cdnplanet.com/static/img/social/ge...
Bye!
Aaron
Hey Aaron,
That's awesome to hear, thanks for letting me know! ๐ซ
Really nice image, too!
Nice! I use Gatsby and I do it semi-manually using a modified version of the script from this tutorial.
I run the script before I publish each post, and it uses some stuff that is stored in the frontmatter of the post (the title, an emoji and a link to an image from Unsplash) to generate two separate images for Twitter and DEV.
As a side note - your website looks amazing! I'm loving the the subtle rainbow / gradients ๐
Cool! I use Gatsby at my day job, it was my intro to JAMstack ๐
And thanks so much! ๐ซ
Updated with a better solution if using webfonts. The change was:
Great post, are there any screenshot examples for the blog posts?
Thanks! The ones I'm generating for the site mentioned are basically mini versions of the header that you see for posts. The wonderful part is that you can use CSS to achieve any design needed! Think of it as essentially an "iPhone in landscape mode" size canvas. You can populate the base HTML with something mimicking your real content to create the design, and start by allowing it to be picked up by 11ty for easier review, just shrink the viewport down to 600x315 ๐๐ป Hope that helps!
I was looking for a link to the jpg file :).
Ha, ok! Here's one - I update only the title and the episode number:
moderncss.dev/img/animated-image-g...
nice
Do you have the whole script completed? I cannot get it to work and wonder if I have made a mistake somewhere
The completed script is represented here, but you can also download the starter I created that uses this to explore what might be different: 11ty-netlify-jumpstart.netlify.app/