|
Hi! I'm looking for a way to define page's social-image meta tag based on the image linked on the first img tag of the html's main section. As I'm using the eleventy-img plugin for all images of my site, this seems to be an easy way to solve this. In isolation, this piece of code would solve the problem: I believe that this code (or another of the same type) should be applied after image conversions and with the html already formed by the build process. The result I expect is that the I'm not very familiar with Node.js and the Eleventy build process, so I'm wondering what's the best way to solve this process. I appreciate any suggestions. |
Replies: 1 comment 8 replies
|
I'd start by looking at https://www.11ty.dev/docs/config/#transforms. |
Untested, but I'd assume something along these lines: eleventyConfig.addTransform("og-image", function(content) {
if (outputPath && outputPath.endsWith(".html")) {
const $ = cheerio.load(markup);
const $firstImage = $('main img');
$('head').append(`<meta name="og:image" content="${$firstImage.attr('src')}" />`);
return $.html();
}
// Don't modify otherwise
return content;
}) |
|
Thank you @Ryuno-Ki, this is exactly what I was looking for! Just needed some tweaking: eleventyConfig.addTransform("og-image", function(content, outputPath) {
if (outputPath && outputPath.endsWith(".html")) {
const $ = cheerio.load(content);
const $firstImage = $('main img');
$('head').append(`<meta name="og:image" content="https://my.website.url${$firstImage.attr('src')}">`);
return $.html();
}
// Don't modify otherwise
return content;
})
I also tested this idea based on @pdehaan solution and it works perfectly, although it needs more work to change the front matter of all the pages, among other adjustments that proved necessary in my case (gif images, for example, which have a specific treatment). Despite that, in situations where the build time difference is significant, this seems to be a good solution. Thank you all! |
|
🥳 Would you mind to mark a comment as an answer? |
|
Done! |
|
Per https://www.11ty.dev/docs/config/#transforms, you can get the // Eleventy 1.0+
eleventyConfig.addTransform("transform-name", function (content) {
console.log( this.inputPath );
console.log( this.outputPath );
return content; // no change done.
});Also, https://www.11ty.dev/docs/plugins/rss/#supplies-the-following-nunjucks-filters has a nice I'd have to do some research into the $('main img.og-image');Looking at https://ogp.me/#structured, it seems like there are a few other optional $('head').append(`
<meta name="og:image" content="https://my.website.url${$firstImage.attr('src')}" />
<meta name="og:image:alt content="${$firstImage.attr('alt')}" />
`);And like you said, if it's a portfolio site, there isn't much risk of a page not having an image, but you also might want to add a quick check around this to make sure that const $firstImage = $('main img'); |
I'd start by looking at https://www.11ty.dev/docs/config/#transforms.
Transforms run pretty late in the build pipeline when the HTML should be "complete".
Then, check whether the current file being transformed is an .html template, and if so, use something like https://cheerio.js.org/ to query the markup for your first
main imgtag and then append your<meta property="og:image" content="{{ something }}"/>tag into the<head>and then return the new HTML DOM which will be written to the disk.