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

[Support request] Page headers: include image as image rather than background image?

Home Forums Support Page headers: include image as image rather than background image?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #409444
    Katie Jones

    Hi,

    I’m trying to accomplish a design that I think (maybe I’m wrong?) won’t work with the page headers functionality unless the background image is included as an HTML image rather than applied background image in css.

    So, first question – is there a simple enough way to modify GP to include the image this way instead, so we can still use page headers? Ideally, drop the image in first, then page header content, and disable the page header background (can do that part in CSS)?

    Second question, in case I’m wrong and we can still use a background image somehow: what we’re wanting is for the image to show up so that that the full image shows (height and width) so that the width is stretched 100% across the screen. Then, the text will be positioned on top of that on desktop, and below that on mobile.

    I think I can currently accomplish what we need with sections & extra HTML, though I’d love to be able to use page headers for the global locations.

    Thoughts on either tactic?

    Thanks,
    Katie

    GeneratePress 1.4
    GP Premium 1.4.3
    #409612
    Tom
    Lead Developer
    Lead Developer

    You can include an image in the content of the page header.

    If it’s a global page header, just use a custom field to include the different URL on each page: https://docs.generatepress.com/article/page-header-template-tags/#custom_field-name

    Let me know if you need more info, or if I’m misunderstanding something 🙂

    #409894
    Katie Jones

    Hey Tom,

    I got what I wanted working on this page here: http://otteroo.staging.wpengine.com/learn/. This is the closest I’ve gotten:

    I dropped the following code into a regular section:

    <img class="aligncenter size-full wp-image-3429" src="http://otteroo.staging.wpengine.com/wp-content/uploads/2017/10/Meet-Lumi.png" alt="" width="2500" height="835" />
    <div class="banner-content">
    <div class="grid-container grid-parent generate-sections-inside-container">
    <h1>Meet Lumi</h1>
    Babies can now make the connection between how their movements feel and look under water with our transparent ClearView design!
    
    <a class="button" href="https://vimeo.com/76660121" rel="lightbox">Watch</a>
    </div>
    </div>

    It needs the banner-content div to know what the content is, and the grid-container to contain it. I think if I put this back in a page header, the color styles will work, though all the positioning styles won’t, since they apply to what’s containing all this code. Any ideas?

    #410193
    Katie Jones

    A related question: is there an easy way to add a body class if a view is using a page header, for global views as well?

    #410202
    Katie Jones

    I may not need that last part. I think what I’m doing here may be too custom to be relevant to this forum & I have a workaround, so maybe this thread should be closed? Thanks for your help!

    #410203
    Katie Jones

    Well, by a workaround I mean doing our own headers. I would still LOVE to be able to use GP’s page headers & global headers, otherwise I’m probably going to basically be re-implementing this, so very much open to ideas! Maybe I’m missing something obvious? Or close it? Let me know. 🙂 Thanks!

    #410220
    Tom
    Lead Developer
    Lead Developer

    What happens when you drop that code into a Page Header? It should work the same.

    #410231
    Paul

    I might have completely misunderstood this, but if you was able to add a custom class or id to a page header, would that allow you to achieve your desired result?

    Only asking, because I’d like to have that ability 🙂

    <edit>It does feel like you should be able to achieve what you want using Page Headers as they are now, just not sure what the issue is preventing that.</edit>

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

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