Support » Theme: Twenty Seventeen » Use featured image as header on posts & pages with title overlay

  • Hello, I use a Twenty Seventeen child theme on http://chronicle.su

    I would like to move my post featured images into the header area, and move the post title from its standard position to instead appear over the image (so it organically looks like an image macro), making each unique post look like the frontpage of theintercept.com, a site we satirize.

    I would like to preserve the frontpage header, though. It should always be the same image uploaded through the Customize – Header menu.

    The only similar solution in this forum, linked below, deletes the header from the frontpage, so it’s not a perfect solution and doesn’t address my title need.
    https://wordpress.org/support/topic/featured-header-in-twenty-seventeen/

    Can anyone offer me some guidance as to where to modify the code? I can imagine it’s an easy solution, like moving snippets around and using a couple of ‘if’ codes.

    • This topic was modified 2 years, 5 months ago by wordpriss. Reason: grammar
Viewing 15 replies - 1 through 15 (of 22 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Haz

    (@tvguy2000)

    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!)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 2 years, 4 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…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    • This reply was modified 2 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.

    http://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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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://wordpress.org/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;
    }
    
    Haz

    (@tvguy2000)

    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:

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

    What am I missing? Can you help me?

    Haz

    (@tvguy2000)

    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.wordpress.org/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.
    ======================================== */

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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.

    Haz

    (@tvguy2000)

    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?

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Use featured image as header on posts & pages with title overlay’ is closed to new replies.