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

[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

[Tom]

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 🙂

[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?

[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?

[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!

[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!

[Tom]

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

[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>

[Author]

Posts