kiwikilian / eleventy-plugin-og-image Goto Github PK
View Code? Open in Web Editor NEWCreate Open Graph images in Eleventy using your templates, data and CSS. Fast and reproducible, without a headless browser.
License: MIT License
Create Open Graph images in Eleventy using your templates, data and CSS. Fast and reproducible, without a headless browser.
License: MIT License
I think there is still a lot to be improved with how the output path is generated. A few ideas or topics to investigate:
@11ty/eleventy-utils
?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.
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
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.
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...
<meta property="og:image" content="\og-images\index.png">
2.0.1
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.
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.
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?
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!
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
?).
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.
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!
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! 😅
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)
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.