Local Images

[KiwiKilian]

How to use local/relative images inside OG image template?

[KiwiKilian]

For now I'm using a shortcode to inline images:

import { promises as fs } from 'node:fs';
import path from 'node:path';

eleventyConfig.addNunjucksAsyncShortcode('inlineImage', async (imagePath) => {
  const base64Image = await fs.readFile(path.join(this.eleventy.directories.input, imagePath), 'base64');

  return `data:image/jpeg;base64,${base64Image}`;
});

Inside og-image.og.njk:

<img width="352" height="440" src="{% inlineImage "assets/images/some-image.jpeg" %}" />

[what1s1ove]

Hi there!

Here is a slightly updated example to cover more image formats:

import { promises as fs } from 'node:fs'
import path from 'node:path'

config.addNunjucksAsyncShortcode(
`inlineImage`,
async (path) => {
  let extension = path.extname(path).slice(1)
  let imgPath = path.join(config.dir.input, path)
  let base64Image = await fs.readFile(imgPath, `base64`)

  if (extension === `svg`) {
  extension = `svg+xml`
  }
  
  return `data:image/${extension};base64,${base64Image}`
},
)

But it is still not perfect. It is better to use a library like file-type (https://www.npmjs.com/package/file-type) to cover more cases.

Also, I think it would be good if this plugin itself provided additional shortcodes/filters, like the official RSS plugin does: https://www.11ty.dev/docs/plugins/rss/#supplies-the-following-nunjucks-filters

[KiwiKilian]

Thanks for sharing, was also thinking to add this one day to the plugin.