Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Individual header image

Home Forums Support Individual header image

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #48992
    Maike

    Hi Tom,
    I’m absolutely a newbie in working with wordpress and GeneratePress!
    I hope you can help me… 🙂
    My problem is, I like to have on each page an individual header image, is this possible –
    I hope so! I can’t find a plugin which solves my problem.

    Thanks in advance!

    Greetings, Maike

    #49054
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Do you want it in the header area, where your logo is?

    If that’s the case, you’ll have to use hooks with some PHP conditionals.

    However, if you want the image to appear above the content/below the navigation, you can use Featured Images (http://en.support.wordpress.com/featured-images/) or our Page Header add-on.

    Let me know.

    #49061
    Maike

    Hi,
    thanks for your quick answer!

    I would like to have it in the area where the logo is.
    Can you give me an example?

    #49283
    Maike

    Hi Tom,
    today I’ve tried everything, but unfortunately I can’t find a solution for my header-problem…
    can you tell me, how I can use these hooks 🙂 I told you I’m a newbie 🙂

    #49318
    Tom
    Lead Developer
    Lead Developer

    Hi there – sorry for not getting back to you sooner!

    Ok, here we go.

    First, we need to remove the default header, so go to “Appearance > Customizer > Header Content”, hide the title and tagline, and remove the logo.

    Now, go to “Appearance > GP Hooks > Before Header Content”.

    This is where we will add our code.

    We’ll be using PHP conditionals, using the ones WordPress provides: http://codex.wordpress.org/Conditional_Tags

    If we want to specify a page, we would use these conditionals: http://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

    So, here’s some example code.

    <?php if ( is_page( 'about-page-slug' ) ) { ?>
          <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
    <?php } elseif ( is_page( 'another-page-slug' ) ) { ?>
          <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
    <?php } elseif ( is_page( 'one-more-example' ) ) { ?>
          <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
    <?php } else { ?>
          <img src="URL TO YOUR HEADER FOR ALL OTHER PAGES" alt="" />
    <?php } ?>

    So if we break down the code above..

    If is page: yoururl.com/about-page-slug, show image for this page.

    Else if is page: yoururl.com/another-page-slug, show this image

    Else if is page: yoururl.com/one-more-example, show this image

    Else if all other pages, show this image.

    Be sure to check “Execute PHP” inside the hook, and then save.

    Let me know if this makes sense or not 🙂

    #49535
    Maike

    Thank you so much! I’m happy….it works 🙂

    #49572
    Tom
    Lead Developer
    Lead Developer
    #51216
    Maike

    Hi Tom,
    I’m again-sorry… today I have changed my blog page from a simple page in a contribution page and now my problem is, that the header from the blog page isn’t displayed.
    When I click the button “last contributions” on the front page everything is ok. But when I click static page “home” and contribution page “blog” I see the header for all pages on my blog page -grrr 😉
    Do you have a solution?
    Thanks in advance!

    Maike

    #51223
    Tom
    Lead Developer
    Lead Developer

    Ah, that last line needs to change.

    Here’s the updated code:

    <?php if ( is_page( 'about-page-slug' ) ) { ?>
          <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
    <?php } elseif ( is_page( 'another-page-slug' ) ) { ?>
          <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
    <?php } elseif ( is_page( 'one-more-example' ) ) { ?>
          <img src="URL TO YOUR HEADER FOR THIS PAGE" alt="" />
    <?php } elseif ( is_page() ) { ?>
          <img src="URL TO YOUR HEADER FOR ALL OTHER PAGES" alt="" />
    <?php } ?>
    #51305
    Maike

    thanks for your help!! 🙂

    #98419
    ville

    Hi!

    Code works fine and I got individual header images but somehow for me it adds some space between header image and menu bar. Any solution for that?

    #98564
    Tom
    Lead Developer
    Lead Developer

    Can you link me to the page so I can check out the code?

    Thanks!

    #98715
    ville

    oh, sorry! forgot the address: http://www.jurassicrock.fi/site/

    “piknik” has different header image but both have that extra space. header widget don’t do the difference

    #98734
    Tom
    Lead Developer
    Lead Developer

    Aha – this CSS will work:

    .inside-header img {
        position: relative;
        vertical-align: bottom;
    }

    GeneratePress usually does this for you, but only when the header image is inside the .site-logo element.

    #98899
    ville

    Thanks! Worked out perfectly!!!

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