Page Attachments in Eleventy


At some point a Eleventy site might need proper file management on a post/page basis.

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.


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.


Kirk and Spock Firing a Phaser then running away to get drunk


<!-- -->

![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/
๐Ÿ–ผ 200.webp

# output
๐Ÿ“ dist/
๐Ÿ“ 2021-09-07-handle-page-attachments-in-eleventy/
๐Ÿ“„ index.html
๐Ÿ–ผ 200.webp


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

Comment on twitter