Featured Image full width under navbar

Hi there,

Are you wanting to do this with a static image, or do you want it as a background image with text on top?

A static image is easy if you can link me to your site with a featured image.

As a background image with text on top is more complex, but our Elements module in our pro version has this ability. Otherwise, it would take some custom PHP/HTML/CSS.

Let me know ??

Hello,

Thanks for your quick reply ! ??

I think a background image with text on it is better because it’s easier to change the title if necessary. Is that possible to do with custom php/html/css ?

I have code snippet already install on my blog.

Here is an article example : https://breath-now.com/les-purificateurs-dair-et-les-poils-d-animaux/

Thank you.

It’s possible, but not easy.

Are you wanting it on one page only? All pages? Blog posts?

Hello Tom,

Only blog Posts.

Thanks ??

@hector1000 Why did you report this topic?

You could try this:

add_filter( 'generate_show_title', function( $show ) {
    if ( is_single() ) {
        return false;
    }

    return $show;
} );

add_action( 'generate_after_header', function() {
    if ( ! is_single() ) {
        return;
    }

    $featured_image_url = get_the_post_thumbnail_url( get_the_ID() );
    $style = '';

    if ( $featured_image_url ) {
        $style = 'style="background-image: url(' . $featured_image_url . ');"';
    } 
    ?>
        <div class="single-post-hero" <?php echo $style; ?>>
            <h1><?php the_title(); ?></h1>
        </div>
    <?php
} );

It’s basic, but it should be enough to get started.

Hi Tom,

It’s a good start, thanks !

Here is the changes I would like :

– White title only on the image
– centered title
– more length on the image (it’s small right now)
– and also makes the original featured image dispears since we will display it on top

You can see what your code is doing right now here : https://breath-now.com/les-purificateurs-dair-et-les-poils-d-animaux/

There is no trafic atm, the building of the website is in process so I’m ok doing some test live.

I appeciate your support. Thank you.

• This reply was modified 4 years, 9 months ago by scolol.
• This reply was modified 4 years, 9 months ago by scolol.
• This reply was modified 4 years, 9 months ago by scolol.
• This reply was modified 4 years, 9 months ago by scolol.
• This reply was modified 4 years, 9 months ago by scolol.

Try adding this CSS:

.single-post-hero {
    padding: 10% 40px;
    color: #fff;
    text-align: center;
}

.page-header-image-single {
    display: none;
}

Perfect Tom, it works like a charm ! Thank you a lot ! ??

You’re welcome ??