Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Modular page: link to next sibling

Solved by flavio View solution

Started by Amaury Hanser 9 years ago · 8 replies · 1796 views
9 years ago

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:

TWIG
{% 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 ?

9 years ago

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

9 years ago

Sure:

YAML
---
content:
    items: '@self.modular'
    order:
        by: default
        dir: asc
        custom:
            - _texte
            - _texte2
---
9 years ago

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

9 years ago

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

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):

TWIG
{% 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

last edited 06/30/17 by Amaury Hanser
9 years ago Solution

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

https://github.com/getgrav/grav/issues/531

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 🙂

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

Hope this helps!

👍 1
9 years ago

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

9 years ago

@flavio:
You don't need the parameter in your case.

Perfect, I didn't know !

@flavio:
Can you make a PR on the Learn site?

Done. :)

👍 1

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 90 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 449 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 43 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 123 3 months ago