Responsive images in twig

Support Themes & Styling
1

Hi,

I am trying to use some twig logic while setting a hero image. However for some reason i can’t get it to work.

I tried using the derivatives option, which i thought would make most sense, but didn’t get it to work. My last attempt was using the size option in twig, but also here I don’t get it to work.

I currently have:

		{% set hero = page.media[page.header.header_image].sizes('(max-width:26em) 100vw, 50vw') %}

		<header style="background: #000 url('{{ hero.url }}');
			background-repeat: no-repeat;
			width: 100%;
			height: 90vh;
			transition: height 999999s;
			background-size: cover;
			background-position: center;
			position: static;" data-0="background-position:0px 0px;" data-500="background-position:0px -300px;">

I am using inline css here since thats the way the use can change the image within grav.

As far as i understand the documentation this should work one way or the other, right?

Very thankful for any pointers in the right direction.

Thanks,

Laurens

2

This works for me, user can add an image, first image will be displayed.

<div class="hero">
    {{ page.media.images|first.derivatives(320, 2000, 200).sizes('(max-width:26em) 100vw, 100vw').html() }}
</div>