Creative misuse of jekyll-paginate-v2

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">&laquo; Previous</a>
      {% else %}
        <a href="/photos/page/{{ current_page | minus: 1 }}/" class="page-nav">&laquo; 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 &raquo;</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.

I am not sure that I understand the problem and what you have tried, since the link you posted is working. Also, when pasting code, paste each file individually. The way it is is hard to identify where one starts and another ends. Also add syntax highlight to them, so it is easier to read them.

I’m now hiding the pagination links that led to dead pages. The issue is that the last 23 images in the directory didn’t generate pages for an unknown reason.