Using with plugin that renames final files?

I have a repo branch at https://github.com/brycewray/eleventy_solo/tree/base where, among other things, I’m attempting to use both this plugin and eleventy-plugin-local-respimg. Whenever I try to do a dev build, your plugin initially seems to work but, then, the console output becomes a long string of Error: ENOENT-type messages indicating the image files and/or their directories don’t exist. This doesn’t happen if I’m not using your plugin. Since the other plugin (like others that generate responsive images) renames the final files in the Eleventy output directory, is that related to this issue I’m experiencing? Note that I’m getting these error messages even on files I specifically exclude from that other plugin, specifically the files in /src/images/icons/.

Thanks in advance for any help and/or info you can provide; please let me know if you need additional details about the issue I’m experiencing.

[liamfiddler]

The newly released v2 of this plugin supports WEBP 🎉

In addition, the plugin will now automatically check for a ./src directory if the image cannot be found from the root directory, so you no longer have to pass a custom transformImgPath function. Hopefully in the future we can handle other directory structures too, once https://github.com/11ty/eleventy/issues/789 is resolved and we can compare the input and output paths.

[liamfiddler]

Hi Bryce! 👋

Thanks for providing the repo branch - it makes the discussion so much easier.

There’s two issues I’m aware of that might be impacting your project:

1. There are two plugins reading from & modifying IMG tags.
2. The source file path doesn’t start in the root directory.

Issue 1

I haven’t tried eleventy-plugin-local-respimg yet, but I’ve had success combining this plugin with eleventy-plugin-local-images which also moves and renames files. You can find a working example here.

The key to solving this problem was the order in which the plugins are defined in .eleventy.js. It was important lazyimages comes after local-images otherwise lazyimages would still be referencing the original filepath, not the modified one. I suspect a similar solution can be found for local-respimg.

Issue 2

This plugin assumes your file paths match the output paths, i.e. <img src="/images/dog.jpg" exists at <project root>/images/dog.jpg, but in your file structure it would be <project root>/src/images/dog.jpg.

This can be resolved using the transformImgPath config option. It allows you to specify a function that points the plugin to the internal image path.

Something like this might work for you (untested):

// .eleventy.js
eleventyConfig.addPlugin(lazyImagesPlugin, {
  transformImgPath: (imgPath) => {
    if (imgPath.startsWith('/') && !imgPath.startsWith('//')) {
      return `./src${imgPath}`;
    }

    return imgPath;
  },
});

TLDR;

Try reordering the plugins in .eleventy.js so local-respimg is before lazyimages.

Also try changing the lazyimages transformImgPath plugin config option to point to src or local-respimg’s output directory (maybe _site?).

I might have some time later this week, I’ll pull down your repo and take a look if the above doesn’t solve it 😃