Using with plugin that renames final files?

[brycewray]

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]

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 😃

[brycewray]

@liamfiddler Your solution indeed solves it. Thanks very much!

[brycewray]

I have, however, found that using that other plugin with yours prevents your plugin's use of the base64 files for LQIP purposes (which reduces yours to only lazy-loading). Unfortunately, if I go without that other plugin, then I'm not delivering responsive images, webp to those browsers that support it, etc. I tried deleting the .lazyimages.json cache file to see if that made a difference on next dev build, but it didn't.

I know I'm an edge case so it's probably not a biggie, but just FYI.

[liamfiddler]

I was worried that might be the case. JIMP (the library used by this plugin to read image data) doesn't support WEBP.

I've been investigating switching to another library, Sharp, which should handle this use case. Watch this space!

[brycewray]

Yes, I briefly used a spaghetti-ish script of my own with Sharp, while trying to get your plugin and that other one to work, and was astounded by its performance. Looking forward to that switch!

[brycewray]

I was worried that might be the case. JIMP (the library used by this plugin to read image data) doesn't support WEBP.

I did try it with Safari, too, just to see if it was a Chrome/Chromium thing, and got the same results — no base64 stuff.

[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.