Parsing shortcodes in global data

[trst]

Hey, I am having a bit of trouble wrapping my mind around this one: I am pulling data from an api into a global data file and as the data is coming in I do a bit of transformation on the main content, effectively replacing html image tags <img ... /> with shortcodes for the eleventy-image-plugin {% image ... %}

The problem is that though the shortcode is properly injected into the data file before templates are processed, they are added raw into the content and are not processed. Is this possible and I am missing something? Or am I trying to bend eleventy to do something that it isn't built for (and should look into writing a plugin, opening a ticket, etc.)?

[pdehaan]

Disclaimer: I don't have a lot of experience w/ @11ty/eleventy-img plugin, but maybe we can try a couple things.

I think you're correct, and I'm skeptical that you can replace the output in the data file with liquidjs/nunjucks shortcodes. Something like this worked for me locally, but it's a really basic use case, so it'd still need a bit more plumbing to see if it's a viable solution

First, I put the eleventy-img plugin code (from somewhere in the README) in an external file, so I can share it between the .eleventy.js config file, and the global data file (since I don't think the global data files have the full Eleventy config access).

// ./img-shortcode.js
const Image = require("@11ty/eleventy-img");

async function imageShortcode(src, alt) {
  let metadata = await Image(src, {
    widths: [300, 600],
    formats: ["avif", "jpeg"]
  });

  let imageAttributes = {
    alt,
    sizes: "100vw",
    loading: "lazy",
    decoding: "async",
  };

  // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
  return Image.generateHTML(metadata, imageAttributes);
}

module.exports = imageShortcode;

Next, in my ./src/_data/images.js file, I imported the async plugin code from the above file and, well, basically just logged the generated HTML.

// ./src/_data/images.js
const path = require("path");

const imgPlugin = require("../../img-shortcode");

const imgPath = path.join(__dirname, "headshot.jpg");

imgPlugin(imgPath, "this is a headshot photo").then(res => console.log(res));

There is also an interesting example for "Do it yourself: <img>" which might be more configurable than the Image.generateHTML() output.

So, if I run node src/_data/images it will log something like this (if you run it through Prettier):

<picture
  ><source
    type="image/avif"
    srcset="/img/e0c955b5-300.avif 300w, /img/e0c955b5-600.avif 600w"
    sizes="100vw" />
  <source
    type="image/jpeg"
    srcset="/img/e0c955b5-300.jpeg 300w, /img/e0c955b5-600.jpeg 600w"
    sizes="100vw" />
  <img
    alt="this is a headshot photo"
    loading="lazy"
    decoding="async"
    src="/img/e0c955b5-300.jpeg"
    width="600"
    height="282"
/></picture>

I'm not entirely clear how you're doing this (regexp or some other method of search/replace):

effectively replacing html image tags <img ... /> with shortcodes for the eleventy-image-plugin {% image ... %}

But I'd see if you can replace the HTML <img/> tags with the results of the async Image.generateHTML(metadata, imageAttributes) call so it writes the generated HTML instead of shortcodes. It might be a big ugly, but it could possibly work(tm). The other piece I haven't tried yet is controlling where the plugin writes the generated image files to since those seem to currently be dumped in my project's root directory (same level as my .eleventy.js config file) vs wherever you want to put static image assets. Again, I'm not familiar with how the eleventy-img plugin generally works, and this probably isn't a standard, recommended usage.

[trst]

@pdehaan That is pretty clever! It never dawned on me to import the image plugin into the data file.

I am doing a regex for the image tags and replacing them with the shortcode currently, so it looks like I will have to add an intermediate step to process the image before replacing it. Thanks for the insight, I will report back with the results!

[pdehaan]

I am doing a regex for the image tags and replacing them with the shortcode currently

Fascinating! Do you mind sharing the regex or data file? I'm rather curious now.

I'm imagining you're getting the data file contents from a CMS or something remote, but I find this all interesting and am trying to better understand the use case.