paginating over a collection created by template content (even though it's "too late"?)

[adamwolf]

Hiya folks!

I'm looking to paginate across all the images I've used. I'm currently primarily using nunjucks, but I would totally be open to a WebC or other solution!

It seems like if I want to collect the images into a collection by just using it in the content guts (with a shortcode or WebC component, or something) rather than by declaring a list of images used in the frontmatter or something, I can't really get that data until after I need to have the collection for pagination.

I tried a few approaches, read some source, read the docs. I landed on what I'm prototyping right now--multiple passes. (I really hesitated a lot before landing on this workaround.) I collect image data in the same shortcode that generates the HTML, and use an eleventy.after hook to compare it with global data I've effectively cached in a .json file. If there's a difference, it prints a message telling me I need to build again. The pagination then happens across the data from the json file.

I can't shake the feeling that I might be complicating things. Any insights or suggestions would be greatly appreciated, but maybe these questions can help shake something loose.

• Is there something obvious I should be doing to handle my images instead? For instance, "Adam, just put them all in the front matter and have a shortcode pull the usages from frontmatter, and then you can paginate across them just fine."
• Is there some other way to get a collection from the usages of shortcodes or components in content bodies early enough that I can still paginate across it?
• I don't know a massive amount about the order of operations and rendering and things--is there a way to trigger rendering of a pagination an extra bonus time after eleventyComputed, maybe?
• If multipass builds are a reasonable choice here, is there an obviously better way to do them? I haven't spent much time on them because I'm hoping to not stick with them :) Brainstorming, maybe have my eleventy.after touch the pagination file and then do an incremental build or something? If I stick with this multipass approach, I guess I'll have to look into calling into eleventy rather than using the existing CLI tooling.

Thanks everyone!

[pdehaan]

Interesting!
Whats... what's the use case?
Maybe the ignorant answer is if all the images are in a central directory, you could maybe use a glob and .addCollection() API to get all the .png, .webp, .jpeg, .gif files and return them as an array/object.
Not sure my other idea would work of using a specific shortcode/filter for to embed the images which would track which ones are used. It might work, but I have doubts if the pages are always built in a semi-random order.

But yeah, if you have a sample page you can share that shows how/where you're embedding these images maybe it will spark some other ideas.

[pdehaan]

I originally tried using .getFilteredByGlob(), but forgot that it won't match files/extensions that are unknown to Eleventy (despite the pretty Note on the aforementioned page):

"INFO: Note: getFilteredByGlob will not "find" files that are not supported by Eleventy. For example, a file with the extension .ray will be ignored even if it would match the glob."

Here's a rough example of fetching a glob of images using fast-glob instead:

const fg = require("fast-glob");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/assets");

  eleventyConfig.addCollection("images", function (collectionApi) {
    return fg.globSync(["src/assets/**/*.{jpeg,jpg,png,webp}"]);
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

Then I just paginate over the collection using something like this:

---
# src/_images.njk
pagination:
  data: collections.images
  size: 17
  alias: imgs
---

<h1>Images</h1>
{% for img in imgs %}
  <p>{{ img }}</p>
{% endfor %}

<pre>{{ imgs | dump(2) | safe }}</pre>

Sample output from www/_images/5/index.html

<h1>Images</h1>
<p>src/assets/images/image86.webp</p>
<p>src/assets/images/image87.webp</p>
<p>src/assets/images/image88.webp</p>
<p>src/assets/images/image89.webp</p>
<p>src/assets/images/image9.webp</p>
<p>src/assets/images/image90.webp</p>
<p>src/assets/images/image91.webp</p>
<p>src/assets/images/image92.webp</p>
<p>src/assets/images/image93.webp</p>
<p>src/assets/images/image94.webp</p>
<p>src/assets/images/image95.webp</p>
<p>src/assets/images/image96.webp</p>
<p>src/assets/images/image97.webp</p>
<p>src/assets/images/image98.webp</p>
<p>src/assets/images/image99.webp</p>
<p>src/assets/images/photos/photo-1.jpeg</p>
<p>src/assets/images/photos/photo-10.jpeg</p>

<pre>
[
  "src/assets/images/image86.webp",
  "src/assets/images/image87.webp",
  "src/assets/images/image88.webp",
  "src/assets/images/image89.webp",
  "src/assets/images/image9.webp",
  "src/assets/images/image90.webp",
  "src/assets/images/image91.webp",
  "src/assets/images/image92.webp",
  "src/assets/images/image93.webp",
  "src/assets/images/image94.webp",
  "src/assets/images/image95.webp",
  "src/assets/images/image96.webp",
  "src/assets/images/image97.webp",
  "src/assets/images/image98.webp",
  "src/assets/images/image99.webp",
  "src/assets/images/photos/photo-1.jpeg",
  "src/assets/images/photos/photo-10.jpeg"
]</pre>

BUILD OUTPUT

eleventy

[11ty] Writing www/_images/index.html from ./src/_images.njk
[11ty] Writing www/_images/1/index.html from ./src/_images.njk
[11ty] Writing www/_images/2/index.html from ./src/_images.njk
[11ty] Writing www/_images/3/index.html from ./src/_images.njk
[11ty] Writing www/_images/4/index.html from ./src/_images.njk
[11ty] Writing www/_images/5/index.html from ./src/_images.njk
[11ty] Writing www/_images/6/index.html from ./src/_images.njk
[11ty] Writing www/_images/7/index.html from ./src/_images.njk
[11ty] Writing www/_images/8/index.html from ./src/_images.njk

[11ty] Copied 144 files / Wrote 9 files in 0.07 seconds (v2.0.1)

[adamwolf]

The use case may seem a little wonky, I will be the first to admit!

I'm showing some images across a wide wide variety of viewports, so they're resized across 200 to 4000 px, sometimes. They're shown with picture and srcset et al. I have a lightbox that pops up when folks click on images that also uses picture and srcset, but I still wanted to provide for Javascriptless folks.

For Javascriptless folks, linking to an image directly would be fine, let the browser show it as a direct link page thing, except... which image should I link to? The smallest one? The biggest one? I have no real idea what their viewport is, or which formats they support. (This project isn't going to be able to serve images based on header things like Accepts for other reasons.). I figured I could make a page for each image that is basically the image using picture and srcset and sizes et al, and then their browser can figure it out.

I like the glob idea better than what I'm doing now, but I've cleaned up what I'm doing now enough that I'm not in hate with it as much as I used to be. (The shortcode that collects its usages, writes a metadata file to the global data directory if it has changed since the last run, and then everything reruns if necessary, so that the pagination can run across the collection from the global data directory.). If I just build a page for every image in my content directory, there's a chance I'll "overproduce" and build more pages than I strictly need to--say, if I had some images in my content directory I didn't use in a post yet--but the pages are very small and they won't be linked to except by usages of an image shortcode, so ... any overproduction of pages seems likely worth the reduction in complexity by not having to embrace this homebrew multipass abomination.

[pdehaan]

👏 "homebrew multipass abomination" 👏 :hattip:

[adamwolf]

Hmm, starting to run into some snags.

The old multipass way, I could do things like collect the alt text when images were used in context and then reuse it on the paginated gallery page.

Any thoughts? Any way I can poke a pagination to be regenerated later, maybe? eleventyComputedPagination, maybe? :)