Not generating picture element.

[Amplificator]

Hi, I have tried to add this plugin to my project.

I have followed the instructions and added: const respimg = require("eleventy-plugin-sharp-respimg"); to my the top of my .eleventy.js and eleventyConfig.addPlugin(respimg); to the bottom of module.exports

I then created _data/images.json and filled out all my images. On build, they generate just fine and are placed in my _site asset folder.

Here's my _data/images.json: https://pastebin.mozilla.org/ay2H4jD9

And here's my for-loop that I placed in a file called processImages.njk https://pastebin.mozilla.org/OekXLjVX

The problem is that no picture element is generated - what am I doing wrong?

[tannerdolby]

Hi @Amplificator ! If you provide me your full project structure (github repo or reproducible example), it will be much easier for me to figure out where you've gone wrong.

Also including a screenshot of the generated HTML page from processImages.njk in your browser to see what HTML its actually generating would be nice along with your .eleventy.js file so I can see where your site is expecting the root directory to be (e.g. src in the return statement).

In short, I think the root of your issue is that your template processImages.njk isn't being generated with the site output. It doesn't have a permalink: "/foobar" field in frontmatter and the layout: null is not something I've seen used before, either supply a valid layout or don't use layout in frontmatter at all. After you've fixed your project structure and template, along with update the inputDir in your _data/images.json file to use a URL that doesn't include _site like /images/ or /assets/images, I'm curious to see what is displaying in the browser.

The <picture> and fallback <img> HTML should generate regardless of image assets having a valid source URL, if they were generated to begin with, I'm positive the HTML is on the page, just only showing alt text as the image sources aren't correct with your current setup loading them from _site, it should be /assets/images as the value for inputDir or /images depending on where your directories are in the project structure.

Here is a reminder of how the Eleventy Config File should look:

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

module.exports = (eleventyConfig) => {

  eleventyConfig.addPlugin(respimg);

  // passthrough copy the directory of images so they get placed in _site when we generate the site
  eleventyConfig.addPassthroughCopy("./images"); // or whatever directory your storing images at (dont use _site that is meant for the generated site output)

  return {
     dir: {
         input: 'src', // or '' if you serving from the root directory
         output: '_site'
         data: '_data',
         layouts: '_includes/layouts',
         includes: '_includes'
     }
  }
}

Since you hadn't included a pastebin for your .eleventy.js file (which would be helpful), hopefully yours looks close to the snippet above.

Thats good to hear the images are being generated as expected. The problem is your inputDir values in images.json, thats probably what is causing issue in the template as the srcset values for <source> elements inside <picture> can't find the image through src="./_site/assets/images/etc which you have provided.

[tannerdolby]

Is your template rendering at all even without the respimg usage? Because without a permalink in frontmatter and the layout: null, I don't even think that template processImages.njk is even getting built with the site. The responsive image markup should be generated regardless of the image src being available, the HTML will generate regardless and just show the alt text. You must fix your layout: null declaration or remove it completely and place the processImages.njk file at your sites root directory so it generates a page.

One thing you should definitely change is in your _data/images.json file, the inputDir field shouldn't use _site in the URL, it should just be /assets/images/ or /images/ depending on you project structure, the stuff in _site is whats generated by eleventy meaning we shouldnt be accessing from there as it was generated first somewhere else (e.g. /assets/images/ or /images/ where that directory is).

The _site folder is where 11ty outputs the generated static content and shouldn't be used as a URL for loading images. It should be /assets/images/ or whatever folder your storing images in and including in your site output with manual passthrough file copy.

The problem is that no picture element is generated - what am I doing wrong?

There were a few problems with your global data file and also the template, I've not seen layout: null used in the 11ty docs so I assume thats causing the page (processImages.njk) not to be generated and placed in the site output _site at all.

Problems I see after looking over your code:

1. inputDir inside _data/images.json needs to be updated so it doesn't use _site, simply change it to /assets/images/ or /images/, you don't want to access assets from _site. Also, I need to see your project structure to know exactly what directories are at what level.
2. The for loop in processImages.njk looks good, one thing I would recommend is if all the images have the same inputDir and/or inputDir you can provide those values manually in the shortcode once in your template rather than for every single object in glboal data (_data/images.json).
3. The layout field in frontmatter data should not be null. Change it to a valid layout e.g. a .njk or .liquid file within your _includes/layouts/ directory. For example, layout: base.njk or just put the template at the root directory so it builds a page without using template inheritance.
4. To reduce repetition in images.json, the default quality is 85 so you don't need to include that for every object to save yourself some time.

Theres lots of "potential" issues as I don't know your exact structure, so if you create a minimal reproducible example (project structure, the files needed, screenshot of issue in browser) I will be able to find a fix to your problem much quicker.

[tannerdolby]

In conclusion, I recommend you create a github repo with your code and share it here so I can pinpoint the issue very quickly and provide you a fix. Otherwise feel free to read through the potential pitfalls I discussed above which will be probably more of a headache since I'm not aware of exactly what your project looks like aside from the code you included in the pastebin.

[Amplificator]

Thanks for the detailed responses - it's working now and wasn't even due to your plugin. The plugin is great though :)

It came down to my laptop needing something as silly as a reboot (I usually never reboot it). I had some files that were somehow "stuck" in between git operations and it just ruined several things including this.

A simple reboot fixed it.

Sorry for the confusion :)

[tannerdolby]

Your welcome! I'm glad you got everything working. And thanks for the kudos! If you like the plugin, feel free to star this repository 🌟

No worries :) Don't hesitate to open another issue in the future if you encounter any other problems, I'm happy to answer any questions you might have. Happy coding!