New Eleventy (11ty) Plugin: Social Images

As a content creator, your website isn't ready for the modern web without including images to help promote your content on social media.

Previously, I had written a tutorial on using Puppeteer to generate social media images dynamically. And I had included it in my Eleventy starter which I use as a template for my own projects. But that made it a little harder to share with others looking for the same functionality.

So - I've created a package for you to easily create dynamic social images for your Eleventy site!

This isn't strictly coupled to Eleventy. As long as you can output a JSON file with the title and a preferred image name for each page of your site content, you can use this package to create your social images 🙌

This package creates dynamic images sized for social media tags (particularly Twitter and Facebook) based on your available pages. Use one of the predefined color themes, or define your own style, template, or both to customize the layout.

Configure the CLI script to run after your Eleventy build, and by default images will be created in _site/previews/ as png images. Use the CLI options to define a custom outputDir and/or a custom imageDir.

The images are only created in your output directory since the process runs after the Eleventy build is complete.

The window size used for the screenshot is 600px wide by 315px tall (which is then saved at 2x resolution) which you can use to test your template and styles if you choose to create custom ones.

Usage

First, install the package:

npm install @11tyrocks/eleventy-plugin-social-images

There are three steps to using this package:

1. Setup the command line script and add it to your Eleventy build
2. Generate a JSON file containing data for each page you want social images
3. Include a reference to the image in your templates

For the full details, a sample of the JSON data needed, and tips about creating a custom template and/or custom styles, read the full docs on NPM.

This package has been tested locally and with Netlify CI, but needs wider testing on other hosts and setups. If you find a problem, please add an issue.