![{{ tagRecent[0].data.image.alt }}](/posts/img/{{ tagRecent[0].data.image.src }})
{% else %}
{% endif %}
{{ tag }}
{% set numPosts = collections[tag].length %}
({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
{% else %}
{% endif %}
```
{% endraw %}
### post body
the post body looks similar:
{% raw %}
```html
{% if image.src %}
{% endif %}
```
{% endraw %}
together, that sets up featured images for posts.
---
## pagination
### simple pagination
[Post pagination in Eleventy is pretty straightforward](https://www.11ty.dev/docs/pagination/){target="_blank" rel="external"}, mostly requiring some specific front matter.
The home page pagination I have set up here looks like the following (in `index.njk`):
```
---
pagination:
data: collections.posts
size: 13
alias: posts
reverse: true
---
```
6 posts per page, paginate data from `collections.posts` which we'll call just `posts` for short, and do it in reverse (aka, most recent posts show first).
[You'll also likely want previous and next buttons](https://www.11ty.dev/docs/pagination/nav){target="_blank" rel="external"}. I did. Here's what I have...
#### pagination.njk
There's two components to this, the bigger one being this `pagination.njk` template. Look, I like my little icons, ok? It takes an `olderHref` and a `newerHref`, and optionally an `olderTitle` and `newerTitle`.
{% raw %}
```html
{% if olderHref or newerHref %}
{% endif %}
```
{% endraw %}
#### calling the template
From `index.njk` we can `include "pagination.njk"`:
{% raw %}
```
{# idk why these are backwards either #}
{% set newerHref = pagination.href.previous %}
{% set olderHref = pagination.href.next %}
{% include "pagination.njk" %}
```
{% endraw %}
Yup. The order of previous vs. next is totally unintuitive to me, too.
### complex pagination
however, there's a catch. [Tag pages are *created* via pagination](https://www.11ty.dev/docs/quicktips/tag-pages/){target="_blank" rel="external"}! It's a lot harder to paginate those - you can't just use the front matter to set it up.
I untangled [this GitHub issue about double-layered pagination](https://github.com/11ty/eleventy/issues/332#issuecomment-445236776){target="_blank" rel="external"} and came to the following solution...
#### eleventy.config.js
in `eleventy.config.js`:
```js
// note that this uses the lodash.chunk method, so you’ll have to import that
eleventyConfig.addCollection("tagPagination", function(collection) {
// Get unique list of tags
let tagSet = new Set(collection.getAllSorted().flatMap((post) => post.data.tags || []));
// Get each item that matches the tag
let paginationSize = 6;
let tagMap = [];
let tagArray = [...tagSet];
for( let tagName of tagArray) {
let tagItems = collection.getFilteredByTag(tagName);
let pagedItems = chunk(tagItems.reverse(), paginationSize);
for( let pageNumber = 0, max = pagedItems.length; pageNumber < max; pageNumber++) {
tagMap.push({
tagName: tagName,
pageNumber: pageNumber,
pageSize: pagedItems.length,
pageData: pagedItems[pageNumber]
});
}
}
return tagMap;
});
```
#### tag-pages.njk
in my `tag-pages.njk` file (or whatever you use to template out your tag pages):
{% raw %}
```html
---
pagination:
data: collections.tagPagination
size: 1
alias: tag
eleventyComputed:
permalink: /tags/{{ tag.tagName | slugify }}/% if tag.pageNumber %{{ tag.pageNumber + 1 }}/% endif %
title: "Posts tagged {{ tag.tagName }}"
eleventyExcludeFromCollections: true
---
{% else %}
{% endif %}
{{ tag }}
{% set numPosts = collections[tag].length %}
({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
![{{ tagRecent[i].data.image.alt }}](/posts/img/{{ tagRecent[i].data.image.src }})
{% else %}
{% endif %}
{% endfor %}