Eleventy: How to loop through an image folder & put all the images on a page?

[moevbiz]

Hi All,

It's my first day using eleventy and I love it so far!
I'm trying to build a kind of blog/portfolio page, where each entry's page should contain a couple of images as well as some general information. I've managed to build a general site structure with navigation and content, but the images are yet missing.

The only resource I've found on handling multiple image files is this -> https://www.zachleat.com/web/eleventy-tutorial-level-1/ but to be honest, it seems a bit troublesome having to add each images' file name into the front matter…

I'm sure there is a way simpler method, but I guess I haven't found it yet. There's probably some elementary part to eleventy that I'm missing… I've been playing around with module.exports without any result. Ideally, I'd just want to have a folder for each set of images, containing the image files + a (markdown) file with front matter, then output all images (in no particular order) with the data onto a page.

Is something like this possible? I'd be happy about any leads!

Thanks & all the best!

[zachleat]

You could use fast-glob (https://github.com/mrmlnc/fast-glob) with a JavaScript data file to iterate over the image files you want and create a new data array with the filenames (https://www.11ty.io/docs/data-js/)?

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

[moevbiz]

thank you for the answer! I wasn't aware that this is a possibility. I don't have a lot of time for side projects at the moment, but I will try to implement your suggestion when I get back to using 11ty!

[AdamSzakal]

Any follow up? I'm currently struggling with the same thing...

[Ryuno-Ki]

@AdamSzakal Maybe you can share what you've tried so far?
I found the community pretty welcoming and willing to help then.

[AdamSzakal]

Sorry, being a complete newbie over here for all things web development. Finally managed to get it to work after some gnashing of teeth. I'll walk through the solution below, for what it's worth.

Here I'm creating two collections – one for all the images in /gallery, and one for all the images in the /sponsors.

Start out by installing fast-glob and adding it to your package.json:

npm install --save fast-glob

Then, in your .eleventy.js, import fast-glob from your NPM packages and run a search:

// Import fast-glob package
const fg = require('fast-glob');

// Run search for images in /gallery and /sponsors
const galleryImages = fg.sync(['**/gallery/*', '!**/_site']);
const sponsorImages = fg.sync(['**/sponsors/*', '!**/_site']);

//Create collections so you can access the data in your templates
module.exports = function(eleventyConfig) {

  //Create collection of gallery images
  eleventyConfig.addCollection('gallery', function(collection) {
    return galleryImages;
  });

  //Create collection of sponsor logos
  eleventyConfig.addCollection('sponsors', function(collection) {
    return sponsorImages;
  });
};

Then in the template files (in my case index.njk):

// Loop through, and create markup, for all images in /gallery
<section class="gallery">
    {% for image in collections.gallery %}
        <figure><img src="{{image}}" alt=""></figure>
    {% endfor %}
</section>

// Loop through, and create markup, for all images in /sponsors
<section class="gallery">
    {% for logo in collections.sponsors %}
        <figure><img src="{{logo}}" alt=""></figure>
    {% endfor %}
</section>

I'm sure this can be done better and faster, but I hope it might help someone out.

[Ryuno-Ki]

@AdamSzakal Thanksfor sharing!

No worries, we all were new.
However, I found that in general you will receive support earlier, if you share some snippets.
For one, we can help ypu learn.
Plus, it doesn't feel like „Lazy Web” ;-)

[trey]

@AdamSzakal,

That worked beautifully, thank you!

https://github.com/trey/avarmint-11ty

[trey]

@AdamSzakal, sorry I just now realized the repo was still private! It's public now if you wanted to take a look.