Eleventy Transform: how to specifiy where the images are stored?

[lexoyo]

Hello
I'm sorry if it's a documented question but I struggle with this for a day now
After following the instructions I can't get the images to be found on disk (I get the ENOENT: no such file or directory, stat 'content/assets/test.svg' )
My images are not in content/assets/ but in content/silex-published/assets/
My config is

{
    dir: {
      input: 'content',
      layouts: '_layouts',
      includes: '_includes',
      data: '_data',
      output: site.eleventyOutput,
    },
}

I don't manage to make the transform image plugin to look in a subfolder of content

  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    extensions: "html",
    formats: ["avif", "jpeg"],
    defaultAttributes: {
      loading: "lazy",
      decoding: "async",
      sizes: "100vw",
    },
    //  urlPath: './silex-published/assets/', //  ====> doesn't do anything
  })

Any help will be a much appreciated, I know we are all very buisy, thank you !!

[m4rrc0]

Hey. This just bit me as well and i think i figured it out.
I hope you have found the solution to this since February @lexoyo but for anyone else reading, here is the rundown.

urlPath is for the output. It specifies where images are going to be written relative to the general output dir. By default, it is set to "/img/". So if you have kept the default dir values, the images will be written to disk at _site/img/. So urlPath is allowing you to chose where the images are placed in your built site structure.

The question here is more about "finding" local images from our markup files. And knowing what to write in our src attribute. We can specify the path of the images in one of two ways:

1. relative to where our markup file is (in the input dir) => src="./my-img.jpg" (I haven't thoroughly tested this approach)
2. from our input dir with an absolute path => src="/images/my-img.jpg". So if we set an input dir of views, the plugin will look for our image in views/images/my-img.jpg.

Note: With option 2. it seems we can navigate our folder structure with paths like src="/../assets/images/my-img.jpg" if we want to place local assets outside of the input dir.

I don't manage to make the transform image plugin to look in a subfolder of content

I don't think we can do that from the plugin config. We need to write the full path on the image src. So, something like src="/silex-published/assets/my-img.jpg".

It would be great to be able to set an inputPath option for example, automatically resolving local images to a subfolder or even a totally different directory like in my note above => inputPath: "/../assets/images/";

[N-Upchurch]

I'm pretty confused by this. If I'm using absolute paths, like /img/logo.svg, why is the plugin looking for an image in content/img/logo.svg?

[m4rrc0]

I'm pretty confused by this. If I'm using absolute paths, like /img/logo.svg, why is the plugin looking for an image in content/img/logo.svg?

Is your input directory named content?
My message just above is explaining what is going on. Please give more context about your project (like your directory settings) if you need help figuring things out @N-Upchurch .

[N-Upchurch]

Hi @m4rrc0, thanks for your reply. I'm pretty sure I understood your explanation, but this behavior just seemed odd to me?

When I included this in eleventy.config.js:

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		extensions: "html",
		formats: ["webp"],
		widths: [270,540,810,1080],
			defaultAttributes: {
				loading: "lazy",
				decoding: "async",
			},
	});

What I thought would happen is:

1. Images that were previously copied into /_site/* as is would now, in addition, be output to /_site/* in the widths and formats I specified.
2. Any tags in html files output to /_site/* would be updated with a srcset attribute or similar.

My input directory is indeed content.

In my project, images in /public/img/ are output to /_site/img/ via
eleventyConfig.addPassthroughCopy({ 'public/img/*': "/img/" });.
Posts and pages are located in /content/. I specify the URL of key assets, such as the logo and favicon, in /_data/metadata.js.

My expectation was that when passed an absolute path (/img/logo.svg), the plugin would use the absolute path as given to transform <img> tags instead of prepending the input directory (content/img/logo.svg). I'm just a bit confused as to why this is the case?

It seems like I may have to move /public/img/ into /content/ if I want to use the plugin?

[m4rrc0]

It is usually not needed to use the plugin in conjunction with addPassthroughCopy. You have multiple options depending on your needs... My best guess of a recommendation for you would be... Don't use addPassthroughCopy on your images and use the plugin (which does copy + transform).

You need to specify the correct path to your images on every img tag then. So either moving your images in content/img and don't change your src attributes (because the plugin will resolve path from your input dir, which is content). Or change the src of all images from /img/my-image.jpg to /../public/img/my-image.jpg.

Note that if you want to keep the original sized image, format, name, ... you can do that with the appropriate plugin options.

Note 2: You could do this and still do your addPassthroughCopy if you need to but the img src attributes will be transformed by the plugin by default so you will 'lose reference' to the original image copied over.

Note 3: If you need some hybrid approach, you can deeply customize the plugin and you can always ignore some images from being transformed with the eleventy:ignore attribute.

Does this seem appropriate @N-Upchurch ? Or do you have some other special need not covered by this approach?

[m4rrc0]

@zachleat, as a path forward for closing this issue, I see 2 possible improvements.

1. Improve the docs to pin explicitly what urlPath does, provide some example setup and configurations, ...

2. New feature: an inputPath or inputPathPrefix or srcPrefix option to be able to put images wherever we want and still have pretty src attributes on our images (and ease migration towards using the plugin or moving away from it)

3. There is always the option of doing nothing and letting people find this issue if they search for ENOENT: no such file or directory. Seems acceptable to me. 😄

I can try and help for 1 or 2. I'll be honest, I have way too much on my plate for the moment but I'd be really glad to contribute to 11ty !
Should I give a shot to a PR for implementing 2?