Setting the 'Featured Image' as the blog post header image

octagondesign · March 2017

Hi there,

So i'm creating a standard post with content that includes the standard text and images, no problem. When I add a 'Featured Image' it appears as a boxed image following the style of other images on my site, again no problem as such. However as I need the page header to be on throughout the site, it is turning up blank on my posts, pushing my content down. Therefore I was wondering if instead of the Featured Image appearing on the page as a boxed image, is there a setting that I've missed or a piece of code that tells the Featured Image for that post to appear as the header image for that post (to resize and crop according to the site settings of the header image)? Hopefully this isn't too tricky if it's not already a feature.

Ta,

Ray.

Bryan · March 2017

Hi,

Please send us a link to your website and a screenshot on how this is supposed to be looking after changes.

thanks

octagondesign · March 2017

Hi there, if you check http://knockbredaps.com/learning-tag-rugby/ as a sample of a blog post, the large photo on that page is the Featured Image for that post (and which appears under what should be the header image which is blank, pushing the content down).

The header image on http://knockbredaps.com/p5/ is where I would like the Featured Image for posts to appear i.e. within the header - is this possible? Thanks

Bryan · March 2017

Just edit the page, if you edit the post featured image will show in the post content, but when you scroll down you will see a section called header image, set that to display the image in the header.

thanks

octagondesign · March 2017

Yes I know that's one way of doing it but the problem is that it is important that it is the 'Featured Image' that is used as it is the Featured Image that the Blog grabs and displays, whether it be on the blog page or elsewhere on the site, like a 'Latest News' posting, do you know what I mean?

Albert · March 2017

Sorry but we don't get what you mean exactly. When we go to single post page which is http://knockbredaps.com/learning-tag-rugby/, we see similar image in header (http://pasteboard.co/KyhBNOpvQ.png) as it is on http://knockbredaps.com/p5/ so for us it looks nearly the same. The only difference is that on single post pages, featured image is too big and it's cut. But, you can change its size of course, with the following custom css:

body:not(.template-slider) #Header_wrapper { background-size: cover !important; }

octagondesign · March 2017

Sorry my fault for not explaining it correctly…

OK so obviously each blog post has the ability to display a Featured Image, which is then displayed within the content of that post. That Featured Image is important as the image is also featured on the blog page as the image for that post, as well as the 'News + Events' on the home page. So basically anywhere on the site that post appears, the Featured Image for that post appears too - which is fine and what I want.

However because the Featured Image appears in the body of the blog post, under the post title, the header is blank UNLESS I add the same image here as well. So now I have the same image on the page twice:

Once as the Featured Image - because I want that image to appear everywhere on the site that the blog posts are listed…

Once in the blog header, because I don't want this left as a blank space.

So basically all i'm asking is… when I set the Featured Image, INSTEAD of appearing in the body of the post, can it be displayed AS THE HEADER for that post, automatically?

Bryan · March 2017

No, this is not possible. There are too many header options and possibilities to have it appear automatiaclly. You have to do it twice.

octagondesign · March 2017

Shame, it's a feature that would be very handy, I will have to think of a workaround as the current setup doesn't work for me. Thanks anyway.

Setting the 'Featured Image' as the blog post header image

Comments