Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#25 2020-05-27 14:24:45

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

#26 2020-05-27 23:00:32

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

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

Offline

#27 2020-05-28 10:15:10

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

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

#28 2020-05-28 10:25:30

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

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 with showalways attribute of pages container:

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

Offline

#29 2020-05-28 10:31:59

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Complex Pagination using Newer/Older with Shift

Thanks Oleg, I have now updated my previous code example with these changes.

Offline

#30 2020-05-29 08:13:16

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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

#31 2020-05-29 08:19:05

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Complex Pagination using Newer/Older with Shift

philwareham wrote #323392:

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!

Maybe I can ask Michael to incorporate these in a new article for txptips?


TXP Builders – finely-crafted code, design and txp

Offline

#32 2020-05-29 08:20:45

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Complex Pagination using Newer/Older with Shift

jakob wrote #323394:

Maybe I can ask Michael to incorporate these in a new article for txptips?

OK, sure – that makes sense. Basically as long as the solution is detailed somewhere that’s helpful for future reference (things in the forum get a bit buried after a few months, naturally).

Offline

#33 2020-05-29 08:28:17

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Complex Pagination using Newer/Older with Shift

Slightly OT but I was thinking of starting a series of short blog articles on .com prefixed with Feature focus:. I penned one yesterday (currently draft) on pageless sections and a little mention of the multi-edit tool’s ability to set them.

If anybody would like to write or propose an article for this series that focuses on a particular aspect of 4.8.x then please drop it to one of us. It could go hand-in-hand with a txptip.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#34 2020-05-29 13:06:16

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

Re: Complex Pagination using Newer/Older with Shift

jakob wrote #323394:

Maybe I can ask Michael to incorporate these in a new article for txptips?

I will try to whip something up this weekend. I’ve been following the discussion.

Offline

#35 2020-10-13 08:16:25

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Complex Pagination using Newer/Older with Shift

Hi, just reviving this old thread with a new question.

OK, so I had this pagination code working fine on a few sites:

<txp:pages pg link="" showalways="2" evaluate="5,2,8,4,6">
    <nav class="paginator" aria-label="Page navigation">
        <txp:newer showalways><a rel="prev" href="<txp:yield item="url" />">Previous</a></txp:newer>
        <ul class="pagination">
            <txp:newer shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:newer shift="-2"><li role="separator" aria-label="More pages">…</li></txp:newer>
            <txp:newer total shift="2"><li><a href="<txp:yield item="url" />"><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"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
            <txp:older shift="-2"><li role="separator" aria-label="More pages">…</li></txp:older>
            <txp:older shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
        </ul>
        <txp:older showalways><a rel="next" href="<txp:yield item="url" />">Next</a></txp:older>
    </nav>
</txp:pages>

But now I want to use that for a theme I’m creating for Textpattern, so I’d changed the various hardcoded texts in the above with actual <txp:text /> tags for multilingual use. Like so:

<txp:pages pg link="" showalways="2" evaluate="5,2,8,4,6">
    <nav class="paginator" aria-label="<txp:text item="page_nav" />">
        <txp:newer showalways><a rel="prev" href="<txp:yield item="url" />"><txp:text item="prev" /></a></txp:newer>
        <ul class="pagination">
            <txp:newer shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:newer shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:newer>
            <txp:newer total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:newer>
            <txp:pages><li class="current"><b aria-current="page"><txp:yield item="page" /></b></li></txp:pages>
            <txp:older total shift="2"><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
            <txp:older shift="-2"><li role="separator" aria-label="<txp:text item="more_pages" />">…</li></txp:older>
            <txp:older shift><li><a href="<txp:yield item="url" />"><txp:yield item="page" /></a></li></txp:older>
        </ul>
        <txp:older showalways><a rel="next" href="<txp:yield item="url" />"><txp:text item="next" /></a></txp:older>
    </nav>
</txp:pages>

And now the pagination code is pretty broken. I think it may be to do with the evaluate attribute and maybe it’s evaluating the text tags as well – but I’m not clever enough to work out how the evaluation works here anyway (I used Oleg’s code examples to make the pagination in the first place, and I admit I don’t really know how the nuts and bolts of this work).

Any suggestions on how to fix greatly appreciated.

Offline

#36 2020-10-13 08:27:24

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Complex Pagination using Newer/Older with Shift

The numbers in evaluate are the ‘positions’ of the tags inside the container that you want to evaluate, in the order you want them to be executed. In the original, the 5th top-level child <txp: tag (the <txp:pages> in the middle) was executed first. Then the 2nd (the first <txp:newer> inside the <ul>) and so forth.

When you introduced <txp:text> above those in the outer <nav>, you’ve pushed all the numerical indexes down by one. The other <txp:text> tags are all attributes inside other tags, so don’t count in the indexing, because they’re not direct descendants (first-child) tags of the tag that has the evaluate attribute.

I reckon if you add one to all the numbers in the evaluate tag, it’ll work again.

Last edited by Bloke (2020-10-13 08:30:22)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB