kiwikilian / eleventy-plugin-og-image

Create Open Graph images in Eleventy using your templates, data and CSS. Fast and reproducible, without a headless browser.

Hey there! 👋

I'm Kilian 👨🏼‍💻, a web developer currently based at the foot of the alps in Salzburg, Austria 🇦🇹. Currently I'm trying to help you choose sustainable mobility options 🚲 and solve geospatial problems 🗺.

Here I'm either squashing some bugs 🪲 or fiddling around with some open source ideas ✨.

You can find me here:

• www.kilianfinger.com
• Mastodon @KiwiKilian

eleventy-plugin-og-image's Issues

Generated path are backslashes that prevents OpenGraph images to be displayed

I have a very weird bug : generated folder in _site (my output) is made with backslashes (antislash) but it seems that browser can't render OG image if it the path is not made with / rather than antislash :
here is my .eleventy.js plugin config :

const fs = require('node:fs');
const path = require('node:path')
const EleventyPluginOgImage = require('eleventy-plugin-og-image');

module.exports = function(eleventyConfig) {
  
  // AUTO GENERATED OPENGRAPH IMAGES
  eleventyConfig.addPlugin(EleventyPluginOgImage, {
    outputDir: "_site/og-images",
    urlPath: "/og-images/",
    satoriOptions: {
      fonts: [
        {
          name: 'Satoshi-Variable',
          data: fs.readFileSync('./src/fonts/Satoshi-Variable.woff'),
          weight: 500,
          style: 'normal',
        },
      ],
    },
  });
  }

