Skip to content

Instantly share code, notes, and snippets.

@j-steinbach
Last active June 5, 2023 11:43
Show Gist options
  • Select an option

  • Save j-steinbach/891ef316a0514156baba51e0cb0dc81c to your computer and use it in GitHub Desktop.

Select an option

Save j-steinbach/891ef316a0514156baba51e0cb0dc81c to your computer and use it in GitHub Desktop.
Find all images in a folder and display them in a single Eleventy template
module.exports = function (eleventyConfig) {
// copy files that are not templates to `_site/`
// see https://www.11ty.dev/docs/copy/
// - alternatively this could be done via eleventyConfig.setTemplateFormats
// see https://www.11ty.dev/docs/copy/#passthrough-by-file-extension
//
// !! when using Tailwind, make sure to NOT copy the tailwind css files..
eleventyConfig.addPassthroughCopy("src/assets/img");
return {
dir: {
input: "src",
output: "_site",
data: "_data",
includes: "_includes",
layouts: "_layouts",
},
};
};

Find all images in a folder and display them in a single 11ty template

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

@jere76
Copy link

jere76 commented Jun 2, 2023

Hi ! Thanks for sharing this !
I tried to implement it in a new 11ty test project, but I struggle to make it work.
Images are passed to my _site folder and I have no error reported, though my images are not showing up in the html rendered page.
Being very new to all this I guess I miss something obvious, would you mind sharing a very simple starter project so I could investigate what I'm doing wrong ?

gobbling gallery images
[ 'src/assets/img/01.jpg', 'src/assets/img/02.png' ]
finalizing gallery images
[ '/assets/img/01.jpg', '/assets/img/02.png' ]
[11ty] Writing _site/index.html from ./src/index.md (liquid)
[11ty] Copied 2 files / Wrote 1 file in 0.01 seconds (v2.0.1)
[11ty] Watching…

@j-steinbach
Copy link
Author

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.

@jere76
Copy link

jere76 commented Jun 5, 2023

Thanks for your answer :)
The html markup simply didn't show, just like if the gallery.11tydata.js wasn't processed.
I'll give it some more time though, since I now understand a bit better 11ty's structure

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment