How to dynamically display images present in a directory?

[pexeixv]

I have the following folder structure.

.
└── src/
    ├── index.html
    └── news/
        ├── index.html
        ├── 2022-06-14/
        │   ├── index.md
        │   ├── image1.png
        │   ├── photo.jpg
        │   └── file.jpeg
        └── 2022-06-26/
            ├── index.md
            ├── photo-1.jpg
            └── image.png

There's a homepage, and a news page. The news page should render cards of the different news (two in the above example). I also want the corresponding images to render. I am aware that this can be done by statically typing an array in the frontmatter, like so: images: [image1.png, photo.jpg, file.jpeg].
However, I want a dynamic way to archive this. A method which traverses the folder and looks for every image and renders them corresponding to their index.md.

[pdehaan]

You could use a custom filter; like my horribly named file_images filter below:

const path = require("node:path");
const fg = require("fast-glob");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("file_images", function (page) {
    const inputDir = path.dirname(page.inputPath);
    const imageGlob = path.join(inputDir, "*.{png,jpg,jpeg}");
    return fg.sync(imageGlob)
      .map(filePath => path.basename(filePath));
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

USAGE (src/news/2022-06-14/index.md; liquid template)

---
title: Some news from June 14
---

{%- assign imgs = page | file_images -%}
{% for img in imgs %}
  ![]({{ img }})
{% endfor %}

OUTPUT

<p><img src="file.jpeg" alt=""></p>
<p><img src="image1.png" alt=""></p>
<p><img src="photo.jpg" alt=""></p>

[pdehaan]

Alternate idea, create a global data structure that maps input paths to assets:

const path = require("node:path");
const fg = require("fast-glob");

...

  eleventyConfig.addGlobalData("page_images", () => {
    return fg.sync("./src/**/index.md")
      .reduce((acc, index) => {
        const inputPathDir = path.dirname(index);
        const imageGlob = path.join(inputPathDir, "*.{png,jpg,jpeg}");
        acc[index] = fg.sync(imageGlob)
          .map(filePath => path.basename(filePath));
        return acc;
      }, {});
  });

USAGE

---
title: Global data
---

{%- assign imgs = page_images[page.inputPath] -%}
{% for img in imgs %}
![]({{ img }})
{% endfor %}

OUTPUT

<p><img src="image.png" alt=""></p>
<p><img src="photo-1.jpg" alt=""></p>

---

You could even wrap the rendering of images in a shortcode:

  eleventyConfig.addShortcode("folder_images", function (page = {}) {
    if (!page?.inputPath) {
      page.inputPath = this.page.inputPath;
    }
    let html = "";
    // LiquidJS specific stuff here...
    const imgs = this.ctx?.environments.page_images || {};
    for (const img of imgs[page.inputPath]) {
      html += `<img src="${img}" defer /><br/>`;
    }
    return html;
  });

Then just use {% folder_images page %} instead.

[pexeixv]

Thanks a lot, however, I wasn't able to get either of the methods to work. Is there any way to dynamically populate the frontmatter with an array of the images in the folder?

[pdehaan]

I also got it working w/ a directory data file in src/news/news.11tydata.js:

const path = require("node:path");
const fg = require("fast-glob");

module.exports = {
  eleventyComputed: {
    dirFiles(data) {
      const imgGlob = "*.{png,jpg,jpeg}";
      const inputDir = path.dirname(data.page?.inputPath);
      const inputGlob = path.join(inputDir, imgGlob);
      return fg.sync(inputGlob)
        .map(file => path.basename(file));
    }
  }
};

Then in my local src/news/2022-06-14/index.md file I added this:

<pre>
{{ dirFiles | json }}
</pre>

… and get the following output:

<pre>
["file.jpeg","image1.png","photo.jpg"]
</pre>

[pexeixv]

Thanks a lot sir. Really appreciate the help. It's working now!