BG

One way is just to put the files in a random folder, add passThroughCopy and reference the files in your templates/content.

But you have to come up with an idea, if you want to keep track which attachements belong to which pages.

I initially planned to assign ids to posts and create folder with respective ids and put the attachements in there.

But a more elegant and thoughtful solution is to use the Page Assets Plugin by victornpb.

Usage

const pageAssetsPlugin = require('eleventy-plugin-page-assets');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(pageAssetsPlugin, {
    mode: 'parse',
    postsMatching: 'src/posts/*/*.md',
  });
};

It copies referenced files or all files in folder of the source page to the build folder, depending on configuration.

Demo

Source

<!-- index.md -->

![Kirk and Spock Firing a Phaser then running away to get drunk](200.webp)

File Structure

# source
📁 src/
  📁 2021-09-07-handle-page-attachments-in-eleventy/
    📄 index.md
    🖼 200.webp

# output
📁 dist/
  📁 2021-09-07-handle-page-attachments-in-eleventy/
    📄 index.html
    🖼 200.webp

Issues

Beware, currently there are some unclosed issues, but for basic usage like shown earlier, it works great.

Comment on twitter