Dynamic addPassthroughCopy based on collection entry data

[nachtfunke]

I was wondering, if it's somehow possible to set passthrough copies dynamically?

I currently have a collection of post. Each post uses a template that overrides its permalink. The output file structure is different from the input file structure. The input looks like: posts/{{n}}/, the output looks like blog/{{year}}/{{slug}}/. I am now trying to add assets to each post's folder and I somehow need to tell eleventy to copy that image to its correct output destination.

I have managed to access all the data, but if I understood it correctly, there is no way of accessing collections data outside of addCollection()? This is the code that gave me access to everything I needed, but it's not working:

eleventyConfig.addCollection('test', collectionsApi => {
  const posts = collectionsApi.getFilteredByTag('post');

  posts.forEach( post => { 
    const srcPath = post.template.parsed.dir;
    const distPath = post.template.dataCache.page.url;
    
    eleventyConfig.addPassthroughCopy({ srcPath: distPath });
  });

  // return the collection, otherwise there'll be an error
  return test;
});

---

I know that I can solve this by changing my file structure. Or by just passing through images to a central space. But before I fall back to this, I was wondering if in general:

• collections cannot be accessed in .eleventy.js, unless a new filter/sorting is being added as a new collection, and...
• if there is any other way to achieve what I am trying to do with addPassthroughCopy?

It feels like I have gotten juuuust close enough, but something is missing.

[pdehaan]

Do you have a public repo or something? Curious how your assets are organized vs your template locations. plus it makes it a bit easier to clone and hack vs recreating a similar env locally.

Q: did you mean to return test or posts?

not sure if this will work, versus using the variable srcPath, for example

eleventyConfig.addPassthroughCopy({ [srcPath]: distPath });

[nachtfunke]

I was meant to return posts, yes. I have this specific code commented out in my repo: https://github.com/nachtfunke/helloyes/blob/master/.eleventy.js

[pdehaan]

Not sure this will work. This is as close as I've gotten, but it isn't actually copying the files (so it's an objectively unhelpful answer). The paths/configs work if I copy the debug output from the console and manually add the eleventyConfig.addPassthroughCopy(...) commands outside of the .addCollection() method. I think we've seen similar issues before where we tried recursively trying to add dynamic collections via nested .addCollection() calls and it wasn't working as expected.

  eleventyConfig.addCollection('pages', collectionsApi => {
    const posts = collectionsApi.getFilteredByTag('pages');
    posts.forEach( post => {
      const srcPath = path.join(path.dirname(post.inputPath), "*.{jpg,png}");
      const distPath = path.dirname(post.outputPath).replace(/^www\//, "");
      const pathObj = {[srcPath]: distPath};
      console.log("passthrough copy =>", pathObj);
      eleventyConfig.addPassthroughCopy(pathObj);
    });
    return posts;
  });

  // Where my input/output folders are as follows (hence the rogue `www/` reference above):
  return {
    dir: {
      input: "src",
      output: "www"
    }
  };

// Console output from some other sample repo I was playing with...

> eleventy

passthrough copy => { 'src/pages/*.{jpg,png}': 'pages/perma-false' }
passthrough copy => { 'src/pages/*.{jpg,png}': 'pages' }
passthrough copy => { 'src/pages/*.{jpg,png}': 'pages/future' }
passthrough copy => { 'src/pages/*.{jpg,png}': 'pages/perma-false' }
passthrough copy => { 'src/pages/*.{jpg,png}': 'pages' }
passthrough copy => { 'src/pages/*.{jpg,png}': 'pages/future' }

Writing www/pages/future/index.html from ./src/pages/future.liquid.
Writing www/pages/perma-false/index.html from ./src/pages/perma-false.liquid.
Writing www/pages/index.html from ./src/pages/index.liquid.

Wrote 3 files in 0.07 seconds (v0.12.1)

---

UPDATE: actually, looking at the logs above, that doesn't look right at all, but then again, my input files look like:

tree src www

src/
├── _data/
│   └── site.js
└── pages/
    ├── banana.png
    ├── cupcake.jpg
    ├── future.liquid
    ├── index.liquid
    ├── pages.11tydata.js
    ├── perma-false.liquid
    └── pigeon.jpg
www/
└── pages/
    ├── future/
    │   └── index.html
    ├── index.html
    └── perma-false/
        └── index.html

5 directories, 11 files

So since all 3 of my templates live at the root level of ./src/pages/, it will end up copying the *.png and *.jpg files into each output folder (www/pages/, www/pages/future/, and www/pages/perma-false/). Possibly not an issue if all your posts are in specific subfolders.
Not to mention, if the code worked, and you had 200 blog posts, it'd end up creating a huge number of passthrough copy configs to keep track of on every build.

I can think of some arguably worse solutions, but that'd probably involve listing the paths to your static assets in the frontmatter, and then creating some weird shortcode that would copy those static assets from their src/assets/ directory into whatever the eventual permalink path might be. But I like it less and less the more I look at the code.

  eleventyConfig.addShortcode("copyassets", (assets=[], page={}) => {
    for (const asset of assets) {
      const outDir = path.dirname(page.outputPath);
      const outFile = path.join(outDir, path.basename(asset));
      // We need to manually pre-create the directory since 11ty probably hasn't started writing files yet at this point.
      fs.mkdirSync(outDir, {recursive: true});
      fs.copyFileSync(asset, outFile);
    }
    return;
  });

---
title: Future
date: 2022-02-22
assets:
  - src/pages/banana.png
---

{%- copyassets, assets, page -%}

I'm from the future.

[nachtfunke]

Okay that is very in-depth, thank you! I do understand how this could lead to some unwanted side-effects with a larger collection. I'm gonna have to rethink how I handle images in blogposts. Thanks!