Posting this in case it’s helpful to others who run into the same issue.
I run a Grav blog with various types of posts in it and I had this issue where occasionally you write a post and you don’t want a header image. But I kept getting a big white space where the header image would be. I didnt want to create a whole new type of item template because it was only a few articles, so I tried to make a conditional if/else. I tried a few different methods, including this one, which did work, but would be laborious to deal with adding additional frontmatter to all the old entries that did have images. Then I realised the most logical method was to use page.media.images as true or false. It’s probably a bit hacky and I use a surrounding div but you don’t have to, obviously.
{% if big_header %}
{% if page.media.images == false %}
{# nothing shows #}
{% else %}
{% if page.media.images == true %}
<div class="post-image">{{ page.media.images|first.ropResize(1038,437).html(page.title, page.title, 'post-image')|raw }}</div>
{% else %}
{% if page.media.images == true %}
<div class="post-image">
{{ page.media.images|first.cropZoom(1038,437).quality(100).html(page.title, page.title, 'post-image')|raw }}</div>
{% endif %}
{% endif %}
{% endif %}
{% endif %}
I also deploy this at the page foot area to show a thumbnail of the hero image, with lightbox click for full size.
{% if big_header %}
{% if page.media.images == false %}
{% else %}
{% if page.media.images == true %}
<h6 class="hero-thumb">Full size header image (click)</h6>
<span class="hero-thumb">{{ page.media.images|first.lightbox(150).cropResize(150,150).html(page.title, page.title, 'thumb-cap')|raw }} {{ page.title }}</span>
{% endif %}
{% endif %}
{% endif %}
Hope this might be useful to someone, it saves making a whole new template, or backwards adding a frontmatter true/false to lots of old entries.