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: