Use a Feature Image as header on my Blog Page

It’ s not really possible in the free theme without editing some code. you can use a child theme and edit the page-blog.php file, just add a either the page content of a call to pull the featured image.

Kadence Themes

Thanks for your response, I have already created a child theme. Do you know the exact coding I would need to add and where in the page-blog.php file I have to add it?

I am a novice at writing code and need a little guidance.

Thanks in advance.

You can add this:

<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' );
?>
<div class="postfeat container">
<div class="imghoverclass img-margin-center">
<img src="<?php echo esc_url($img_url); ?>" alt="<?php the_title(); ?>" />
</div>
</div>

Kadence Themes

Thanks for that, the code is great however it doens’t quite align with the other pages and feature images – this is the page I’ve just added the code to: https://chaosandtravel.com/blog/

but this is what I want it to look like: https://chaosandtravel.com/about-us/ – the idea is that it is aligned with the sidebar top image. Feature image here is 868 px wide and 308 px height (original image 1350×480) same dinmesions for the image I want to add to the blog page.

This is way above my head in coding so I’m to have to as for more help, but anything you can suggest would be great?

It has a container div is all, just change out for this:

<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' );
?>
<div class="postfeat">
<div class="imghoverclass img-margin-center">
<img src="<?php echo esc_url($img_url); ?>" alt="<?php the_title(); ?>" />
</div>
</div>

Then in the theme options > advanced settings add this:

.postlist > .postfeat {
margin-bottom: 20px;
}

Kadence Themes

Wow, that was super quick and easy – thanks for your help. much appreciated.

I had to change the second CSS edit a little to include a top margin to be exactly inline with the sidebar image.

‘.postlist > .postfeat {
margin-bottom: 20px;
margin-top: 20px;
}’

Thanks again.

Your welcome, don’t know if I made it clear but you’ll really want that change in a child theme so you don’t lose it with an update.

Kadence Themes

I was trying to use page featured image in header. All the pages were going right but the blog page was not displaying featured image. So, I took control this using page id in is_page() conditional tag.

<?php if (!is_page( array( 2, 5, 8, 12) ) ) {?> </p>
<p><img src="https://www.xyz-site.com/banner4.jpg"><br />
<?php } else {<br />
 echo the_post_thumbnail( 'banner-image' ); ?><br />
<?php }?></p>
<p>

But this is not a best practice, as my client will always contact with me to update it. Is there any best solution instead of this. Thanks in advance.