Access to page.media.images in for-loop

Archive
1

Hi,

this is my first post here and I have a question where I hope that it is not too stupid.

My problem is the following: I wanted to extend the modular-element “features” (from the default antimatter-theme) with an individual background-image for each feature I insert. ok, file upload does not work, so I fell back to pagemediaselect in my YAML, which worked so far. The image that i choose in the dropdown is associated to the feature and its filename is accessible in the for loop:

{% for feature in page.header.features %}
   <div style="background-image: url('{{ feature.background }}');">
      some content here
   </div>
{% endfor %}

produces:

<div style="background-image:url('myimage.jpg');">
   some content here
</div>

But here comes the tricky part:

That is not enough - the background image will not be shown because in that case it relates to the base_url (http://localhost/tests/grav-dev/myimage.jpg).

I tried another approach:

{% for feature in page.header.features %}
   <div style="background-image: url('{% page.media.images['{{ feature.background }}'].url % }');">
      some content here
   </div>
{% endfor %}

which produces:

<div style="background-image:url('');">
   some content here
</div>

right - nothing.

What am I doing wrong here? Or is there another way to reference page images in for loops for blueprinted elements?

Thanks in advance.

2

never mind - found out by myself.

<div style="background-image: url('{{page.url}},{{feature.background}}')">
   some content here
</div>

did the trick …