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.

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?

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.

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.

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! 😅

#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

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)

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.

Hi! Thanks for such an awesome plugin!

I wanted to ask why the new beta version uses the context (this) style for working with the plugin? For example:

config.addPlugin(ogImage, {
  outputFileSlug: function () {
    return this.data.page.fileSlug;
  },
});

While the current version uses the approach of passing context through function parameters:

config.addPlugin(ogImage, {
  getOutputFileSlug: ({ context }) => context.page.fileSlug,
});

In my opinion, the approach using parameters is better. Here are my main points:

1. It is simpler to understand and maintain.
2. It is easier to type (using jsdoc or similar).
3. It generally fits better with the style of native 11ty plugins (for example, the image plugin and the filenameFormat function).

	config.addPlugin(Image.eleventyImageTransformPlugin, {
  	filenameFormat: (_id, source, width, format) => {
  		let extension = extname(source)
  		let name = basename(source, extension)

  		return `${name}-${width}w.${format}`
  	}
  })

These are the points that come to mind, but it would be great to hear what you think about this.

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

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!

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?

CSS variables are not supported; OKLCH colors are neither supported

:root {
  --bg: #c3e2ff;
}

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.

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?).

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

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

#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.

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.

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

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

Hey! Thanks for such an awesome plugin!

I have some linters like W3C and Linthtml on the Git pre-commit hook. Since the preview folder contains a lot of invalid HTML, I receive errors when committing changes. Of course, I can create a production build and then try to commit, but this takes time, and during development, I want to commit quickly.

I do not want to change my linters' configuration, and I do not use the preview functionality. Therefore, I think it would be better to add an option to disable the creation of the preview folder altogether.

I’m interested to know what you think about this.

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!