Quark Hero background image derivatives

Hi all,

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

partials > hero.html.twig:
{% if hero_image %} style="background-image: url('user/pages/01.home/01._hero/{{ hero_image }}');
background-image: -webkit-image-set(
url('user/pages/01.home/01._hero/linde_knotten_winter_800.webp') 1x,
url('user/pages/01.home/01._hero/linde_knotten_winter.webp') 2x);
background-image: image-set(
url('user/pages/01.home/01._hero/linde_knotten_winter_800.webp') 750w,
url('user/pages/01.home/01._hero/linde_knotten_winter.webp') 2048w); " {% endif %}>

Here is a similar question but without an answer :s.
/forum/themes-styling/hero-background-image-make-it-responsive-t4186

Thx in advance and kind regards,
Xavier

@3december, did you try to use @media rules?

Hi b.da,

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.

Kind regards,
Xavier

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:

/*! horizontal orientation*/
section.section.hero {
    background-image: url(‘/0eg/user/pages/01.home/01._hero/eghorizontal.jpg’);
}
.hero.hero-large {
    min-height: 75vh;
}

/*! vertical orientation*/
@media (max-width: 840px) {
    section.section.hero {
        background-image: url(‘/0eg/user/pages/01.home/01._hero/egvertikal.jpg’);
    }
    .hero.hero-large {
        min-height: 66.33vh;
    }
}

You can extend the @media rules as you wish. Of course you have to put the images in the right place.

I hope this helps.

Hi idna,

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.

Kind regards,
xavier

Xavier, happy NY 😉, in your inheritance theme:

1. add the code below to the top of partials/hero.html.twig
2. remove{% if hero_image %}style="background-image: url('{{ hero_image.url }}');"{% endif %} and other rules you add
3. clear cache

{% if hero_image %}
    {% set breakpoints = [480, 1024, 1366, 1920] -%}
    {% style %}
        .hero { background-image: url('{{ hero_image.url }}'); }
        {%- for point in breakpoints|reverse -%}
            @media only screen and (max-width: {{point|int|e-}}px) {
                .hero {
                    background-image: image-set(
                        url('{{ hero_image.cropResize(point|int, point|int).url }}') 1x,
                        url('{{ hero_image.cropResize(point|int*2, point|int*2).url }}') 2x );
                }
            }
        {%- endfor -%}
    {% endstyle %}
{% endif %}

Hi b.da,

Thanks for your answer and happy NY from Belgium as well. I got it working through the <picture> element with a background-image in css so the variable thing isn't still 100%

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.

Kind regards,
Xavier

Hey B.da,

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.

Kind regards,
xavier

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 b.da,
When I not use the never_cache_twig set to true mode ... the hero image disappears on every page load. I think it's cache related?

Kind regards,
Xavier

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>

Djeez, I feel stupid. Thanks for all. Your aid is appreciated. <3

kind regards,
Xavier