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.

Support

Moving modules breaks images

Solved by Andy Miller View solution

Started by tradedemon 7 years ago · 7 replies · 534 views
7 years ago

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.

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

7 years ago

Does it fix itself when you clean cache?

7 years ago

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

7 years ago

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 %}

last edited 03/29/19 by tradedemon
7 years ago

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|690x117

last edited 04/04/19 by tradedemon
7 years ago Solution

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

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

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
3 66 47 minutes ago
Support · by Anna, 3 days ago
2 72 22 hours ago
Support · by Justin Young, 23 hours ago
1 40 22 hours ago
Support · by Duc , 1 week ago
2 76 6 days ago
Support · by Colin Hume, 1 week ago
2 70 6 days ago