Get Sibling Image

Support Themes & Styling
1

I’m having a hard time understanding how to access specific data from a sibling page. I have the code below which I am able to access the url path for the next post, but how do I access a variable I have set? For example, I have “hero_image1” which I need to pull in…

{% if not progress.isFirst(page.path) %}
   <a class="" href="{{ progress.nextSibling(page.path).url }}"> <i class="fa fa-chevron-left"></i></a>
   <img src="{{ page.media[page.header.hero_image1].url}} " alt="{{ page.header.hero_image1 }}" class="img-fluid photos_inline">
{% endif %}

Any thoughts on this one?

2

I’m not certain, but you may need to change line 3 to:

<img src="{{ page.header[hero_image1].url}} "…

Possibly omitting the .url portion as well.

You may have already messed around with this… :man_shrugging:

3

Hey Andy, I tried that as well and did without the url portion too. The part I need to watch out for is that I am using “hero_image1” on the page already towards the top… so I’m not sure if I need to find the hero image from the sibling and put that in another variable…

Here’s my full code for context:

  {% set tags = page.taxonomy.tag %}
  {% if tags %}
      {% set progress = page.parent.children({'items':{'@taxonomy':{'category': 'docs', 'tag': tags}},'order': {'by': 'default', 'dir': 'asc'}}) %}
  {% else %}
      {% set progress = page.parent.children({'items':{'@taxonomy':{'category': 'docs'}},'order': {'by': 'default', 'dir': 'asc'}}) %}
  {% endif %}
  {% block navigation %}
  <section>
    <h1>Next builds...</h1>
    <div class="container">
      <div class="row">
        <div class="col-6">
          {% if not progress.isFirst(page.path) %}
      	    <a class="" href="{{ progress.nextSibling(page.path).url }}"> <i class="fa fa-chevron-left"></i></a>
            <img src="{{ page.header[hero_image1] }} " alt=" " class="img-fluid photos_inline">
        	{% endif %}
        </div>
    	{% if not progress.isLast(page.path) %}
    	    <a class="nav nav-next" href="{{ progress.prevSibling(page.path).url }}"><i class="fa fa-chevron-right"></i></a>
    	{% endif %}
      </div>
    </div>
  </section>
  {% endblock %}
4

I’m confused on how to target a specific variable within the nextSibling page… I’m able to output a URL in my below but how do I go about showing the title of the page? And also target a variable in this case; “hero_image1”?

{% if not progress.isFirst(page.path) %}
   <a class="" href="{{ progress.nextSibling(page.path).url }}"> <i class="fa fa-chevron-left"></i></a>
   <h4 style="color: white;"> RESULT: {{ progress.nextSibling(page.title) }}</h4>
   <img src="{{ progress.nextSibling(page.header.hero_image1) }}" alt=" " class="img-fluid photos_inline">
{% endif %}
5

Hi dan,

you have to keep in mind that progress is an array ( a page collection ).
Therefore, the parameter page.path in progress.nextSibling(page.path) is here to tell grav where you are in the array (I hope this is clear !).

Anyway, to answer your question, you should be able to grab image from next sibling with something like this (not tested):

{{ progress.nextSibling(page.path).media[progress.nextSibling(page.path).header.hero_image1] }}

To make this cleaner, you could do something like this:

{% set nextpage = progress.nextSibling(page.path) %}
{{ nextpage.media[nextpage.header.hero_image1] }}

Hope it helps!

6

Hey Paul, thanks that helped a lot and you’re cleaner version makes sense. One more question though, and maybe kind of dumb… haha… So “progress” is creating an array of pages which is something like “Page 1, Page 2, Page 3, etc…” how does “nextSibling” no A) which page is next and B) which page is currently active. …asking because I don’t see that piece in the code.

7

That’s what I tried to explain with

Therefore, the parameter page.path in progress.nextSibling(page.path) is here to tell grav where you are in the array.

For Grav to know which page is next and which page is previous, it has to know where he is in the array, that’s why you have to add page.path as a parameter.

let’s say you want to find which page is next relative to the page /blog/grav-tutorial-part-2, you would therefore write {{ progress.nextSibling(‘/blog/grav-tutorial-part-2’) }}.

page.path will output the path of the active page.

I hope this answers both your questions.