[Resolved] Header elements post title below featured banner image

[Joshua]

Hi GP Team,

I have been trying to figure out how I can get my header to look like this: https://mayofi.com/wp-content/uploads/2021/01/Screen-Shot-2021-01-15-at-3.26.05-AM.png

The banner image is the featured image of the post, and the text below is the title. I figured I could probably add a generate_before_header hook and then use the header elements for the other elements such as the title.

I found this code that David posted on another topic:

<?php 
global $post;
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
?>
<div id="post" class="feat-image" style="background-image: url('<?php echo $thumb['0'];?>')"><!-- featured image --></div>

However, when I add the hook it doesn’t seem to work. Any ideas on how I can get this look? I feel like there’s something very simple that I am overlooking.

[David]

Hi there,

you can add the featured image to the Header Element using this template tag: {{custom_field._thumbnail_id}}

Then it just needs 0 padding on the header and some HTML eg.

{{custom_field._thumbnail_id}}
<div class="hero-content">
    <!-- your hero content -->
</div>

Then give the content some style:

.hero-content {
    padding: 30px;
    background-color: #ccc;
}

[Joshua]

Hey David, thanks!

I’ve added this HTML. When I do, it adds the thumbnail which looks like this on the page: https://mayofi.com/wp-content/uploads/2021/01/Screen-Shot-2021-01-15-at-9.55.45-AM.png

Since I want the image to be a full width banner, I changed the width of the image to be 100%, but then it looks like this: https://mayofi.com/wp-content/uploads/2021/01/Screen-Shot-2021-01-15-at-9.56.03-AM.png

Ideally, I’d like it to look like this: https://mayofi.com/wp-content/uploads/2021/01/Screen-Shot-2021-01-15-at-9.58.41-AM.png except with the text underneath the banner.

It seems like using the {{custom_field._thumbnail_id}} adds an image on the page, and in order to accomplish the look, the image would have to be set as a background image. Is that right of me to assume?

[David]

That depends… If the Image is large enough to fill the space then it should err fill the space.
By default the background image and that template tag will output the medium size image. You can change that using the PHP Snippet:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'large';
} );

Large should output the 1024px size image. Or you can change it to full for the original uploaded size.

[Joshua]

aah! That PHP worked.

Then, to control the height of the image, I placed it inside of a div like this:

<div class="article-header-hero">
	{{custom_field._thumbnail_id}}
</div>

Finally, I used this CSS to get the final result:

.article-header-hero {
    min-height: 440px;
    overflow: hidden;
    position: relative;
}

.article-header-hero img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
}

Thanks so much for your help, David!

[David]

Awesome – glad to be of help 🙂

[Author]

Posts