Dynamically generate social media images for your Eleventy blog pages. Unlike other similar plugins, this one uses SVG & does not depend on Puppeteer!
.png)
- Introduction
- Why another social-image generator?
- How does it work?
- Installation and Usage
- Config Options
- Custom Fonts
- Todo
- Credits
This plugin provides an 11ty ShortCode that can be used to automatically generate social images in your Eleventy website or blog.
For example:
{% GenerateSocialImage "Eleventy plugin for generating social images (using SVG)" %}
will generate the social image on top of this page 👆🏼 (website-name and author-image are set during configuration):
The social image is first created as SVG and then converted to PNG using Sharp.
There is already a very good plugin eleventy-plugin-social-images by Stephanie Eckles who has written a very good article about her approach. The plugin is very customizable and can serve most people very well.
I created a new plugin because the above mentioned plugin...
- uses Puppeteer to generate the image from a webpage.
- I faced some issues running Puppeteer on WSL2, so decided to get rid of the dependency.
- uses a separate build process to generate the images.
- While it is totally fine (even better, as it can be used with any other SSG), I wanted the workflow within the Eleventy build process, i.e, by using an Eleventy ShortCode.
- 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 install @manustays/eleventy-plugin-generate-social-imagesconst generateSocialImages = require("@manustays/eleventy-plugin-generate-social-images");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(generateSocialImages, {
promoImage: "./src/img/my_profile_pic.jpg",
outputDir: "./_site/img/preview",
urlPath: "/img/preview",
siteName: "abhi.page/",
titleColor: "#fedb8b",
bgGradient: ['#ABB8C0', '#A0ACB3']
});
};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 %}" />Note: For a complete implementation example, checkout my website on Github.
| 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"> |
| siteName | string | The website name 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 | |
| bgGradient | array | ['#647DEE', '#7F53AC'] | An array of colors to add as the background gradient. If setting the gradient, do not pass the 'bgColor' option |
| 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:<?xml version="1.0"?> <!DOCTYPE fontconfig SYSTEM "fonts.dtd"> <fontconfig> <dir prefix="default">fonts</dir> </fontconfig>
- Setup the following environment variable on your build server (eg: Netlify):
FONTCONFIG_PATH=.
- Cache result to avoid regenerating same image
- Better text-wrap logic for the page-title in SVG
- Custom SVG
- Custom font
- More customization options!
- Original idea from eleventy-plugin-social-images
- I created my own to avoid the Puppeteer dependency.