Add featured image support to header

Hey @andreas1,

I am trying the exact same thing to use the featured image as as header image on different sites. It seems like a very elegant solution.
Could you give me some hints, how you managed this? I am also struggling with this so a little help would be awesome.

Best regards,
Raphael

I have customised the here page, but it does not show.
this is the life customisation view.
this is the url: invatadesprebani.ro/
many thanks for your help.

Hi @raptor,

Where are you so far?
Did you create a child theme to modify your files?

If you did (or did not and decide not to update the theme in the future) do this:

add this line to functions.php :
add_image_size( 'illdy-header', 1920, 531, true );

go to header.php and find the opening header tag (first tag after body tag). Select the entire header tag and replace it with the following:

<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id(), 'illdy-header'); ?>

<header id="header" class="<?php if( is_front_page() ): echo 'header-front-page'; else: echo 'header-blog'; endif; ?>" style="background-image: url('<?php if( is_front_page() ): echo ( ( $jumbotron_general_image ) ? esc_url( $jumbotron_general_image ) : '' ); elseif( has_post_thumbnail() ): echo esc_url( $src[0] ); else: echo esc_url( get_header_image() ); endif; ?>');">

To explain what I did:

I added image size support for the new format illdy-header in functions.php
And in the header.php file declared the illdy-header format and added elseif statement to the style property of the header tag.

So home shows the jumbotron option, pages with featured image show this as header, and where featured image is blank, it uses the standard header image.

Initially I wasn’t going to publish my solution, but maybe @colorlibsupport will add it as a feature in a next update of the theme (if elegant enough) who knows :slight_smile:

If you run into issues, don’t hesitate to ask further questions :slight_smile:

Cheers

@ceci,

Don’t really get what you’re asking here…

Hello @nextand,
I was looking for the same customization as you did with the colour of the menu.
Can you please let me know in which theme file have you added the CSS code and in what position (if not at the end).
I am a total novice.
I greatly appreciated your help.
Ceci

Dear Colorlib,
I was looking for the same customization as you did with the colour of the menu.
Can you please let me know in which theme file have you added the CSS code and in what position (if not at the end).
I am a total novice.
I greatly appreciated your help.
Ceci

Dear andreas,
I have to admit that I could not understand my message either!
It was late last night and I had a lot of problems with the website, being a totally notice (only started on creating a website yesterday morning on WP, first time ever!).
so apologies for the confused message.
I think I customised the blog header page and it did not show. But now it shows.
On a related matter on the blog page, I would greatly appreciate if you could help me with two things:

  1. I am looking to reduce the image that the blog shows (it currently shows full width but it take almost all the screen, I would like for the photo to take 1/3 of the screen, if possible full width). Can this be done?
  2. on the blog page, I turned off the comments, but I have on the screen the following message ‘comments for this post are turned off’. Can I delete this message not to show any mention regarding comments on the my posts?
    I really really appreciate your help,
    Cecilia

@andreas1 - thank you! Very interesting proposal. I’ve tried it and it may just help me do what i’m hoping to do.

@andreas1

I’m very interested in how you got this working. Could you perhaps share with us how you managed to get the featured image to show on the pages?

Thanks in advance!

EDIT: I just saw you added the code above. Awesome! This was exactly what I was trying to do on my own but couldn’t figure it out. Thanks and great work. I hope they include this kind of support in the next update as well. Cheers!

The Parrallax effect stopped working after adding this however.

@mbrost

Glad to hear you got it working.
Don’t really know what you mean with parallax stopped working?

@andreas1

Hey thanks for the response. By parallax I mean the jumbotron image background moving a bit slower than the foreground. But no worries, the issue seemed to have worked itself out. Thanks so much.

My featured product image on the woo commerce page keeps appearing in my header . Also my price isn’t showing any help would be greatly appreciated!

https://19streetwear.com/product/xix-robin-blue-baseball-jersey/?preview_id=1184&preview_nonce=91088e7f50&_thumbnail_id=1202&preview=true