Paginate-v2 leaving blank spot

Help
1

I migrated from regular vanilla jekyll-paginate to jekyll-paginate-v2. It went pretty smooth and everything works as expected except for one hiccup, my settings are set to have 9 blog posts per page but it is making 8 on the first page, leaving a blank spot for the 9th. Then doing it correctly on page 2. This never happened with the old plugin and i didn’t change anything besides the _config.yml and gem file.

Here are my settings:
_config.yml:

plugins:
  - jekyll-feed

gems:
  - jekyll-paginate-v2

# Pagination Settings
pagination:
  enabled: true
  per_page: 9
  permalink: '/page:num/'
  title: ' - page :num'
  limit: 0
  sort_field: 'post-priority'
  sort_reverse: false
  debug: true

gem file:

source "https://rubygems.org"
gem 'github-pages'
gem 'jekyll-sitemap'
gem 'jekyll-paginate-v2'
2

What version of Jekyll are you using ? For me paginate doesn’t work with 4.0

3

@jack I am using version 3.9.0

4

thanks for the awesome information.

5

Can you share your code or GitHub repo, it will be helpful to debug that way.i

6

@jack The repo is private but I can share as much as i can. The complete gemfile is shared in my first comment.

Here is most of the _config.yml, just excluded identity info that shouldn’t be relevant anyway:

# Layout settings
header_type: default  # values [ drawer, default ]
post_type: highlight    # values [ highlight, default ]
pagination_type: default  # values [ ops, default ]
report_type: default
collections:
  reports:
    output: true

disqus: false

# Build settings
markdown: kramdown

plugins:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-seo-tag
  - jekyll-paginate-v2

# paginate: 9
# paginate_path: "/page:num/"

# Pagination Settings
pagination:
  enabled: true
  per_page: 9
  permalink: '/page:num/'
  title: ' - page :num'
  limit: 0
  sort_field: 'post-priority'
  sort_reverse: false
  debug: true

and here is the pagination part of the index.html, again not gonna post it all cause most is not relevant to it:


  {% if paginator.total_pages > 1 %}
  <div class="wj-pagination"> 
    {% if paginator.previous_page %}
      <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
    {% else %}
      <span>&laquo; Prev</span>
    {% endif %}
  
    {% for page in (1..paginator.total_pages) %}
      {% if page == paginator.page %}
        <span class="active">{{ page }}</span>
      {% elsif page == 1 %}
        <a href="/">{{ page }}</a>
      {% else %}
        <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
      {% endif %}
    {% endfor %}
  
    {% if paginator.next_page %}
      <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
    {% else %}
      <span>Next &raquo;</span>
    {% endif %}
  </div>
  {% endif %}
7

I found out the reason why there is a blank spot only on the first page. I forgot i have a highlighted post at the top that is different from the rest so it counts in the paginator counter. So i thought setting the offset of the plugin to 1 would solve it but it didn’t do anything :thinking:

Here is the start of my index.html that involves the highlighted post:

---
layout: default
pagination: 
  enabled: true
---
<div class="page-content">
  <div class="mdl-grid">

 {% assign sortedPosts = paginator.posts | sort: 'post-priority' %}

  {% if site.post_type == 'highlight' %}

    {% for post in sortedPosts %}
    {% if post.highlight %}
    <div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">

      <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}></header>

      <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
        <div class="mdl-card__supporting-text">
          <h4>{{ post.title }}</h4>
          <p>{{ post.excerpt }}</p>
        </div>
        <div class="mdl-card__actions">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
        </div>
      </div>
      ...