Featured Image full width under navbar

Resolved scolol
(@scolol)

6 years, 3 months ago
Hello,

It will be simple question but can I do that with GeneratePress ?

[ redundant link removed ]

Full width image under navbar. I don’t care about the little effect of the image, I just want the featured image full width with the title on it.

Is that possible ?

Thanks a lot !
- This topic was modified 6 years, 3 months ago by Jan Dembowski.
The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Theme Author Tom
(@edge22)

6 years, 3 months ago

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 🙂

Thread Starter scolol
(@scolol)

6 years, 3 months ago

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.

Theme Author Tom
(@edge22)

6 years, 3 months ago

It’s possible, but not easy.

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

Thread Starter scolol
(@scolol)

6 years, 3 months ago

Hello Tom,

Only blog Posts.

Thanks 🙂

Moderator Jan Dembowski
(@jdembowski)

Forum Moderator and Brute Squad

6 years, 3 months ago

@hector1000 Why did you report this topic?
Theme Author Tom
(@edge22)

6 years, 3 months ago
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.
Thread Starter scolol
(@scolol)

6 years, 3 months ago
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 6 years, 3 months ago by scolol.
- This reply was modified 6 years, 3 months ago by scolol.
- This reply was modified 6 years, 3 months ago by scolol.
- This reply was modified 6 years, 3 months ago by scolol.
- This reply was modified 6 years, 3 months ago by scolol.
Theme Author Tom
(@edge22)

6 years, 3 months ago
Try adding this CSS:
```
.single-post-hero {
    padding: 10% 40px;
    color: #fff;
    text-align: center;
}

.page-header-image-single {
    display: none;
}
```
Thread Starter scolol
(@scolol)

6 years, 3 months ago

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

Theme Author Tom
(@edge22)

6 years, 3 months ago

You’re welcome 🙂

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Featured Image full width under navbar’ is closed to new replies.