Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2020-02-10 16:59:22

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,258
Website

Re: Complex Pagination using Newer/Older with Shift

Note: This is the original version preserved should it be useful for someone.

Having seen the power of the new shift attribute, I kind of got carried away. Hopefully, someone besides me finds this useful.

Note: This required smd_if (at least for now) but that is a plugin I always install anyway.

Note: This is a slightly revised version 2 that works with the default Textpattern template.

Credits: Very much based on ideas from etc and Pat64. I furthered the design from this article Pagination Design Examples and Best Practices and paging through Wordpress Tavern and seeing how the pagination changes depending on which page you are on.

Explanation: There are two things to determine – what page you are on and how many pages total. If the total pages is 1, no pagination is needed. If the total pages are between 2 and 5, you get a custom set.

If the total pages are greater than 5, you get sent to another set. At this point, a third thing is determined – whether you are near the last page. If you are, or near the start, you get custom pagination. If not, you end up with a standard design (example):

Previous 1 … 4 5 6 … 28 Next

Demo: You can visit Pagination Demo to see it in action. Choosing any of the categories “Two Pages,” “Three Pages,” “Four Pages,” and “Five Pages” will show you those at work.

pagination

<style>
.pagination-outer{
display:table;
margin:0 auto
}
.pagination li{
position:relative;
display:inline;
display:inline-block;
min-width:2em;
margin-left:-1px;
padding:.5rem .75rem;
background-color:#fff;
color:#007bff;
text-align:center;
font:normal 300 normal 1em/1.25 Arial,sans-serif;
border:1px solid #dee2e6
}
</style>


<txp:output_form form="pagination variables" />

<txp:if_variable name="lastpage" value="2">
    <txp:output_form form="pagination-2" />
</txp:if_variable>

<txp:if_variable name="lastpage" value="3">
    <txp:output_form form="pagination-3" />
</txp:if_variable>

<txp:if_variable name="lastpage" value="4">
    <txp:output_form form="pagination-4" />
</txp:if_variable>

<txp:if_variable name="lastpage" value="5">
    <txp:output_form form="pagination-5" />
</txp:if_variable>

<txp:smd_if field="txpvar:lastpage" operator="gt" value="5">
    <txp:output_form form="pagination-master" />
</txp:smd_if>

pagination variables

<txp:variable name="currentpage" value='<txp:newer shift="0" link="" showalways="1"><txp:yield item="page" /></txp:newer>' />

<txp:variable name="lastpage" value='<txp:older shift="-1" link="" showalways="1"><txp:yield item="page" /></txp:older>' />

<txp:if_variable name="lastpage" value="">
    <txp:variable name="lastpage" value='<txp:variable name="currentpage" />' />
</txp:if_variable>

pagination-2

<!-- Pagination -->
<nav aria-label="Page navigation" class="pagination-outer">
	<ul class="list-inline pagination">

<txp:if_variable name="currentpage" value="1">
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
<txp:else />
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
</txp:if_variable>

	</ul>
</nav>
<!-- end: Pagination -->

pagination-3

<!-- Pagination -->
<nav aria-label="Page navigation" class="pagination-outer">
	<ul class="list-inline pagination">

<txp:if_variable name="currentpage" value="1">
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="2">
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="3">
      <txp:newer shift="2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
</txp:if_variable>

	</ul>
</nav>
<!-- end: Pagination -->

pagination-4

<!-- Pagination -->
<nav aria-label="Page navigation" class="pagination-outer">
	<ul class="list-inline pagination">


<txp:if_variable name="currentpage" value="1">
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2,3" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="2">
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="3">
      <txp:newer shift="2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="4">
      <txp:newer shift="3,2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
</txp:if_variable>

	</ul>
</nav>
<!-- end: Pagination -->

pagination-5

<!-- Pagination -->
<nav aria-label="Page navigation" class="pagination-outer">
	<ul class="list-inline pagination">


<txp:if_variable name="currentpage" value="1">
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2,3,4" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="2">
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2,3" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="3">
      <txp:newer shift="2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="4">
      <txp:newer shift="3,2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="5">
      <txp:newer shift="4,3,2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
</txp:if_variable>

	</ul>
</nav>
<!-- end: Pagination -->

pagination-master

<!-- Pagination -->
<nav aria-label="Page navigation" class="pagination-outer">
	<ul class="list-inline pagination">

<txp:variable name="pagecalc" value='<txp:evaluate query=''<txp:variable name="currentpage" /> - <txp:variable name="lastpage" /> '' />' />

