Eleventy plugin for generating social images (using SVG) | Notes

Direct Links:

• github.com/manustays/eleventy-plugin-generate-social-images

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

Demo §

This is how it looks like configured for one of my blogposts:

How does the plugin work? §

1. Image is created using an SVG template. Users can configure the design or pass custom SVG snippets to be inserted.
2. 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 <foreignObject>.
3. The title lines are sanitized and inserted into the SVG.
4. The SVG image is converted into PNG using the Sharp library.
5. Author image is superimposed onto the generated PNG using Sharp’s composite() function.

Installation & Usage

See the latest installation, usage & configuration guide on this plugin’s Github page.

Note: For a complete implementation example, checkout my website on Github.

Read on abhi.page/ | Read more notes