getPage Active Classes Applied Improperly

I am having trouble where getPage is not applying the correct classes for pagination on a blog. Keeping in mind there are only two pages of posts, the active class is always applied to the second page in the nav, even on the first page. It’s driving me nuts. I am using Bootstrap 4. Here is my snippet call:

[[!getPage@Pagination?
    &elementClass=`modSnippet`
    &element=`getResources`
    &parents=`[[*id]]`
    &tpl=`blogtpl`
    &includeContent=`1`
    &showHidden=`1`
    &includeTVs=`1`
    &processTVs=`1`
    &limit=`5`
    &sortby=`{"publishedon":"DESC"}`
    &includeTVs=`1` 
    &processTVs=`1`
]]

Property Set:

pageNavOuterTpl:
<nav aria-label="Blog Pages" class="mt-5"><ul class="pagination pagination-lg justify-content-center">[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></nav>

pageActiveTpl:
<li class="page-item active"><a class="page-link" [[+title]] href="[[+href]]">[[+pageNo]] <span class="sr-only">(current)</span></a></li>

pageFirstTpl:
<li class="page-item"><a class="page-link" [[+title]] href="[[+href]]">First</a></li>

pageLastTpl:
<li class="page-item"><a class="page-link" [[+title]] href="[[+href]]">Last</a></li>

pageNavTpl:
<li class="page-item" [[+classes]]><a class="page-link" [[+title]] href="[[+href]]">[[+pageNo]]</a></li>

Thanks for any tips!

1 Like