A social-sharing-image shows as a thumbnail for a website/blogpost when shared on social media.
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
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
Note: For a complete implementation example, checkout my website on Github.