Eleventy img upgrade

node upgrade

eleventy-img 7.0.0 needs node 22+. Since I was using node 20 I needed to first upgrade node which was done with node 24. followed by a new installation. (eleventy-omg)

nvm install 24
nvm use 24
nvm uninstall 20
nvm alias default 24.20.0

rm packages-lock.json
npm install

There wasn’t any problem with other packages. I could move to upgrade eleventy-img to 7.0.0

before that I also update the node version used in the CI.

eleventy-img upgrade

Import

@11ty/eleventy-img v7 is ESM only, so the require("@11ty/eleventy-img") no longer returns the function directly it now needs a dynamic import() which was don in this PR

const { default: Image, eleventyImageTransformPlugin } = await import("@11ty/eleventy-img");

The cache

@11ty/eleventy-fetch, which eleventy-img uses internally for remote images, generates a new hidden folder : .cache/ to avoid having to copy these files to the repository, I excluded them in .gitignore

Removed functions

Image.statsSync and Image.statsByDimensionsSync were removed entirely from eleventy-img and because I was using them in mdLib.renderer.rules.image, I had to redefine how I was handling images in markdown-it which I did without using images but responsive atributes in the <img tag. (see the same PR)

don’t process some images

Before, some images that were not in markdown were not processed. Now the eleventyImageTransformPlugin is process through all eleventy. This means that all images from html templates or for layouts are now processed. Since these images are in arc/_assets/img/ and meant to be copied over to img/, we have to tell eleventy-img to ignore it with eleventy:ignore.

<img src="/img/meinamsterdam-tr.svg" class="transition-all ease-in-out inline" alt="👤" width="72" height="72" eleventy:ignore />

I also had to add eleventy:ignore to many images called as is in the comments.

Parsing error

Some of the alt=" were not well formed because they contained appostophes or line breaks breaking image parsing. This was not breaking before but this became a blocking bug. I had to update all similar links. The regexp to spot this bug is !\[[^]]*"[^]]*\].