Moving modules breaks images

Support
1

Hi guys, posted this on discord but got no answers. See the problem below.

I’ve noticed that if I setup sortable sections on a page and move a section/module around the images break. e.g.

/grav-cms/user/pages/03.Company/06.about-us/04._our-board/image.png

This is what the site is looking for but I’ve moved the module to position 03. so the actual files are now below.

/grav-cms/user/pages/03.Company/06.about-us/03._our-board/image.png

Is this a bug ? Surely the folder locations should update ?

This is the code I’m using to display the images in my template.

            {% for member in page.header.yoyo.board.members %} 
                  <li>
                    <div class="member">

                      {% if member.file %}
                        {% for key,val in member.file %}
                          {% set filepath = '/' ~ val.path %}
                            {% if member.link.url %}<a href="{{ member.link.url }}" target="_blank">{% endif %}
                              <img src="{{home_url}}{{filepath}}" class="member-img" />
                            {% if member.file %}</a>{% endif %}
                        {% endfor %}
                      {% endif %}

                    </div><!--/ .mention -->
                  </li>
              {% endfor %}

Many thanks
Zee

2

Does it fix itself when you clean cache?

3

I’ve cleared browser cache i.e. tested it in incognito mode on chrome and it’s still there.

Are we referring to a grav-cms cache setting ?

Zee

4

Any more ideas on what’s causing this ? or how I could potentially investigate it myself ?

It seems the folders/images all update correctly i.e. when a module moves it correctly re-labels itself in the files/directories. So I’m assuming the code I’m using to get my image paths is wrong ?

{% for key,val in header.yoyo.media.file %}
{% set filepath = ‘/’ ~ val.path %}
<img src="{{home_url}}{{filepath}}" class=“hero-img” {% if header.yoyo.media.style %} style="{{ header.yoyo.media.style}}" {% endif %}/>
{% endfor %}

5

If you see the screenshot I’ve dumped the file variable to look at the path.

The actual image in the project directory now sites inside:

01._hero/illo-epos-2x.png

This is correct as I moved the module to the number 1 spot. However as you can see the path still returns it as 02._hero/

image
image.png1848×315 34.4 KB

6

@rhuk Any ideas on this ?

7

Don’t use the path, just use the page’s media object in combination with the name… like this:

              {% for member in page.header.yoyo.board.members %} 
                  <li>
                    <div class="member">

                      {% if member.file %}
                        {% for key,val in member.file %}
                            {% if member.link.url %}<a href="{{ member.link.url }}" target="_blank">{% endif %}
                              <img src="{{ page.media[val.name].url }}" class="member-img" />
                            {% if member.link.url %}</a>{% endif %}
                        {% endfor %}
                      {% endif %}

                    </div><!--/ .mention -->
                  </li>
              {% endfor %}
2 Likes
8

Awesome problem is now resolved.