KiwiKilian / eleventy-plugin-og-image

Create Open Graph images in Eleventy using your templates, data and CSS. Fast and reproducible, without a headless browser.
MIT License
52 stars 3 forks source link

Generated path are backslashes that prevents OpenGraph images to be displayed #234

Closed teotimepacreau closed 7 months ago

teotimepacreau commented 7 months ago

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

KiwiKilian commented 7 months ago

Thanks for your report! What package version are you using? And what operating system are you on?

teotimepacreau commented 7 months ago

i'm using "eleventy-plugin-og-image": "^2.1.1"

OS : Windows 11

KiwiKilian commented 7 months ago

Thanks for your feedback, I currently don't have a windows machine available so I can't test properly. But I've released a fix as version 2.1.2. Could you please upgrade the plugin and give it a try? Let me know, if the bug is fixed!

github-actions[bot] commented 7 months ago

:tada: This issue has been resolved in version 2.1.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 7 months ago

:tada: This issue has been resolved in version 3.2.0-beta.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

teotimepacreau commented 7 months ago

now working thanks to your fix !! thanks you a lot, really cool and useful plugin, I love it, thanks for your reactivity and your good work

KiwiKilian commented 7 months ago

Awesome, glad it's beeing used 👍 .

github-actions[bot] commented 1 month ago

:tada: This issue has been resolved in version 4.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: