Modular page: link to next sibling

Support Themes & Styling
#1

Hello,

In a submodular page, I try to get a link to the next submodular.
Thanks to the documentation I could get to this code:

{% if page.isLast(page.path) == false %}
    <a href="#{{ page.prevSibling(page.path).title }}">next</a>
{% endif %}

This works… but I don’t understand why.
I would have guessed that I had to use nextSibling, not prevSibling.
Could anyone explains this to me ?

#2

Hi, I think this depends on the collection ordering. Can you paste the parent page header?

#3

Sure:

---
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _texte
            - _texte2
---
#4

nextSibling is not returning anything? Or it returns the same value as prevSibling?

#5

It returns what I excpected would be nextSibling.

I have first _texte then _texte2
nextSibling returns _texte
prevSibling returns _texte2

Edit :
Well, maybe I can be more clear.

What I try to achieve is to have:

  • a button next submodular for each submodular except the last one
  • a button previous submodular for each submodular except the first one

I create the links like this (I’ve changed it a bit since first post):

{% if not page.isLast(page.path) %}
	<a href="#{{ page.prevSibling(page.path).title }}">next</a>
{% endif %}
{% if not page.isFirst(page.path) %}
	<a href="#{{ page.nextSibling(page.path).title }}">next</a>
{% endif %}

The link created in the first submodular of the list is the prevSibling, and the one in the last sumbodular is nextSibling

#6

Ok now I recall this issue, prevSibling and nextSibling work in the reverse.

To quote @rhuk’s answer on the topic,

Ok taken me a while to decipher this. I think the problem is simply that we chose a different terminology for previous and next.

In my thinking, next is up the list and previous is down the list.

I don’t know if there is a universal way to approaching this, but no matter what, changing how this works now will have dramatic effects on sites that are built expecting the current behavior. I suggest that if it feels ‘inverted’ to you, simply change the dir: asc to dir: desc or vice versa.

If you feel the nextSibling and prevSibling are inverted, just flip them in your code.

So how it works now:

Assuming you have the pages:

  • Project A
  • Project B
  • Project C
    You are on Project A, the previous page is Project B.

If you are on Project B, the previous page is Project C and next is Project A

Just visualize the list vertically and associate next with up and prev with down and it will make sense :slight_smile:

I got tricked as well now by the terminology I expected, while testing.

Hope this helps!

1 Like
#7

Thank you for the explanations !
I never thought it that way. I’ll know that I should inverse next and prev.

May I suggest to precise it in the documentation ?
This way is perfectly clear :

Assuming you have the pages:
Project A
Project B
Project C
You are on Project A, the previous page is Project B.
If you are on Project B, the previous page is Project C and next is Project A

#8

Can you make a PR on the Learn site?

Oh one thing: you’re using prev/nextSibling on the Page object. That is slightly different than the prev/nextSibling methods on the Collection object:

https://learn.getgrav.org/api/Grav/Common/Page/Page.html#method_prevSibling
https://learn.getgrav.org/api/Grav/Common/Page/Collection.html#method_prevSibling

You don’t need the parameter in your case.

#9

Perfect, I didn’t know !

Done. :slight_smile:

1 Like