I'm just starting with Grav Quark theme and getting my head around twigs.
I can see an image normally renders an img tag with a srcset when there is a set of responsive images to use. I want to do the same for the background image of a hero module so that it uses a srcset/image-set.
I have been playing around with hero.html.twig using the derivatives method as below:-
TWIG
<section id="{{ id }}" class="section modular-hero hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}"
{% if hero_image %}style="background-image: url('{{ hero_image.url }}')
image-set('{{ hero_image.derivatives(480, 640, 960, 1280, 1600, 2240) }}') "
{% endif %} >
<div class="image-overlay"></div>
<section class="container {{ grid_size }}" style="text-align: {{ page.header.hero_align|default('center') }}">
{{ content|raw }}
</section>
</section>
This does output the srcset filenames but it is all intended for an HTML img tag of course:-
TXT
<section id="" class="section modular-hero hero hero-large text-light hero1 img-responsive " style="background-image: url('/user/pages/01.home/01._hero/hero1.jpg')
image-set('<img alt=" "="" src="/user/pages/01.home/01._hero/hero1.jpg" srcset="/user/pages/01.home/01._hero/[email protected] 960w, /user/pages/01.home/01._hero/[email protected] 1280w, /user/pages/01.home/01._hero/[email protected] 1600w, /user/pages/01.home/01._hero/[email protected] 2240w, /user/pages/01.home/01._hero/[email protected] 480w, /user/pages/01.home/01._hero/[email protected] 2500w, /user/pages/01.home/01._hero/hero1.jpg 640w" sizes="100vw">') ">
I'm thinking I'm not too far away from where I want to be by using hero_image.derivatives but I need a method that doesn't have all the img tag bits and pieces.
Can anyone suggest where I should look?