<txp:if_variable name="pagecalc" value="-3">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="-2" link="" break="li" showalways="1">...</txp:newer>
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2,3" break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
      <txp:variable name="currentpage" value="-3" />
</txp:if_variable>

<txp:if_variable name="pagecalc" value="-2">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="-2" link="" break="li" showalways="1">...</txp:newer>
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1,2" break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
      <txp:variable name="currentpage" value="-2" />
</txp:if_variable>

<txp:if_variable name="pagecalc" value="-1">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="-2" link="" break="li" showalways="1">...</txp:newer>
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
      <txp:variable name="currentpage" value="-1" />
</txp:if_variable>

<txp:if_variable name="pagecalc" value="0">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="-2" link="" break="li" showalways="1">...</txp:newer>
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:variable name="currentpage" value="0" />
</txp:if_variable>

<txp:if_variable name="currentpage" value="1">
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="-2" link="" break="li" showalways="1">...</txp:older>
      <txp:older shift break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="2">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="-2" link="" break="li" showalways="1">...</txp:older>
      <txp:older shift break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="3">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift="2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="-2" link="" break="li" showalways="1">...</txp:older>
      <txp:older shift break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
</txp:if_variable>

<txp:if_variable name="currentpage" value="4">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift="3,2,1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="-2" link="" break="li" showalways="1">...</txp:older>
      <txp:older shift break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
</txp:if_variable>

<txp:smd_if field="txpvar:currentpage" operator="gt" value="4">
      <txp:newer shift="1" break="li" showalways="1"><i class="fa fa-angle-left"></i> Previous</txp:newer>
      <txp:newer shift break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="-2" link="" break="li">...</txp:newer>
      <txp:newer shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:newer shift="0" link="" break="li" showalways="1"><txp:yield item="page" /></txp:newer>
      <txp:older shift="1" break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="-2" link="" break="li" showalways="1">...</txp:older>
      <txp:older shift break="li" showalways="1"><txp:yield item="page" /></txp:older>
      <txp:older shift="1" break="li" showalways="1">Next <i class="fa fa-angle-right"></i></txp:older>
</txp:smd_if>


	</ul>
</nav>
<!-- end: Pagination -->

Offline

#12 2020-02-11 09:36:26

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,348
Website

Re: Complex Pagination using Newer/Older with Shift

Gorgeous Mickael! Definitivly to be added into the official doc!

Just a little improvment for your site demo, change styles by these ones instead:

