Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

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

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

Home Forums Support Custom Page Headers: Featured Image + Background

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #545962
    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

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #546407
    Leo
    Staff
    Customer Support

    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.

    #546865
    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

    #546923
    Leo
    Staff
    Customer Support

    Sorry did you remove the mock up image?

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

    Thanks!

    #547506
    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/

    #547948
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.