[Support request] Displaying Header Image without text

[Viktor]

I am new to GP.

I created the Element as a Header type. I selected a custom image as a background. Everything looks OK if I add some text.

But, I can not figure out how to display background header image at full size without text. Without text, the HEADEr does not show at all.

https://www.staging.phototraces.com/deconstructing-photo/hiking-in-kodachrome-utah/

Thanks

[David]

Hi there,

try adding an empty span tag in the Hero content e.g <span></span>

I’ll pass this onto Tom as i cannot see the warning that used to appear on Page Headers when the content was empty….

[Viktor]

sure adding <span></span> does work, but then I have to specify exact Padding for each image to display it at full size.

[David]

Hi there,

that is correct as the image is set as a CSS background image with the size set to cover, so you need to define the padding required to display more of the image.

Your alternative would be to add the image in the content using an image tag which would then be displayed at the actual size without padding.

[Viktor]

got it
thanks

[David]

You’re welcome.

[Tom]

I prefer an empty HTML comment to an empty span, seems cleaner: <!-- Page Hero -->

[ideawrights]

I understand the logic here, but one of the useful things about the page header module is that it allows people with fairly limited skills to upload an image, add some text and then have a nice header. But if they don’t want text in the header, they’re left scratching their heads. Why isn’t my header showing?

As it stands now, without content, it won’t generate any HTML at all, so you can’t force a default height.

It would be nice if there were either a flag (“Always show header”) or a hook (generate_hero_add_after_content) so then as a site builder, you could make this automatic for an end user and not have to instruct them to add an HTML comment in order to get this to work.

[Leo]

Can you open a new topic for your question?

This topic is from 2018 which is quite old.

Thanks!

[Author]

Posts