tldr: jekyll-paginate-v2 autopages made from a directory of static images doesn’t create enough pages, resulting in some pagination links leading to 404 errors.
I’m attempting to do something with Jekyll-paginate-v2 that surely isn’t supported, and which I wouldn’t ask for help with if it wasn’t already 80% working.
I’m attempting to generate auto pages and pagination links, not for posts, pages or collections, but for a directory of static files- images. I throw images in a directory and a layout loops through them 15 at a time, generating pages of images that i’ve applied a nice masonry layout to, letting me have a sort of tumblr-style image collection. I even have a separate rss feed for it. This is nice because I have a directory of over a hundred images I’d like to display and I do not want to make front matter files for each image, or a post for each image.
You might say this isn’t what Jekyll-paginate-v2 is meant to do, except that it’s already working, with the exception that too many pagination links are being generated in my page nav. If there are 27 pages generated, I’ll get 33 page links created in my nav. Originally I thought that there was a hard limit to the number of pages that are generated for static files, and the linked pages were how many pages there should be, but now I think the links are wrong and the number of generated pages are right. The “limit: 0” frontmatter argument had no effect that I can see on the number of pages generated, nor did trying “limit:100”. I tried moving pagination arguments from the page frontmatter to config as a “configuration” subsection of pagination and back, with no change.
Maybe this is a simple mistake with the pagination link section of my layout rather than a problem with generating auto pages.
Here’s relevant portions of my layout, my _config.yml section, and my page index frontmatter. You can see the actual generated auto pages at Photos - Wiley Wiggins
Layout portion with image loop and pagination links:
<div class="container">
<div class="container imageboard">
<section class="image-directory">
<div class="grid imagegrid" data-masonry='{ "itemSelector": ".grid-item"}'>
<div class="grid-sizer"></div>
{% assign photo_files = site.static_files | where_exp: "file", "file.path contains '/photos/'" %}
{% assign image_files = photo_files | where_exp: "file", "file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.png' or file.extname == '.gif'" %}
{% if paginator %}
{% assign current_page = paginator.page %}
{% assign per_page = paginator.per_page %}
{% else %}
{% assign current_page = 1 %}
{% assign per_page = 15 %}
{% endif %}
{% assign start_index = current_page | minus: 1 | times: per_page %}
{% assign temp_index = start_index | plus: per_page %}
{% assign end_index = temp_index | minus: 1 %}
{% for index in (start_index..end_index) %}
{% if index < image_files.size %}
{% assign image = image_files[index] %}
{% if image.basename contains 'x2' %}
<div class="grid-item grid-item--width2">
{% elsif image.basename contains 'x3' %}
<div class="grid-item grid-item--width3">
{% else %}
<div class="grid-item">
{% endif %}
<a class="lightbox-image" href="{{ site.url }}{{ image.path }}">
<img src="{{ site.url }}{{ image.path }}" alt="{{image.basename}}"</a>
</div>
{% endif %}
{% endfor %}
</div>
</section>
pagination links:
{% if image_files.size > 0 and per_page > 0 %}
{% assign total_pages = image_files.size | divided_by: per_page | ceil %}
{% if total_pages > 1 %}
<div class="pagination">
<a href="{{ site.url }}/photos/photos-feed.xml" class="rss-link"><i class="fas fa-rss"></i></a>
{% if current_page > 1 %}
{% if current_page == 2 %}
<a href="/photos/" class="page-nav">« Previous</a>
{% else %}
<a href="/photos/page/{{ current_page | minus: 1 }}/" class="page-nav">« Previous</a>
{% endif %}
{% endif %}
{% assign window_size = 2 %}
{% assign window_start = current_page | minus: window_size %}
{% assign window_end = current_page | plus: window_size %}
{% if window_start < 1 %}
{% assign window_start = 1 %}
{% endif %}
{% if window_end > total_pages %}
{% assign window_end = total_pages %}
{% endif %}
{% comment %} Always show first page {% endcomment %}
{% if current_page == 1 %}
<span class="current-page">1</span>
{% else %}
<a href="/photos/" class="page-number">1</a>
{% endif %}
{% if window_start > 2 %}
<span class="page-ellipsis">...</span>
{% endif %}
{% comment %} Show pages within window {% endcomment %}
{% for page in (window_start..window_end) %}
{% if page > 1 and page < total_pages %}
{% if page == current_page %}
<span class="current-page">{{ page }}</span>
{% else %}
<a href="/photos/page/{{ page }}/" class="page-number">{{ page }}</a>
{% endif %}
{% endif %}
{% endfor %}
{% if window_end < total_pages | minus: 1 %}
<span class="page-ellipsis">...</span>
{% endif %}
{% comment %} Always show last page {% endcomment %}
{% if current_page == total_pages %}
<span class="current-page">{{ total_pages }}</span>
{% else %}
<a href="/photos/page/{{ total_pages }}/" class="page-number">{{ total_pages }}</a>
{% endif %}
{% if current_page < total_pages %}
<a href="/photos/page/{{ current_page | plus: 1 }}/" class="page-nav">Next »</a>
{% endif %}
</div>
<div class="page-info">
Page {{ current_page }} of {{ total_pages }}
({{ image_files.size }} total images)
</div>
{% endif %}
{% endif %}
</div>
config.yml pagination section
pagination:
enabled: true
permalink: '/page/:num/'
limit: 0
sort_field: 'date'
sort_reverse: true
/photos/index.md pagination frontmatter:
permalink: /photos/
pagination:
enabled: true
per_page: 15
permalink: '/page/:num/'
limit: 0
title: 'Photos - Page :num'
sort_field: 'modified_time'
sort_reverse: true
/photos/ is full of image static files and has index.md alongside them.