Twig Example: Pagination for Looper Providers (finally!)

[raye]

Just wanted to give a nice Twig example on how to solve a problem I often ran into:
Pagination of a Looper Provider

TLDR; use {{ (query.current_page-1)*9 }} in the Offset field of the Looper Provider.

Explanation

Of course, you can create a “simple” Archive Layout without a Looper Provider for a Custom Post Type. In fact Themeco’s docs and videos recommend to not use a Looper Provider in an Archive Layout.

Let’s assume we have built a Custom Post Type with ACF for Events. The Events do have a start date and an end date.

Correct me if I am wrong with the following statement:
If you want to use Meta Values i.e. to not show Events that lies in the past, or order the Events by a Meta Value like a custom ACF date field then you need a Looper Provider.

The current behavior with pagination and a Looper Provider is:
No matter what pagination page you are on, you always get the same first 9 items of the query (in my example 9, cause that is my current setting in WordPress > Reading).

Now one way you can achieve pagination with Twig is seen in the following screenshot:

Here I use the Meta Values field to show only Events whose start date lies in the future and not in the past. And I also use the Meta Value to sort the Events by their start date in the Order By field.

So the idea of this approach is to re-set the Offset value in the Looper Provider on every pagination page. If I’m on pagination page 1 set the offset to 0, if I’m on page 2 set the offset to 9, on page 3 set it to 18 etc.

Luckily, the {{dc:query_current_page}} does work correct and returns the current paginated page you are on. So if you take this value, subtract one and multiply it by 9 you have the offset value you can use for pagination.

So with {{ ({dc:query:current_page}-1)*9 }} in the Offset field of the Looper Provider pagination is working.

Already love the Twig feature, great job! Making calculations in dynamic data alone is a really cool feature.

Edit: as @charlie mentioned in the post below it is better to use Twig syntax only like this:
{{ (query.current_page-1)*9 }}
This is possible since every dynamic content can also be accessed with Twig syntax. Just remove the dc: and exchange the colons : with dots .
So dc:query:current_pagebecomes query.current_page.

[charlie]

Really glad you are liking it. Just a few notes.

You can write that calculation as the following. Utilizing entirely Twig. You can add regular dynamic content inside a Twig statement (since normal dynamic content runs first), however if the dynamic content is not a number your going to need to do something like {{ "{{dc:post:title}}" | upper }}. Twig is also going to cache the templates better if you don’t mix regular DC with Twig.

{{ ( query.current_page - 1 ) * 9 }}

Couple of take-aways from my seat.

• It’d be nice to have a zero index based current page count. Similar to what I added for {{dc:looper:index_zero}}.
• Being able to get the “WordPress > Reading” setting you mentioned (posts_per_page) in Dynamic Content would be great.
• Having a repurposed “Post Pagination” for loopers would be really nice. You can’t do everything with that element, but it would still help. The only problem there would be being able to enter the total count for more advanced loopers like in an API.
• I need to add the response headers to the debug info of API Loopers. A couple of APIs I’m looking at send the total item count in the headers not the response body.

Have a great day.

[raye]

Thank you for your notes.
The whole Twig thing in Cornerstone is new for me, and I have overseen the possibility to access every dynamic content with Twig syntax and dot notation. I edited the example above.

And yes, while playing around with this example I also asked myself if there is something like query.current_page_zeroand something like a posts_per_page

[deranaloge]

@raye thank you for your detailed explenation!

@charlie can you add an element for this? so user that doesnt know how to use it also have this? and also a section with looper provider and twig pagination setup?
would be awesome!

[charlie]

It probably makes sense to have a ‘By Page’ offset just for this as opposed to having people find that Dynamic Content.

I still have to make my way to repurposing the pagination element for custom loopers, but we’ll start handling this eventually.

Have a great weekend.