Dynamically generate social media images for your Eleventy (11ty) pages. This plugin uses SVG & does not depend on Puppeteer!
This version will only run with Eleventy 3.0.0 +
This plugin provides an 11ty ShortCode that can be used to automatically generate social images in your Eleventy website.
For example:
{% GenerateSocialImage "Eleventy plugin for generating social images (using SVG)" %}
will generate the following social image (website, email address and author-image are set during configuration):
The social image is first created as SVG and then converted to PNG using Sharp.
- Generates the image using SVG and then converts it into PNG using Sharp.
- Custom logic to wrap the title line in SVG (as Sharp does not support SVG foreignObject).
- Adds an author/promo image using Sharp composite (as Sharp does not support external image in SVG).
npm i @fat-buddha-designs/eleventy-social-images/const generateSocialImages = require("@fat-buddha-designs/eleventy-social-images/");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(generateSocialImages, {
promoImage: "./src/img/my_profile_pic.jpg",
outputDir: "./_site/img/preview",
urlPath: "/img/preview",
siteUrl: "Website ~ https://fatbuddhadesigns.co.uk/",
siteEmail: "Email ~ info@fatbuddhadesigns.co.uk/",
titleColor: '#dfa634',
bgColor: '#fff',
terminalBgColor: '#333',
lineBreakAt: '48'
});
};or for ESM
const generateSocialImages from "@fat-buddha-designs/eleventy-social-images/";
export default async function (eleventyConfig) {
eleventyConfig.addPlugin(generateSocialImages, {
promoImage: "./src/img/my_profile_pic.jpg",
outputDir: "./_site/img/preview",
urlPath: "/img/preview",
siteUrl: "Website ~ https://fatbuddhadesigns.co.uk/",
siteEmail: "Email ~ info@fatbuddhadesigns.co.uk/",
titleColor: '#dfa634',
bgColor: '#fff',
terminalBgColor: '#333',
lineBreakAt: '48'
});
};For example, in your base.njk template file, use it in the <head> for generating social image meta tags:
<meta property="og:image" content="{% GenerateSocialImage title %}" />
<meta name="twitter:image" content="{% GenerateSocialImage title %}" />| Option | Type | Default | Description |
|---|---|---|---|
| promoImage | string | Path to a promo Image (ideally, circular) that will be embedded in the social-images | |
| outputDir | string | "./_site/img/preview" | Project-relative path to the output directory where images will be generated |
| urlPath | string | "/img/preview" | A path-prefix-esque directory for the <img src> attribute. e.g. /img/ for <img src="/img/MY_IMAGE.jpeg">
|
| siteUrl | string | The website url to show on the social-image | |
| siteEmail | string | The website email address to show on the social-image | |
| titleColor | string | "white" | The color of the page-title |
| bgColor | string | Optional background color. Otherwise, shows the gradient pattern | |
| terminalBgColor | string | "#404040" | Background color of the terminal window design |
| hideTerminal | boolean | false | If true, hides the terminal window design behind the title |
| customSVG | string | Custom SVG code to be added to the image. Use this to add your own design or text anywhere on the image | |
| customFontFilename | string | Filename of custom local font used for title (see Custom Fonts) | |
| lineBreakAt | number | 35 | Maximum row length for wrapping the title. Required because SVG does not have auto-wrapping text. Should depends on the font used |
The Sharp library uses librsvg that uses fontconfig to load external fonts. Therefore, the following steps are required:
-
Download your font file in project sub-folder. Eg:
./fonts/sans.ttf -
Create a file
fonts.confwith the following content:
-
Setup the following environment variable on your build server (eg: Netlify):
FONTCONFIG_PATH=.
- Original idea from eleventy-plugin-social-images
- I created my own version to allow for the website URL and email address