Co-locating images together with a blog post in a folder

[zachleat]

Via:

• @AleksandrHovhannisyan https://twitter.com/hovhaDovah/status/1525086605303857152 and https://twitter.com/hovhaDovah/status/1525271121549004804
• @SaraSoueidan https://twitter.com/SaraSoueidan/status/1533468684089536513

I want to co-locate posts and images like this:

yyyy-mm-dd-slug/index.md
yyyy-mm-dd-slug/images/image-files-go-here

Use Markdown images natively:

![Alt](./images/the-image.png)

And replace them with 11ty image output.

Just want to make sure this captures the workflow y’all would like to see!

[AleksandrHovhannisyan]

Thanks! I did get the first part working after my PR got merged (co-locating images), but I don't think auto-converting Markdown images to 11ty images is currently possible. I got very close, but I ultimately ran into the gotcha noted here for addExtension: https://twitter.com/hovhaDovah/status/1525271580070248448. Basically, it opts me out of all of the processing that 11ty already does for Markdown files, so I would then be responsible for handling includes, Liquid, and everything else that automagically goes on behind the scenes.

I think it would be cool if 11ty exposed some kind of post-processing API that allows you to query all files matching a format/extension (like addExtension) and modify the output, before 11ty writes that file to the build output. This would allow me to leverage 11ty's initial processing for my blog posts and then later go in and correct the images, replacing them with 11ty images as Ben Holmes demonstrated here: https://github.com/Holben888/11ty-image-optimization-demo. What do you think?

Side note: This isn't super critical for my workflow—more like a nice-to-have. I could imagine this being more useful if I wanted to share a private draft with someone else on GitHub and have them review it, with all the images visible rather than shortcodes/includes. It would also make Markdown posts more portable between frameworks and potentially easier to syndicate content to other sites, especially if the image paths are external (as in Ben's demo).

[SaraSoueidan]

A little late to the comments, but YES this is exactly what I had in mind. 🙏🏻

[aogriffiths]

This is exactly what I would like too 🙏🏻 makes it soo much easier to manager pages that have a lot of images, e.g. tutorials that have screenshots.

[aogriffiths]

this seems close but not using standard markdown https://gfscott.com/blog/eleventy-img-without-central-image-directory/ and here is a seemingly simple solution https://scottwhittaker.net/posts/colocate-images-with-post-using-eleventy

[aaaaargZombies]

Just wanted to add a big vote in support of doing this. I think it would be one of the main barriers preventing my workplace moving from hugo to eleventy. We do a bunch of stuff with community groups and digital autonomy, one of the things we've found when helping set up a static site for a group and on boarding them is that the idea of a single piece of work being split up and spread across different directories (and those directories contain pieces of other bits of work!?) is really not intuitive and can be quite overwhelming.

[davidvasandani]

@aaaaargZombies I accomplished the images in a posts directory here.

[AleksandrHovhannisyan]

@zachleat Am I correct in understanding that this issue will be resolved with the new @11ty/eleventy-img@4.0+ eleventyImageTransformPlugin? I did a quick little test and it seems to work as expected with relative image paths and plain-old Markdown images (i.e., ![alt](./src)).

[ptsefton]

@AleksandrHovhannisyan I tried that plugin and it did not work out very well for me. It DOES result in images co-located with the page in the output, but it rewrites the images and changes their file names and running it on my 20 year old blog it was throwing lots of errors, complaining about images which work fine but which it did not like for some reason. think it's changing the resolution and size of the images as well, which might be useful in some situations, but all I was after and what brought me to this issue was that I wanted to just copy source images from the input to the output.

In the end I added a hacky thing to my 11tyconfig to copy stuff - complete with a catch block that does no error reporting.

const Path = require("Path")


module.exports = function (eleventyConfig) {



  eleventyConfig.addTransform("copy", function (content) {
    if ((this.page.outputPath || "").endsWith(".html")) {

      const fromDir = Path.dirname(this.page.inputPath);
      const toDir = Path.dirname(this.page.outputPath);
      console.log("FROM", fromDir);
      console.log("TO", toDir);
      for (let f of fs.readdirSync(fromDir)) {
        if (!f.endsWith(".md")) {
          try {
            if (!fs.existsSync(Path.join(toDir, f))) {
              console.log("copying", f, fromDir, toDir)
              fs.copyFileSync(Path.join(fromDir, f), Path.join(toDir, f))
            }
          } catch (error) {

          }
        }
      }

      // Return content as-is
      return content;
    });

};