my og-image.og.njk is absolute classic and is placed at root (sibling to .eleventy.js, tried putting it in ./src or inner folders but don't change anything) :

<div class="background">
    <div class="card">
        <h1 class="title">{{ title }}</h1>
     </div>
</div>

here is ./src/_includes/head.html :

{% ogImage "og-image.og.njk", { title: title} %}

here is the log I get when running build or dev :

[11ty] Writing _site\og-images\blog-sq-lite.png from og-image.og.njk
[11ty] Writing _site\og-images\blog.png from og-image.og.njk

and on and on....

tried every config option on the plugin but don't do anything...

HTML GENERATED ON BROWSER : the backslashed prevent the OG image to be rendered

<meta property="og:image" content="\og-images\index.png">

ELEVENTY VERSION

2.0.1

Where does the OG image partial need to be placed in a project?

Howdy!

I was trying to replicate the demo from the README:

{% ogImage "./og-image.og.njk", { title: "Hello World!" } %}

But I kept getting an error that Eleventy was unable to find my og-image.og.njk partial file relative to the template that was requesting it (src/_layouts/base.html).

Does the OG image partial need to be placed inside _layouts/ if it's being requested from a layout file? Or does it need to live in _includes or somewhere else?

Sorry, I can't put together a repro case right now, but I'll see if I can a bit later.

Error when building, can't find the template file, even though it's in the same directory

I'm trying to use your plugin, but I'm having a bit of trouble. I'm on Eleventy v2, node v20. When I do npm run serve it throws the following error:

[11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `ogImage` (via Template render error)
[11ty] 3. Could not find file for the `ogImage` shortcode, looking for: ./og-post.njk (via Template render error)

This is even when the og-post.njk file is in the same directory as the template file being parsed.

The line in the template looks like this:

{% ogImage "./og-post.njk", { title: "Hello World!" } %}

I have tried without the ./ and that doesn't work either.

Any suggestions? Thanks in advance!

Omit output for permalink=`false`

#157 (comment)

As permalink=false indicates the page will be written to file system, then ogImge shall also not write to file system. If other behavior is expected, please write your own shortcode.

Handling of kebab-cased styles

Since installing this plugin I've had an error message in my terminal:

`container` unknown or invalid utility

I've now worked out this is coming from me using kebab-cased class names in my template. The class was text-container. If I swap it to being camel-cased, the error goes away. Other kebab cased classes on the templates don't seem to be causing issues interestingly.

The only similar mention of this I could find was on Satori, where it sounds like unrecognised options being passed. If I understand how this plugin works correctly, the styles from the template get inlined with each element before passing to Satori - I wonder if something is going slightly wrong with kebab-cased styles.

Issue with Github actions

Thanks to your previous help I got the ogImage working locally, but when I pushed the changes to git, a github action runs and compiles everything and then copies the results over to my server. When this process happened with the ogImage content, it threw an error. Is it related to it not being able to find the template?

[11ty] 1. Having trouble writing to "html/books/index.html" from "./src/books/books.11ty.js" (via EleventyTemplateError)
[11ty] 2. (./src/_includes/books.njk)
[11ty]   Template render error: (/github/workspace/src/_includes/header-books.njk)
[11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `ogImage` (via Template render error)
[11ty] 3. Cannot read properties of undefined (reading 'includes') (via Template render error)
[11ty] 
[11ty] Original error stack trace: TypeError: Cannot read properties of undefined (reading 'includes')
[11ty]     at new TemplateRender (/github/workspace/node_modules/@11ty/eleventy/src/TemplateRender.js:29:73)
[11ty]     at compileFile (/github/workspace/node_modules/@11ty/eleventy/src/Plugins/RenderPlugin.js:66:12)
[11ty]     at renderOgImage (/github/workspace/node_modules/eleventy-plugin-og-image/src/renderOgImage.js:24:31)
[11ty]     at Object.ogImage (/github/workspace/node_modules/eleventy-plugin-og-image/.eleventy.js:56:40)
[11ty]     at Object.<anonymous> (/usr/local/lib/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty]     at ShortcodeFunction.run (/usr/local/lib/node_modules/@11ty/eleventy/src/Engines/Nunjucks.js:200:14)
[11ty]     at Template.root [as rootRenderFunc] (eval at _compile (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:12:35)
[11ty]     at Template.render (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:454:10)
[11ty]     at eval (eval at _compile (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:18:10)
[11ty]     at fn (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/a-sync-waterfall/index.js:26:24)

Merge scoped shortcode data to `data` of OG template

Merge available this.page and this.eleventy data in shortcode with data pass to OG template.

https://www.11ty.dev/docs/shortcodes/#scoped-data-in-shortcodes

Improve Path Handling

I think there is still a lot to be improved with how the output path is generated. A few ideas or topics to investigate:

• Is it working on Windows?
• Permalinks handling
• Better usage of TemplatePath form @11ty/eleventy-utils?

Sharper resolution option

The images look a bit less crisp than I'd like. I see that the default Sharp png compression is 6 (out of 9) – is that what's used here? Is there an option to change it?

Thanks!

GitHub page doesn't surve images whose filenames start with a underscore `_`

Sometimes the generated image's hash names can start with _. However, GitHub page doesn't serve these files :(

Stable files in production

I'd like to see the option of stable file names for production. I'm interested in predetermining the URL to the image on another one of my sites and having the filename hash makes this difficult. Looks like it might be as simple as exposing the previewFilenames Boolean in the plugin options (maybe as a new name: stableFilenames?).

Feature request: ignore frontmatter

Firstly, thank you for producing this plugin.

My request is for the plugin to ignore any frontmatter it comes across. At the moment, it's unhandled and gets rendered in to the final image.

Background:
I found testing the rendering to be a bit cumbersome - as I often wanted to directly edit the styles in the browser. To get around this, I've set up Eleventy to render the template as a normal page. So the same template is used to render a page for development, and for the opengraph plugin. I've tried using Frontmatter to set some testing data, assuming it wouldn't get used by the plugin. However it still gets rendered.

I can obviously work around this, but feel it would be good for the plugin to either make use of front-matter, or disregard it.

Render `File` is not compatible with <= Eleventy 1.x

#157 (comment)

File is not exported on 1.x. If somebody knows, how to import this on 1.x feel free to make a PR. For now this plugin will only be >= 2.x

Should OG Image Templates live in includes dir?

Currently the .og.* templates can live anywhere – helps to keep the templates near where they might be needed. Plugin could also use the includes per default, would there be a benefit?

Issues with rendering / Satori

This is just a note for others, as I've found Satori's rendering to be unreliable. I spent some time yesterday making a good looking template, but have now found it to be unrenderable.

The primary issue is that Satori seems to break positioning of inline elements, on which my design relies.

I've also found the limited (and somewhat buggy) implementation of css means that what renders well in browser can often not be reproduced.

Local Images

How to use local/relative images inside OG image template?

Using `this` within `getOutputFileSlug` and `generateHTML` throws error (v4.0.0-beta.2)

Thanks for all the hard work that went into the version 4 beta! Love that there’s caching built-in now! It should really speed up my builds. ❤️

Unfortunately, I’ve been running into problems with the new format of the getOutputFileSlug and generateHTML options.

The new docs say that I should be able to access the og image instance by using this in these functions, e.g.

eleventyConfig.addPlugin(EleventyPluginOgImage, {
  generateHTML: () => this.outputUrl(),
});

But doing so throws the following error:

[11ty] 1. Having trouble writing to "_site/example.html" from "./src/pages/example.md" (via EleventyTemplateError)
[11ty] 2. (./src/eleventy/layouts/root.njk)
[11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `ogImage` (via Template render error)
[11ty] 3. Cannot read properties of undefined (reading 'outputURL') (via Template render error)
[11ty] 
[11ty] Original error stack trace: TypeError: Cannot read properties of undefined (reading 'outputURL')
[11ty]     at OgImage.generateHTML (file:///Users/chrisburnell/Developer/example.com/eleventy.config.js:59:28)
[11ty]     at OgImage.generateHtml (file:///Users/chrisburnell/Developer/example.com/node_modules/eleventy-plugin-og-image/src/OgImage.js:136:48)
[11ty]     at Object.ogImageShortcode (file:///Users/chrisburnell/Developer/example.com/node_modules/eleventy-plugin-og-image/.eleventy.js:125:22)

It seems that this is undefined in this context. A similar error is thrown when I try using this inside my option’s getOutputFileSlug function as well.

For clarity’s sake, I’m using the shortcode in my root.njk layout like so:

{% setAsync 'ogOutputUrl' -%}
  {% ogImage './eleventy/layouts/og-image.og.njk', { title: meta_title, description: description, date: date } %}
{%- endsetAsync %}
<meta property="og:image" content="{{ ogOutputUrl }}" data-pagefind-meta="image[content]">

Apologies if I’m overlooking something here! 😅

Support for woff2?

My site uses woff2 fonts (Source Sans Pro). When I attempt to reference them with this plugin I get this error:

Unsupported OpenType signature wOF2 (via Template render error)

I've worked around it by also adding the woff version to my assets directory, but if possible it would be nice if the plugin supported woff2 directly.

LinkedIn expects `name="image"` within the `<meta/>` tag

When you send a URL into the post inspector, the result expects the following construction.

<meta name="image" property="og:image" content="[Image URL here]">

Looks like this would be a quick change at this line.

Properly use Render Plugin

Currently shortcodes from the project don't work inside the OG Image templates. Proper usage of the Render Plugin should make this possible.