Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
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
evaluatelogic 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
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.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
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
#20 2020-04-15 16:13:36
- singaz
- Member
- Registered: 2017-03-12
- Posts: 150
Re: Complex Pagination using Newer/Older with Shift
Used version Textpattern 4.8
I am using code like this:
<txp:if_article_list>
<txp:if_category>
<txp:article form="article_list_category"/>
<txp:else />
<txp:if_author>
<txp:article_custom form="article_list_author"/>
<txp:else />
<txp:if_section>
<txp:article form="article_list_section"/>
</txp:if_section>
</txp:if_author>
</txp:if_category>
<nav class="navigation">
<txp:older><txp:text item="older" /></txp:older>
<txp:newer><txp:text item="newer" /></txp:newer>
</nav>
<txp:else />
<txp:article />
</txp:if_article_list>When I am in the place of the “author”, pagination does not work.
Question: in the <txp: if_author> </ txp: if_author> section, should pagination work or not? I have not used it before and I do not know how to use it correctly.
P.S.
<txp: if_author> </ txp: if_author> is this section or category …?
Sorry my horror English. I’m learning textpattern, I’m learning English
Offline
Re: Complex Pagination using Newer/Older with Shift
singaz wrote #322607:
When I am in the place of the “author”, pagination does not work.
Question: in the
<txp: if_author> </ txp: if_author>section, should pagination work or not? I have not used it before and I do not know how to use it correctly.
The problem is probably not <txp:if_author /> but <txp:article_custom />. Try with <txp:article /> instead?
Offline
#22 2020-04-15 21:38:31
- singaz
- Member
- Registered: 2017-03-12
- Posts: 150
Re: Complex Pagination using Newer/Older with Shift
Yes! <txp: article /> works as it should!
The correct code is:
<txp:if_author>
<txp:article form="article_list_author"/>
</txp:if_author>My inattention and subtleties of work <txp: article /> and <txp: article_custom />.
Thank you Oleg!
Sorry my horror English. I’m learning textpattern, I’m learning English
Offline
Re: Complex Pagination using Newer/Older with Shift
Super cool thanks for this @michaelkpate! :)
…………………
I <3 txp
…………………
Offline
Re: Complex Pagination using Newer/Older with Shift
Heads up for anyone having issues with displaying the current page item with the code discussed in this thread (the line containing txp:newer shift="0"), see this thread instead.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Complex Pagination using Newer/Older with Shift
I’ve been working on the pagination used on Textpattern.com based on Michael’s original example and some additional help from Oleg. This is the latest code we have for Textpattern 4.8.0:
<txp:evaluate query='<txp:pages total /> > 1'>
<txp:pages pg="pg" evaluate="5,2,8,4,6">
<nav class="paginator" aria-label="Blog navigation">
Pages:
<txp:newer showalways link=""><a rel="prev" href="<txp:yield item="url" />" title="Go to previous page" aria-label="Go to previous page">Previous</a></txp:newer>
<ul class="pagination">
<txp:newer shift link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" />" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></a></li></txp:newer>
<txp:newer shift="-2" link=""><li role="separator" title="More pages" aria-label="More pages">…</li></txp:newer>
<txp:newer total shift="2" link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" />" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></a></li></txp:newer>
<txp:newer shift="0" link=""><li class="current"><b title="Current page" aria-current="page"><txp:yield item="page" /></b></li></txp:newer>
<txp:older total shift="2" link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" />" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></a></li></txp:older>
<txp:older shift="-2" link=""><li role="separator" title="More pages" aria-label="More pages">…</li></txp:older>
<txp:older shift link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" /> (last page)" aria-label="Go to page <txp:yield item="page" /> (last page)"><txp:yield item="page" /></a></li></txp:older>
</ul>
<txp:older showalways link=""><a rel="next" href="<txp:yield item="url" />" title="Go to next page" aria-label="Go to next page">Next</a></txp:older>
</nav>
</txp:pages>
</txp:evaluate>Main change from Michael’s original is wrapping it in…
<txp:evaluate query='<txp:pages total /> > 1'>…only displays the pagination if more than one page is returned (otherwise you get a pagination widget with only 1 page on it which is a bit superfluous).
Other minor changes are mainly for accessibility additions.
And a more optimised version you can use in (upcoming) Textpattern 4.8.1 onwards (a slight change to how the current page is generated and a more succinct way of determining if more than 1 page exists):
<txp:pages pg showalways="2" evaluate="5,2,8,4,6">
<nav class="paginator" aria-label="Blog navigation">
Pages:
<txp:newer showalways link=""><a rel="prev" href="<txp:yield item="url" />" title="Go to previous page" aria-label="Go to previous page">Previous</a></txp:newer>
<ul class="pagination">
<txp:newer shift link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" />" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></a></li></txp:newer>
<txp:newer shift="-2" link=""><li role="separator" title="More pages" aria-label="More pages">…</li></txp:newer>
<txp:newer total shift="2" link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" />" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></a></li></txp:newer>
<txp:pages><li class="current"><b title="Current page" aria-current="page"><txp:yield item="page" /></b></li></txp:pages>
<txp:older total shift="2" link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" />" aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></a></li></txp:older>
<txp:older shift="-2" link=""><li role="separator" title="More pages" aria-label="More pages">…</li></txp:older>
<txp:older shift link=""><li><a href="<txp:yield item="url" />" title="Go to page <txp:yield item="page" /> (last page)" aria-label="Go to page <txp:yield item="page" /> (last page)"><txp:yield item="page" /></a></li></txp:older>
</ul>
<txp:older showalways link=""><a rel="next" href="<txp:yield item="url" />" title="Go to next page" aria-label="Go to next page">Next</a></txp:older>
</nav>
</txp:pages>EDIT: updated code following Oleg’s post below.
Last edited by philwareham (2020-05-28 10:29:17)
Offline
Re: Complex Pagination using Newer/Older with Shift
Oh, yes, checking for the a minimum of 2 pages before outputting the pagination bar is a good addition. I had not yet checked that out. Thank you (and Oleg) for that part.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Complex Pagination using Newer/Older with Shift
Both <txp:newer shift="0" /> and <txp:pages /> are working in 4.8.1 now, so the update should be automatic. Additionally, <txp:evaluate query='<txp:pages total /> > 1'>... check can be replaced with showalways attribute of pages container:
<txp:pages pg showalways="" evaluate="5,2,8,4,6">
...
</txp:pages>And if you need a pagination bar only for n pages and above, set showalways="n".
Offline
Re: Complex Pagination using Newer/Older with Shift
etc wrote #323362:
Both
<txp:newer shift="0" />and<txp:pages />are working in 4.8.1 now
that is good news, thank you. I’ll test it out tomorrow morning after giving the old body some rest.
Additionally,
<txp:evaluate query='<txp:pages total /> > 1'>...check can be replaced withshowalwaysattribute ofpagescontainer:
more magic awesomeness courtesy of Oleg :-) Thank you again.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Complex Pagination using Newer/Older with Shift
Thanks Oleg, I have now updated my previous code example with these changes.
Offline
Re: Complex Pagination using Newer/Older with Shift
Note to self: we should write a blog article for this once Textpattern 4.8.1 ships – detailing Michael’s original code and the other updates from all here. Very handy!
Offline