BG

Page Attachments in Eleventy

2m

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.

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

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

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