.pagination {
/* Fallback */
display:table;
margin:0 auto;
/* Moder Browsers */
display:flex;
flex-direction:row;
align-items:center;
justify-content:center
}
.pagination li{
display:block;
min-width:2.5em;
background-color:inherit;
color:#007bff;
text-align:center;
font:normal 300 normal 1em/1.25 Arial,sans-serif
}
.pagination span{cursor:not-allowed}
.pagination a, .pagination span{display:block}
.pagination li a span{cursor:pointer}
.pagination span{padding: .5em .75em;border:1px solid #dee2e6}
.pagination span[aria-label="current page"]{cursor:default}

@media screen and (max-width: 38em) {

    .pagination {display:table;width:5em}
    .pagination li{display:block;width:100%}

}

Last edited by Pat64 (2020-02-12 07:23:44)


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#13 2020-02-12 00:21:14

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,258
Website

Re: Complex Pagination using Newer/Older with Shift

Pat64 wrote #321616:

Just a little improvment for your site demo, change styles by these ones instead:

I mixed what you did here with Phil’s original CSS – probably in a terrible way – but it adds some cool effects.

Thanks for the assist.

Offline

#14 2020-02-12 06:16:52

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,348
Website

Re: Complex Pagination using Newer/Older with Shift

Super cool, Michael! (I added a support for small screens into the styles above)

Last edited by Pat64 (2020-02-12 07:22:34)


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#15 2020-02-13 09:20:54

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 3,258
Website

Re: Complex Pagination using Newer/Older with Shift

I’ve recently found out the line:

<li class="active"><txp:newer shift="0" link=""><span aria-label="current page"><txp:yield item="page" /></span></txp:newer></li>

Would be more accessible as:

<li class="active"><txp:newer shift="0" link=""><span aria-current="page"><txp:yield item="page" /></span></txp:newer></li>

Offline

#16 2020-02-17 06:09:34

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,918
Website

Re: Complex Pagination using Newer/Older with Shift

This is interesting and works well for my needs —with the modification to use aria-current="page" as suggested above and my own classes and styling logic. But beat me if I understand what is going one v:–(.

Perhaps a stupid question but could you explain the evaluate logic in your <txp:pages evaluate="5,2,8,4,6" pg> ? This may help me understand better how those navigation constructions actually work. Tia.

Offline

#17 2020-02-17 21:21:05

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,258
Website

Re: Complex Pagination using Newer/Older with Shift

phiw13 wrote #321694:

This is interesting and works well for my needs —with the modification to use aria-current="page" as suggested above and my own classes and styling logic. But beat me if I understand what is going one v:–(.

Perhaps a stupid question but could you explain the evaluate logic in your <txp:pages evaluate="5,2,8,4,6" pg> ? This may help me understand better how those navigation constructions actually work. Tia.

I added a much more extensive explanation but basically there are 9 lines in the code with either newer or older – so by adding evaluate we are saying do line 5, then line 2, then line 8, then 4, and then 6 – and then 1, 3, 7, 9 in order. Without this, you would need all the complicated structures I had in the original pagination-master – this simple but ultra-powerful change condenses 9 different possibilities down to 1.

And yes, styling and classes will vary. I have been working on a port of Typerite and for pagination the default template uses

             <div class="row">
                <div class="column large-full">
                    <nav class="pgn">
                        <ul>
                            <li><a class="pgn__prev" href="#0">Prev</a></li>
                            <li><a class="pgn__num" href="#0">1</a></li>
                            <li><span class="pgn__num current">2</span></li>
                            <li><a class="pgn__num" href="#0">3</a></li>
                            <li><a class="pgn__num" href="#0">4</a></li>
                            <li><a class="pgn__num" href="#0">5</a></li>
                            <li><span class="pgn__num dots">…</span></li>
                            <li><a class="pgn__num" href="#0">8</a></li>
                            <li><a class="pgn__next" href="#0">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>

which is certainly doable but is taking a bit of modification.

Offline

#18 2020-02-17 22:07:37

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 1,918
Website

Re: Complex Pagination using Newer/Older with Shift

Thanks, I start to see the light on the working of this.

For your Typerite navigation bar, you should be able to add those classes to the <span />s you already have in your code with the same effect I think.

Offline

#19 2020-02-19 00:11:44

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,258
Website

Re: Complex Pagination using Newer/Older with Shift

This is what I came up with for Typerite – a bit convoluted but it seems to be working.

<txp:variable name="lastpage" value='<txp:older shift="-1" link="" showalways="1"><txp:yield item="page" /></txp:older>' />

<txp:pages pg="pg" evaluate="5,2,8,4,6">
            <div class="row">
                <div class="column large-full">
                    <nav class="pgn">
                        <ul>
                            <txp:evaluate test="newer"><li><a class="pgn__prev" href="<txp:newer shift="1" showalways />"><span aria-label="Go to previous page">Prev</span></a></li></txp:evaluate>
                            <txp:evaluate test="newer"><li><a class="pgn__num" href="<txp:newer shift />"><span aria-label="Go to first page">1</span></a></li></txp:evaluate>
                            <txp:evaluate test="newer"><li class="separator"><txp:newer shift="-2" link="" break=""><span role="separator" aria-label="More pages" class="pgn__num dots">…</span></txp:newer></li></txp:evaluate>
                            <txp:newer shift="1" break="li"><span class="pgn__num" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:newer>
                            <txp:newer shift="0" link="" break="li"><span class="pgn__num current" aria-current="page"><txp:yield item="page" /></span></txp:newer>
                            <txp:older shift="1" break="li"><span class="pgn__num" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:older>
                            <txp:evaluate test="older"><li class="separator"><txp:older shift="-2" link="" break=""><span role="separator" aria-label="More pages" class="pgn__num dots">…</span></txp:older></li></txp:evaluate>
                            <txp:evaluate test="older"><li><a class="pgn__num" href="<txp:older shift />"><span aria-label="Go to last page"><txp:variable name="lastpage" /></span></a></li></txp:evaluate>
                            <txp:evaluate test="older"><li><a class="pgn__next" href="<txp:older shift="1" showalways />"><span aria-label="Go to next page">Next</span></a></li></txp:evaluate>
                        </ul>
                    </nav>
                </div>
            </div>
</txp:pages>

The main difference was that I hard-coded 1 for the first page and used a previously-set variable for the last page so that I only had to use newer/older once per line – I needed to use it as a single tag for the url. I thought perhaps I could use txp:page_url but that only returns the current page.

Offline

Board footer

Powered by FluxBB