Dynamic selection of entries with particular tags?

[j9t]

I’m trying to simplify some Eleventy setup by handling collections of entries that have a few tags in common.

Something like (pseudo-code) collections['tag1', 'tag2', 'tag3'], which returns a collection of entries that use all the respective tags.

One tag is trivial (collections['example']), and if only needed once or twice, getFilteredByTags works, too. In this project’s case, there are 10+ tag combinations, for which I don’t want to create as many getFilteredByTags configs, nor—the current solution—do I want to work with helper tags for this.

I tried several approaches, including using addNunjucksShortcode to then generate a collection, but that doesn’t work.

Am I missing something obvious, or is someone aware of a solution to this or a similar problem?

[pdehaan]

Normally I'd just suggest that getFilteredByTags API and maybe a loop, and maybe something like this:

  const tagMap = {
    _carrots: ["vegetable", "carrot"],
    _tomatoes: ["tomato"],
    _vegetables: ["carrot", "tomato"], // returns 0 records since no pages have both "carrot" AND "tomato" as tags.
  };

  for (const [name, tags] of Object.entries(tagMap)) {
    eleventyConfig.addCollection(name, collectionApi => collectionApi.getFilteredByTags(...tags));
  }

Or, another option if you want to dynamically query collections is maybe a hack like this (which might be a terrible idea, but seems to work):

eleventyConfig.addCollection("dynamic", collectionApi => collectionApi);

And then you can use it (in Nunjucks, LiquidJS is a bit trickier) like this:

{% for p in collections.dynamic.getFilteredByTags('vegetable', 'carrot') %}
<p>{{ p.data.title }} -- {{ p.url }} -- {{ p.data.tags | dump | safe }}</p>
{% endfor %}

[j9t]

Interesting; thank you! As far as I could pin it down, that .eleventy.js line (eleventyConfig.addCollection("dynamic", collectionApi => collectionApi);) doesn’t work; when I just add that one alone, everything breaks, as with issues like the following:

[11ty]   Template render error: (SNIP/partials/posts.njk)
[11ty]   Error: Cannot use "in" operator to search for "tools" in unexpected types. (via Template render error)

Is this missing something?

[pdehaan]

I pushed my sample repo to https://github.com/pdehaan/11ty-dynamic-collection

[j9t]

Thank you! Got it to work (needed the const/for parts, but not the eleventyConfig.addCollection("dynamic", collectionApi => collectionApi); one).

However, this ends up requiring even more code because I need to define many “tag maps” and still have to keep some helper tags (a peculiarity of the project), so I’m in need to review and restate the problem. But this gives me something to work with already—thank you!

[nhoizey]

@j9t did you try using a filter?

{% for item in collections.all | withTags('tag1', 'tag2', 'tag3') %}

[j9t]

Is that a built-in filter (wouldn’t work, just tried), or a custom one?

(Not my strong suit here and keep getting to know Eleventy, so maybe not seeing a forest for the trees!)

[nhoizey]

Sorry, no, there is no such built-in filter.

Here's a code that works (edited):

module.exports = function(eleventyConfig) {
  eleventyConfig.addNunjucksFilter("hasTags", (collection, ...tags) => {
    return collection.filter((item) => {
      const commonTags = tags.filter((tag) => item.data.tags.includes(tag));
      return tags.length === commonTags.length;
    });
  });
};

And then in your Nunjucks template, for example:

{% for item in collections.all | hasTags('tag1', 'tag2', 'tag3') %}
  …
{% endfor %}

[j9t]

Thank you @nhoizey! This works, too. (Marked Peter’s as “the” answer, but this one was helpful, too.)

Got it all to work now, so thanks both of you!

[nhoizey]

Great!

Looking for a solution for you actually helped me work on listing related contents.

I now have 2 filters for exact match of tags, or just find a number of them:
https://github.com/nhoizey/nicolas-hoizey.com/blob/main/src/_11ty/filters/collection.js

Here's an example where I use the second one to list related content with at least 2 common tags:
https://github.com/nhoizey/nicolas-hoizey.com/blob/main/src/_layouts/content.njk#L146-L178

Here's the result:
https://nicolas-hoizey.com/articles/2020/10/15/how-i-build-my-svg-sprites/#related