Skip to content
● Meet Grav Guard: keep every Grav site you run secure and up to date, all from one place. Free for up to 3 sites. Read more →

Applying CropResize to background image URL

Started by Pascal 9 years ago · 4 replies · 1058 views
9 years ago

Hi guys. I bet this will be pretty easy, but I can't figure it out.
I am displaying an image as a background via in-line css.
Can someone tell me how to apply cropResize to that image before rendering it?

TWIG
        {% for image in entry.images %} 
                <div class="projectimage" style="background: url('/{{ image.path }}');"></div>

Thank you!

last edited 03/30/18 by Pascal
9 years ago

Hm, this does not seem to work after all. That statement doesn't output anything for me …

9 years ago

What is this entry exactly? If this refers to a page, you have to add media to it, exempla

TWIG
{% for entry in page.children %}
{% for image in entry.media.images %
<div class="projectimage" style="background: url('{{ image.cropResize(300,300).url }}');"></div>
{% endfor %}
{% endfor %}
👍 1

Suggested topics

Topic Participants Replies Views Activity
General · by Hanns Mattes, 6 days ago
0 93 6 days ago
General · by Dima, 2 weeks ago
1 121 2 weeks ago
General · by pamtbaau, 2 weeks ago
0 192 2 weeks ago
General · by lynbor, 2 months ago
5 701 4 weeks ago
General · by Andy Miller, 1 month ago
0 425 1 month ago