Consider alternative ways to organise image files

[frankieroberto]

Currently, in order to get images working within posts using just the image filename like this:

![Alt text](image-name.png)

...you have to add the image-name.png in subfolders named after the service, year, month and post name like this:

app/images/service-name/2025/04/post-name/image-name.png

This is a bit painful to do manually, especially if you create the post and add images, and then decide to rename the post or change the month or year, requiring you to then rename the folders or move the images.

How could we make this easier?

Alternative options

Have a single images folder per service

This would mean you could add images like this:

app/images/service-name/image-name.png

One possible downside is that this folder might get quite big, increasing the chances of naming conflicts?

Have a folder per post which includes both the images and the text

This could work something like this:

app/posts/service-name/2025/04/post-name/index.md (the markdown file for post text)
app/posts/service-name/2025/04/post-name/image-name.png

Advantage is that if you rename the post or change the month or year there would only be a single folder name to update.

Possibly there might be reasons not to mix images and text up in the same folder though?

Other ideas?

Other suggestions welcome!

[frankieroberto]

@edwardhorsford @paulrobertlloyd @ralph-hawkins @Jamiedoyle205 @jolumley-nhs and others: any thoughts on the above? (no hurry!)

[jolumley-nhs]

I like the idea of having images and markdown file in one folder - makes it easier and quicker to pull a post together that way, and avoids spending too much time navigating in the file explorer (not an issue for me, but I know those who are less experienced with this sort of stuff can strugge with it).

Can't see any reason why we shouldn't have images and markdown files in one folder, others may know more than me about that though

[frankieroberto]

I had a quick look around at other Eleventy-based blogs to see what they do, but it seems like a mixed bag with no real consistency!

Here’s an example of putting images and an index.md into a folder: https://github.com/zachleat/zachleat.com/tree/main/_posts/2021-01-30-fluid-images

Here's an example where there's a separate images folder from the text content folder: https://github.com/stillingdesign/mikestilling.com/tree/main/src

So... inconclusive!

[edwardhorsford]

I'd have images stored with the post - either as you've described, or in an images folder.

I imagine part of the build step would be to copy these over to an assets folder using their current path. I think there may already be an eleventy plugin that does this.

[frankieroberto]

I've explored the option of mixing images in with the post markdown files in #173.

The main changes required are to the addPassthroughCopy calls in eleventy.config.js.

We can use globs to copy across all the images and file with known extensions (.png/.jpg/.pdf).

The one gotcha is that you can't specify a glob and an output folder in which to preserve the file structure at the same time:

...so in order to get it to work, I had to move app/posts/record-a-vaccination/ to app/record-a-vaccination - however that doesn’t feel like a huge deal, and would be clearer if the service name folders now don't just contain the posts but also any related assets.

One extra advantage of doing this, I discovered, was that it means that the previews of the markdown files on the GitHub web interface now show the embedded images: see example

Can anyone spot any downsides with doing this though?