TemplateWriterWriteError when trying to use the plugin

[ornelasnarciso]

Hello there. I'm having trouble making the plugin work.

I'm getting this error on the terminal:

TemplateWriterWriteError was thrown

ENOENT: no such file or directory, stat '/images/uploads/meBio.png'

The path exists and it's correct, so I don't get the error. I'm a self taught programmer and sometimes is very hard to understand why things don't work. (the project does not have a "src" folder)

Thank you for your time.

The code:

const img2picture = require("eleventy-plugin-img2picture");

module.exports:

cfg.addPlugin(img2picture, {

  eleventyInputDir: "//",
  imagesOutputDir: "_site",
  urlPath: "_site/images/",
  extensions: ["jpg", "png", "jpeg"],
  formats: ["webp", "jpeg"],
  sizes: "100vw",
  minWidth: 150, // Minimum width to resize an image to
  maxWidth: 700, // Maximum width to resize an image to
  widthStep: 150, // Width difference between each resized image
  fetchRemote: false, // When true, remote images are fetched, cached and optimized.
  dryRun: false, // When true, the optimized images are not generated. Only HTMLs are processed.

  // Function used by eleventy-img to generate image filenames
  filenameFormat: function (id, src, width, format) {
    const extension = path.extname(src);
    const name = path.basename(src, extension);

    return `${name}-${id}-${width}w.${format}`;
  },

  cacheOptions: {},
  sharpOptions: {},
  sharpWebpOptions: {},
  sharpPngOptions: {},
  sharpJpegOptions: {},
  sharpAvifOptions: {},

});

[saneef]

The problem you are facing looks similar to #7.

[saneef]

Also, you might want to start with mandatory options: eleventyInputDir, imageOutputDir, and urlPath. Once, you make it working you can customise using optional parameters.

[ornelasnarciso]

It really looks like a folder structure problem. Already tried a bunch of combinations and nothing works. I'm lost here.

I don't have a "src" folder.

eleventyInputDir: "//", ----> stays empty? 
imagesOutputDir: "_site", ----> "_site"
urlPath: "_site/images/", ----> "_site/images/"

[saneef]

Can you try with eleventyInputDir: ".", and remove all options other than eleventyInputDir, imageOutputDir, and urlPath?

[ornelasnarciso]

Still does not work.

tried this:

eleventyInputDir: ".",
imagesOutputDir: "",
urlPath: "",

tried this:

eleventyInputDir: ".",
imagesOutputDir: "_site",
urlPath: "_site/images",

tried this:

eleventyInputDir: ".",
imagesOutputDir: "_site",
urlPath: "/images/",

tried this:

eleventyInputDir: ".",
imagesOutputDir: "_site",
urlPath: "images",

console:

TemplateWriterWriteError was thrown

path is not defined

[ornelasnarciso]

If you wish I can provide you all the code. If we are able to make this work it could help other people that have the same issue. This plugin seems really good. Not having to use short codes is the best way to go.

[ornelasnarciso]

I've uploaded the code and made the repo public.

https://github.com/ornelasnarciso/artornelasnarciso

[saneef]

The problem you are facing looks similar to #7.

@ornelasnarciso Please go through the thread, #7. Both path and eleventyInputDir errors were addressed in that tread. Based on these common problems I have updated the usage instructions on readme.

[ornelasnarciso]

#7 only shows the text: "No description provided." Nothing else.

Followed the instructions on readme, and the plugin still does no work.

The (Quick Start) will provide empty spaces and no images. For some reason the plugin only applies changes to images on markdown files. All the others are not affected.

const img2picture = require("eleventy-plugin-img2picture");

module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(img2picture, {
eleventyInputDir: ".",
imagesOutputDir: "_site",
urlPath: "",
});
};

The advanced option makes no changes and provides no errors on the console. Is it correct to write "development" ( if (process.env.ELEVENTY_ENV === "development") {)? I assumed it has to be this way since there's no instructions about it.

const img2picture = require("eleventy-plugin-img2picture");
const path = require("path");

const img2pictureOptions = {
eleventyInputDir: ".",
imagesOutputDir: "_site",
urlPath: "",
extensions: ["jpg", "png", "jpeg"],
formats: ["avif", "webp", "jpeg"],
sizes: "100vw",
minWidth: 150,
maxWidth: 1500,
widthStep: 150,
fetchRemote: false,
dryRun: false,
filenameFormat: function (id, src, width, format) {
const extension = path.extname(src);
const name = path.basename(src, extension);
return ${name}-${id}-${width}w.${format};
},
cacheOptions: {},
sharpOptions: {},
sharpWebpOptions: {},
sharpPngOptions: {},
sharpJpegOptions: {},
sharpAvifOptions: {},
};

/============== module.exports

if (process.env.ELEVENTY_ENV === "development") {
cfg.addPlugin(img2picture,);
} else {
cfg.addPassthroughCopy("./images");
}

[saneef]

With quick start example, try these settings:

{ 
  eleventyInputDir: ".",
  imagesOutputDir: "_site/images/",
  urlPath: "/images/"
}

imagesOutputDir tells where to copy optimised images, and urlPath will be used to generate src in <img> tag. So, urlPath should match the path used in imagesOutDir (in this case within _site). Example, with urlPath: "/images/", within <picture> you will have <img src="/images/<filename>.jpg" />

[ornelasnarciso]

Now it's working with that quick start. :)

And how should i proceed to use the advanced? I want to control de image sizes.

And sorry for taking your time.

Thank you for the help.

[saneef]

Great! Glad to know it worked. You should be able to use all options other than dryRun and filenameFormat without any issues.

• dryRun only for testing, it don't generate any image files.
• filenameFormat, you need to write a function to generate filenames

[ornelasnarciso]

This is the best plugin for images on eleventy.

Thank you very much for your time and help. :)

[ornelasnarciso]

Me again.

Everything is working fine but i totally forgot about the images that are passed on the css something like => background-image: url("imageFile.png");.

It's obvious they don't have the "img" attribute so the plugin doesn't know they exist. Is there any way to make the plugin work with images called from the css?

Thank you.

[saneef]

No. This plugin only optimises images in HTML files referenced with <img> tags.

[ornelasnarciso]

OK. Thank you. :)