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.

Sign up for GitHub

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

Jump to bottom

Getting an image url for meta tags when using eleventyImageTransformPlugin #278

Open
Seramis opened this issue Jan 22, 2025 · 1 comment
Open

Getting an image url for meta tags when using eleventyImageTransformPlugin #278

Seramis opened this issue Jan 22, 2025 · 1 comment

Comments

@Seramis
Copy link

Seramis commented Jan 22, 2025 •
edited
Loading

A similar question has been risen here, but I'm unable to make it properly work: #55

Relevant files in project:

  • _includes
    • layouts
      • post.njk
    • partials
      • head.njk
  • content
    • blog
      • 2025
        • article-folder
          • index.md
          • header.png
      • blog.11tydata.js

head.njk is a file that contains all the tags that should go between <head> and </head>. The articles have front-matter that may contain property called image. (with value of "header.png") post.njkis a layout file for the posts defined in blog.11tydata.js.

I would like to add the following line to head.njk:
{% if image %}<meta property="og:image" content="{{ ??? }}" />{% endif %}
What should be in the place of ????

I've tried multiple options like:

  • {{ page.url | absoluteUrl(metadata.url) }}{{ image }}
    This file will not exist in the output.
  • Created a shortcode roughly based on the earlier issue above, but couldn't supply the image path to the Image object properly.
    One important part is that all my posts get a "permalink" computed for them with the following config for eleventy, using title for slug instead of file path itself:
// Set default computed data for all templates
eleventyConfig.addGlobalData("eleventyComputed", {
	permalink: data => {
		if (!data.permalink) {
			// Automatically slugify titles for URLs if no permalink is explicitly set
			var year = data.date
				? new Date(data.date).getFullYear() + "/"
				: "";
			var name = slugify(data.title ?? data.page.fileSlug, { lower: true, strict: true }) + "/";
			return `/${year}${name}`;
		}
		return data.permalink; // Use the explicitly set permalink if available
	}
});

So in the end, the page.url can not be used for the image source path calculation. It should be somehow relative to the input file of content/blog/2025/blog-folder/index.md.

How could I let the eleventyImageTransformPlugin process a image, that is defined in front-matter as relative path to provide me an URL that I could use in head.njk for tags?
@Seramis
Copy link
Author

Seramis commented Jan 23, 2025

I think I was able to solve it, but please let me know if I've "overdone" it. It looks a bit cumbersome and maybe I'm reinventing a wheel. Please do say so, if I do.

So I created the following function:

async function contentImgUrlFilter(src) {
	const inputDir = path.dirname(this.page.inputPath);
	const imagePath = path.resolve(inputDir, src);
	const outputDir = path.dirname(this.page.outputPath);
	const urlPath = this.page.url;

	const stats = await Image(imagePath, {
		widths: [1200], // Width for Open Graph image
		formats: ["png"],
		outputDir: outputDir, // Output directory
		urlPath: urlPath, // Public URL path
		filenameFormat: function (hash, src, width, format) {
			return `${hash}-${width}.${format}`;
		}
	});

	return stats.png[0].url; // Return the URL of the processed image
}

I registered it as a filter:

eleventyConfig.addFilter("contentImgUrlFilter", contentImgUrlFilter);

... and then i can use it like this:

<meta property="og:image" content="{{ image | contentImgUrlFilter | absoluteUrl(metadata.url) }}" />

It seems to work well and has no assumptions on the project structure itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Seramis