I’ve chewed on this one for quite a while now but without any luck. Anyone who can help me out with getting my hero images in different sizes (responsive)? I’m using the quark theme. My url is www.warlopboomverzorging.be.
Right now, i’m serving the images as inline css style background-image. My css uses image-set for retina images but it doesn’t work for different screen sizes.
I was wondering if the modular hero template can serve derivatives to serve a background image that fit? Code for templates is underneath:
modular > hero.html.twig:
{% set grid_size = theme_var(‘grid-size’) %}
{% set hero_image = ‘’ %}
{% set hero_image = ‘fruitsnoei_boomgaard.webp’ %}
{% include ‘partials/hero.html.twig’ %}
Thanks for answering. The css style that is used for the background image is generated inline so I can’t use the @media rules there unless I don’t know of something?
I tried to overwrite them with @media rules in my external css with (!important - which i rather not use) but that doesn’t came out well either.
If I’m not mistaken, I had a similar problem to yours: on my test environment for a new band website, I wanted a different image to be displayed on mobile (vertically orientated) screens than on (horizontally orientated) desktop screens. https://heutschi-merz.ch/0eg/
I solved this as follows in custom.css:
Thanks for answering as well. Your solution works beautiful with fixed images but In my case I have to work with variables as the picture changes per season (it’s a treeworker website) I assume that the background-image {{ hero-image }} is deleted in partials/hero.html.twig.
I tried to get the variable to show as an image but it only shows up as background-image. I tried with page.media.header-image but that returns a blank url :s.
If someone has ideas how I could address the image like that that would be awesome.
Thanks for your answer and happy NY from Belgium as well. I got it working through the
Thanks for your example. This opens up a lot of new things. I will examine and try to get it in my code. My previous image-set was working with the x1 and x2 as well but that didn’t work for the different sizes. Only for Retina screens. I keep you posted when I get this to work.
I got it going , thanks a lot. Seems like a nice solution. I do have to set the twig on never_cache because it’s a modular page. That makes me wonder if the solution is a 100% concerning page loading. I will give it a go and maybe can load the twig definitions in the base template if this would be better.
Xavier, you can use code i provided without never_cache_twig: true, since we are adding style inline. Note that if you use CSS background image you shouldn’t change Hero div tag to picture. But of course you can modify my example to suit your need.
Hi Xavier,
i remember this issue, tested with latest Grav + Quark theme and it works fine,
ok, besides never_cache_twig: true you can try replase {% style %} to <style> same for {% endstyle %} to </style>