Get first page image in TWIG with "width: 100%" style applied

Support Themes & Styling
1

I am trying to get the first page folder image inside a twig template with a “width: 100%” CSS style applied.

I have tried both:

<a href="{{ page.url }}">{{ page.media[0].html('{{ post.title }}', '{{ page.title }}', 'full-width') }}</a>
(with a CSS file with 100% width applied).

and

<a href="{{ page.url }}"><img src="{{ page.media.images[0].url }}" alt="{{ page.title }}" style="width: 100%" /></a>

without success.

Any tips? Thanks.

2

are you sure it should be page.media.images.url ? try this one, for me it works perfectly:
page.header.image[0]|first.path

1 Like
3

or page.header.image[0] only

1 Like
4

{{page.media.images|first.url }} will do the trick

1 Like