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

[AleksandrHovhannisyan]

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.

[KiwiKilian]

Which version are you on? Parts of this change in the current betas.

Easiest would be a repo/branch I could have a look at.

[AleksandrHovhannisyan]

Sounds good, I'll throw together a repro sandbox sometime in the next few days and get back to you

[AleksandrHovhannisyan]

@KiwiKilian Repro sandbox here: https://github.com/AleksandrHovhannisyan/eleventy-plugin-og-image-241

Running on @11ty/eleventy@2.0.1 and the latest version of your plugin.

1. npm install
2. npm run serve
3. Observe server console stack trace:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble writing to "dist/index.html" from "./src/index.html" (via EleventyTemplateError)
[11ty] 2. Could not find file for the `ogImage` shortcode, looking for: ./og-image.og.njk, file:./src/_layouts/base.html, line:6, col:5 (via RenderError)
[11ty] 3. Could not find file for the `ogImage` shortcode, looking for: ./og-image.og.njk (via Error)
[11ty]
[11ty] Original error stack trace: Error: Could not find file for the `ogImage` shortcode, looking for: ./og-image.og.njk
[11ty]     at Object.ogImage (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/eleventy-plugin-og-image/.eleventy.js:53:15)
[11ty]     at Object.<anonymous> (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty]     at Tag.render (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/@11ty/eleventy/src/Engines/Liquid.js:170:39)
[11ty]     at render.next (<anonymous>)
[11ty]     at toPromise (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/liquidjs/dist/liquid.node.cjs.js:499:32)
[11ty]     at async toPromise (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/liquidjs/dist/liquid.node.cjs.js:507:25)
[11ty]     at async toPromise (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/liquidjs/dist/liquid.node.cjs.js:507:25)
[11ty]     at async TemplateLayout.render (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/@11ty/eleventy/src/TemplateLayout.js:236:25)
[11ty]     at async Template.renderPageEntry (/home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/@11ty/eleventy/src/Template.js:793:17)
[11ty]     at async /home/aleks/dev/issues/eleventy-plugin-og-image-241/node_modules/@11ty/eleventy/src/Template.js:822:21
[11ty] Wrote 0 files in 0.08 seconds (v2.0.1)

I've tried a few different things: moving og-image.og.njk to be in the same directory as the base.html layout, changing the relative path to be ../_includes/og-image.og.njk, and just removing the relative path specifier altogether ("og-image.og.njk"). Nothing works.

This is what confused me about the docs, actually: They don't specify where the og-image.og.njk partial is supposed to go and why the shortcode is being invoked with a relative path pointing to the same directory as the template that is invoking it.

[KiwiKilian]

The path is relative from where you execute the command. The plugin can't determine from which file the code short code is actually called (like a layout, partial, pages).

You can place the template file anywhere you like within your input directory.

For your reproduction it works like this:

{% ogImage "./src/_includes/og-image.og.njk" %}

Next up you will have an error, because you are not loading any font but have text in your layout, see example usage in readme.

In version 2.x.x the plugin is not aware of input directories set via config or cli flags. The path therefore is always relative to the directory from which you are executing the eleventy command. When you upgrade your project to ESM and upgrade the plugin to v4 (ESM-only, already available in beta) the path will be relative to you 11ty input directory, that's also clarified in the updated docs.

I hope this solves for your problem!

[AleksandrHovhannisyan]

Got it, thanks! Would you like me to put in a doc update to clarify this in the readme?

[KiwiKilian]

Already done, also added a note to the beta.