What I want: Create a gallery/collection of images based on the contents of a folder. Automatically.
Surprisingly there is almost no guide out there that explains how to do this. And the few that do clutter the .eleventy.js file.
This uses data-js as a template-specific data file. Simply said: gallery.11tydata.js needs to have the same name and be in the same folder as the corresponding template gallery.md (actually Nunjucks .njk).
Possible improvements:
- Process the filename, slugify it and add it as gallery title.
- Also add the image creation date.
Based on
Maybe your image CSS is wrong? It could be that they have a widht/height of 0. When you inspect the website with the develper tools (F12 in firefox), do the images appear in the HTML?
I'll try to upload a demo , but I am very busy right now, so no guarantees I won't forget.