Eleventy/11ty paginate content in pages generated from global data

32 Views Asked by At

I have a big global data JSON of images (ìmages.json) to build an image gallery with a structure like this (It's exported from a DB table):

[
  {
    "category_id": "4",
    "filename": "img_00.jpg",
    "title": "Title"
  },
  {
    "category_id": "3",
    "filename": "img_02.jpg",
    "title": "Title"
  },
  {
    "category_id": "4",
    "filename": "img_04.jpg",
    "title": "Title"
  },
  {
    "category_id": "1",
    "filename": "img_023.jpg",
    "title": "Title"
  },
  ...

And also a related category.json

[
  {
    "id": "1",
    "name": "Main"
  },
  {
    "id": "2",
    "name": "Work"
  },
  {
    "id": "4",
    "name": "Personal"
  }
]

Following this article, https://florian.ec/blog/eleventy-data-pages/ I was able to generate a single gallery page for each category (great).

My gallery.njk (the template I use to generate those pages) looks this way.

---
pagination:
    data: categories
    size: 1
    alias: category
permalink: "/gallery/{{ category.name | slugify }}/"
---
{%- set category_imgs = images | filterById(category.id) -%}
{% for img in category_imgs %}
  {{ img.filename }}
{% endfor %}

The filterById returns a collection of the images of the corresponding category.

  eleventyConfig.addFilter("filterById", function(collection = [], value) {
    return collection.filter(item => (Number(item.category_id) == value));
  });

Until this point everything went Ok... I get a bunch of pages each one containing the corresponding images of the category.

/gallery/main
/gallery/work
/gallery/personal

The question is that some of these pages have a lot of images, so I'm looking for a way to paginate them again in a second level (each one of them containing 20 images or so) and get something like:

gallery/main/page-1

gallery/work/page-1
gallery/work/page-2
...
gallery/work/page-89

gallery/personal/page-1
gallery/personal/page-2
...
gallery/personal/page-65

I'm looking for a solution that will not imply split, cut or divide the images.json if possible :angel:

0

There are 0 best solutions below