Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
teotimepacreau opened this issue Mar 23, 2024 · 7 comments

Comments

@teotimepacreau
Copy link

teotimepacreau commented Mar 23, 2024

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
Copy link
Owner

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

@teotimepacreau
Copy link
Author

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

OS : Windows 11

github-actions bot pushed a commit that referenced this issue Mar 23, 2024
## [2.1.2](v2.1.1...v2.1.2) (2024-03-23)

### Bug Fixes

* outputUrl on windows with forward slash ([e1bff34](e1bff34)), closes [#234](#234)
@KiwiKilian
Copy link
Owner

KiwiKilian commented Mar 23, 2024

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!

Copy link

🎉 This issue has been resolved in version 2.1.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this issue Mar 23, 2024
# [3.2.0-beta.5](v3.2.0-beta.4...v3.2.0-beta.5) (2024-03-23)

### Bug Fixes

* hashes without special chars with hex digest ([47fb387](47fb387))
* outputUrl on windows with forward slash ([e1bff34](e1bff34)), closes [#234](#234)
Copy link

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

The release is available on:

Your semantic-release bot 📦🚀

@teotimepacreau
Copy link
Author

teotimepacreau commented Mar 23, 2024

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
Copy link
Owner

Awesome, glad it's beeing used 👍 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants