[Support request] Custom Page Headers: Featured Image + Background

[Matt Stern]

Hi Tom and Leo,

I’m trying to create a certain layout on pages (not posts) where both the featured image and either another background image or an extended header is behind.

That’s probably a bad explanation so here’s a mockup image:

Mockup Image

The header gradient extends down the page and the featured image/main content box overlaps it.

Is there some way to create this? My attempts so far have not been fruitful.

Thanks for your support,

Matt

[Leo]

Hi Matt,

I checked the “Anti-marketing: How slick is too slick for WooCommerce?” page looks like you are really close there?

If the only thing needed is to have featured image with page header?

If so you will need this snippet: https://generatepress.com/forums/topic/feature-image-when-using-page-header/#post-382133

Let me know if this helps.

[Matt Stern]

Hi Leo,

I tried adding this code:

add_action( ‘generate_before_content’, ‘tu_add_featured_image’ );
function tu_add_featured_image() {
if ( is_singular( ‘post’ ) && has_post_thumbnail() ) {
the_post_thumbnail();
}
}

To this page

As you can see, no luck. This is all new to me so excuse my lack of knowledge. Where should this code be added? And I’d like to add this layout to pages only, not posts, so is the code still appropriate?

Last, I could also create the large purple gradient by extending the bottom padding of the header. Could I overlay the featured image over that, instead of using a page header?

Thanks for your help,

Matt

[Leo]

Sorry did you remove the mock up image?

Just want to have another look and confirm with Tom what the best method is.

Thanks!

[Matt Stern]

Oh, sorry about that. There are two of us working on the site and it must have been removed for some reason.

It’s back now: http://mobilefirstwoo.com/mockup/

[Tom]

I wonder if it would be better to do this:

1. Add an element into the Before Header hook in GP Hooks:

<?php if ( is_page() ) : ?>
    <div class="page-background"></div>
<?php endif; ?>

2. Add this CSS:

.page .page-background {
    background-image: url(URL TO YOUR IMAGE);
    background-size: 100% auto;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

Then you should be able to ditch the Page Header and use a regular featured image.

[Author]

Posts