Use featured image as header on posts & pages with title overlay

Try these steps instead:
Follow these steps:

1. Create a Child Theme and activate it;
2. Copy header.php from the parent theme and put it into your Child Theme folder;
3. Replace all of the code from that (header.php) file with the code in this pastebin page: https://pastebin.com/JCfEb2h2

That may not work but you’ll have to work with us back and forth.

Andrew, thanks for following up with this. I too am looking for this similar result.

Thank you Andrew. The header image on posts have been replaced with featured images.

Now, I need the featured images to fill 100% of the page, same as the front page header, I need to remove the redundant featured image above the story, and finally, the post title should be where the site title normally appears in the 2017 theme.

I sincerely appreciate your willingness to walk me through this, Andrew. If you live in NYC, I will buy you a beer (or whatever!)

Now, I need the featured images to fill 100% of the page, same as the front page header

the post title should be where the site title normally appears in the 2017 theme

Try the code in this pastebin instead for your Child Theme header.php file: https://pastebin.com/eAwAbbgX
[Pastebin updated]

• This reply was modified 7 years, 5 months ago by Andrew Nevins.

OK, probably a missing piece in there somewhere, because I now get the following error:

Parse error: syntax error, unexpected end of file in /home/stalin/public_html/wp-content/themes/twentyseventeen-child/header.php on line 77

Until I hear back from you again, I will compare the files and see if there’s a missing tag in there somewhere…

Sorry try this instead: https://pastebin.com/qSwFRFUv

• This reply was modified 7 years, 4 months ago by Andrew Nevins.

Nice, Andrew. I could not figure out what was wrong with your previous pastebin, but anyway, now we are making strong progress. The article title is at the top, and I see that your code fills the width of the header space, too, which is good. Now how can I give the post header image the same height as the frontpage header image?

See this article, for an example of what I’m talking about.

https://chronicle.su/news/donald-trump-to-seek-asylum-in-saudi-arabia/

Also, it’s very interesting that the text line reveals pieces of the header logo behind it lol. Looks like a computer virus from the 90s!

It’s impressive how you’re able to just pull this stuff out of your hat like that.

Also, it’s very interesting that the text line reveals pieces of the header logo behind it lol. Looks like a computer virus from the 90s!

Try this Pastebin instead: https://pastebin.com/rS4mNfJx [Updated without errors]
What you should then see is the post title in there, but without styling.

Now how can I give the post header image the same height as the frontpage header image?

I need to remove the redundant featured image above the story

In your Child Theme style.css file add this CSS:

@media screen and (min-width: 48em) {

    html .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
        height: 1200px;
        height: 100vh;
        max-height: 100%;
        overflow: hidden;
        position: relative;
    }

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .site-branding {
        bottom: 0;
        color: white;
        display: block;
        left: 0;
        height: auto;
        padding-top: 0;
        position: absolute;
        width: 100%;
    }

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .single-featured-image-header {
        display: none;
    }
}

It’s impressive how you’re able to just pull this stuff out of your hat like that.

You’re making it happen by being patient and working with us, that’s the impressive thing. Thanks!

• This reply was modified 7 years, 5 months ago by Andrew Nevins.
• This reply was modified 7 years, 5 months ago by Andrew Nevins.

You might see some problems on mobile but we can get to that if the above works.

Thanks Andrew. Sorry for the delay in response. I just got home from my other job.

Your code works great. There was a missing <?php tag again, but this time I found it! We are making excellent progress, man. I see what you mean, though, about mobile. Mobile (or just resizing the screen) – in addition to showing the featured image where we want it – still shows the featured image in the default location, too. But wow. You’re working miracles over there.

I would like to add that I am very pleased with how this is coming along.

In the past couple of days since you started helping me, I have been reduced to a baby-like, renewed awe at the world, as you’ve shown me just how little I knew. And so at the end of this, I might even ask you how to style that title font; like, what are my choices of font, and whether I need a new, separate class and that sort of thing. Because seeing your code at work has shifted my paradigm so radically, I want my own changes to fall into this new order you’re setting about because it’s very impressive and I want to continue learning how to do things the way you are showing me right now. The right way, you know?

Thank you Andrew.

Regarding the mobile issues, edit your Child Theme style.css file and replace the CSS I recommended above, with the code below:

@media screen and (min-width: 48em) {
    .single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
        height:1200px;
        height: 100vh;
        max-height: 100%;
        overflow: hidden;
        position: relative
    }

    .single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-branding {
        bottom: 0;
        color: white;
        display: block;
        left: 0;
        height: auto;
        padding-top: 0;
        position: absolute;
        width: 100%
    }
}

.single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .single-featured-image-header {
    display: none
}

.single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-branding {
    color: white
}

.single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
    display: table;
    height: 300px;
    height: 75vh;
    width: 100%;
}

And so at the end of this, I might even ask you how to style that title font; like, what are my choices of font,

I would recommend a Google Font plugin to change the font. The font is selected through the plugin’s interface and then some custom CSS is written in your Child Theme for it to be applied. We can help you write that custom CSS, but first here’s the plugin: https://www.ads-software.com/plugins/easy-google-fonts/

It is this style that refers to the title:

.single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-branding {
    color: white;
}

You can change the colour in that style already, or you can add new styles such as font-weight, font-size, etc. For example:

.single-format-standard.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-branding {
    color: white;
    font-size: 20px;
    font-weight: bold;
}

• This reply was modified 7 years, 5 months ago by Andrew Nevins.
• This reply was modified 7 years, 4 months ago by Andrew Nevins.
• This reply was modified 7 years, 4 months ago by Andrew Nevins.

Hi Andrew, I have been following along with this and it seems to be close.

On the desktop, I am getting the following error: Notice: Undefined variable: parent_style in /home/devacb/public_html/wp-content/themes/DEVTwentySeventeen/functions.php on line 13

The error flashes on the front page as it is loading, and then it disappears. And on the other pages and posts the error appears on the top of the page. Check it out:

https://dev.aquariumcarebasics.com/
https://dev.aquariumcarebasics.com/sitemap/
https://dev.aquariumcarebasics.com/sitemap/contact/
https://dev.aquariumcarebasics.com/blog/

What am I missing? Can you help me?

and here is the contents of my child functions.php

<?php /*

This file is part of a child theme called DEVTwentySeventeen.
Functions in this file will be loaded before the parent theme’s functions.
For more information, please read https://codex.www.ads-software.com/Child_Themes.

*/

// this code loads the parent’s stylesheet (leave it in place unless you know what you’re doing)

function theme_enqueue_styles() {
wp_enqueue_style(‘parent-style’, get_template_directory_uri() . ‘/style.css’);
wp_enqueue_style(‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array($parent_style));
}
add_action(‘wp_enqueue_scripts’, ‘theme_enqueue_styles’);

/* Add your own functions below this line.
======================================== */

@tvguy2000, Thanks for the feedback. In this case the issue you are facing isn’t a cause from the code I’ve given in this thread. The issue is that variable you’re using here, $parent_style isn’t defined (and doesn’t exist).
Let’s create a new thread to discuss that, as discussing it here would derail the thread.

Hi Andrew, I fixed my child theme error, so I am back on track. Thanks!

The featured images appear to work well on a desktop, but on a phone, the featured images are not full size, and they are in the default location. Any ideas?