Retrieve collection items based on custom frontmatter

[vdecree]

Hi there,

In 11ty how could I retrieve a list of posts grouped by some custom front-matter. My front-matter is using a category field like so:

title: My first post
description: The first post desc
author: Author Name
category: Lifestyle
date: 2023-03-02
featuredImage: /uploads/article-image.jpg
imageAlt: This is the image alt
tags:
  - post
  - featured

I don't know if it'd be better to just use tags for my categories so I have a collection per category. Advice appreciated.

[pdehaan]

Yeah, you could use tags to auto-create collections, otherwise you can use the collections API to manually create collections based on your specific categories:

  // eleventy.config.js snippet
  eleventyConfig.addCollection("Lifestyle", function (collectionApi) {
    const all = collectionApi.getAllSorted();
    return [...all].filter(p => p.data.category === "Lifestyle");
  });

---
# src/lifestyle.njk
category: Lifestyle
---

<h2>{{ category }}</h2>

{% for p in collections[category] %}
  <p>{{ p.data.title }}</p>
{% endfor %}

OUTPUT

<h2>Lifestyle</h2>

<p>My first post</p>

If you know what the specific collections will be ahead of time, it is a bit easier since you could probably use pagination to create your category archive pages and custom collections in a loop.

[pdehaan]

Another option could be some metadata prefixes in your custom tags/collections:

tags:
  - post
  - featured
  - category:Lifestyle
  - author:Author Name

And then something like this:

{% for p in collections['category:Lifestyle'] %}
  <p>{{ p.data.title }}</p>
{% endfor %}