Fix header image in meta tags.

Author: Seramis

_config/filters.js

@@ -1,5 +1,6 @@
 import { DateTime } from "luxon";
 import striptags from "striptags";
+import Image from "@11ty/eleventy-img";
 
 export default function(eleventyConfig) {
 	eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
@@ -70,6 +71,8 @@ export default function(eleventyConfig) {
 		extractExcerpt(post)
 	);
 
+	eleventyConfig.addFilter("contentImgUrlShortcode", contentImgUrlShortcode);
+
 };
 
 // Taken from here => https://keepinguptodate.com/pages/2019/06/creating-blog-with-eleventy/
@@ -85,3 +88,19 @@ function extractExcerpt(article) {
 
 	return striptags(content.slice(0, content.indexOf("\n")));
 }
+
+async function contentImgUrlShortcode(src) {
+	// src might be small.png - taken from frontmatter
+	const imageSrc = (this.eleventy.directories.input.replace("./", this.eleventy.env.root + "/") + this.page.filePathStem + "/../" + src).replace("//", "/");
+	let metadata = await Image(imageSrc, {
+	  widths: [600],
+	  formats: ["png"],
+	  urlPath: this.page.url,
+	  outputDir: `./_site/${this.page.url}`,
+	});
+  
+	const data = metadata.png[0];
+	// data.url might be /blog/hello-world/xfO_genLg4-600.jpeg
+	// note the filename is a content hash-width combination
+	return data.url;
+}

_config/shortcodes.js

@@ -1,3 +1,2 @@
 export default function(eleventyConfig) {
-};
-
+};

_includes/layouts/post.njk

@@ -37,6 +37,7 @@ h1.post-title {
 }
 
 {%- endcss %}
+
 <article>
 	{%- if image %}
 		<img src="{{ image }}" alt="" class="post-header" />

_includes/partials/head.njk

@@ -18,7 +18,7 @@
   },
   "headline": "{{ title or metadata.title }}",
   "description": "{{ description or metadata.description }}",
-  {% if image %}"image": "{{ page.url | absoluteUrl(metadata.url) }}{{ image }}",{% endif %}
+  {% if image %}"image": "{{ image | contentImgUrlShortcode | absoluteUrl(metadata.url) }}",{% endif %}
   "author": {
     "@type": "Person",
     "name": "{{ metadata.author.name }}"
@@ -42,12 +42,12 @@
 <meta property="og:type" content="website">
 <meta property="og:title" content="{% if title %}{{ title }} | {% endif %}{{ metadata.title }}">
 <meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ metadata.description }}{% endif %}">
-{% if image %}<meta property="og:image" content="{{ page.url | absoluteUrl(metadata.url) }}{{ image }}" />{% endif %}
+{% if image %}<meta property="og:image" content="{{ image | contentImgUrlShortcode | absoluteUrl(metadata.url) }}" />{% endif %}
 
 <meta property="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="{% if title %}{{ title }} | {% endif %}{{ metadata.title }}" />
 <meta name="twitter:description" content="{{ description or metadata.description }}" />
-{% if image %}<meta name="twitter:image" content="{{ page.url | absoluteUrl(metadata.url) }}{{ image }}" />{% endif %}
+{% if image %}<meta name="twitter:image" content="{{ image | contentImgUrlShortcode | absoluteUrl(metadata.url) }}" />{% endif %}
 
 <meta name="robots" content="index, follow" />
 <link rel="alternate" href="{{ 'feed/feed.xml' | absoluteUrl(metadata.url) }}" type="application/atom+xml" title="{{ metadata.title }}">

eleventy.config.js

@@ -146,10 +146,10 @@ export const config = {
 
 	// These are all optional:
 	dir: {
-		input: "content",          // default: "."
+		input: "./content",          // default: "."
 		includes: "../_includes",  // default: "_includes" (`input` relative)
 		data: "../_data",          // default: "_data" (`input` relative)
-		output: "_site"
+		output: "./_site"
 	},
 
 	// -----------------------------------------------------------------