While porting my website to 11ty, I wrote my own plugin to automatically generated social-sharing-images for my articles.
A social-sharing-image shows as a thumbnail for a website/blogpost when shared on social media.
This plugin generates such images automatically using the title of your blogposts/pages. For a live example, share this page on a social media like Twitter or LinkedIn!
Images are generated in PNG format in a standard 1200×628px size that is suitable for sharing with most social networks.
Why another plugin? §
- I started with using Stephanie Eckles’s excellent plugin @11tyrocks/eleventy-plugin-social-images.
- She has written an excellent post about her plugin here.
- It uses HTML-based templating for easily configuring the social images.
- It uses a Puppeteer build script to generate images from the HTML template…
- I would recommend this plugin for most folks!
- But, I ran into issues running Puppeteer with my WSL2 based dev setup.
- I also wanted to keep the build process lighter (Puppeteer uses a headless Chrome to render and generate the screenshot).
- Taking inspiration from another amazing plugin – 11ty’s Image Plugin – the idea was to efficiently generate the social images using SVG and then convert it into JPEG/PNG using Sharp!
Who is this plugin for? §
- Want to automatically generate social-sharing-images for your Eleventy-based website (of course!)
- Don’t want Puppeteer dependency
- Want to use SVG to style your social images
This is how it looks like configured for one of my blogposts:
How does the plugin work? §
- Image is created using an SVG template. Users can configure the design or pass custom SVG snippets to be inserted.
- Title text is wrapped by breaking it into multiple lines at a pre-configured max-length-per-line. This was necessary because SVG does not support text-wrapping natively and the Sharp library does not support
- The title lines are sanitized and inserted into the SVG.
- The SVG image is converted into PNG using the Sharp library.
- Author image is superimposed onto the generated PNG using Sharp’s
Installation & Usage §
See the latest installation and usage guide on this plugin’s Github page.
Note: For a complete implementation example, checkout my website on Github.