[Resolved] Feature Request: show page hero without BG image only

[ideawrights]

Picking up on this question and the solution being to add a comment in order to get the page hero to show if you only want to have a background image.
https://generatepress.com/forums/topic/displaying-header-image-without-text/

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 even better a hook (generate_hero_add_after_content, generate_hero_add_before_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.

Thanks for considering this for future releases!

[Elvin]

Hi,

This isn’t exactly needed to be honest.

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

While this is true, adding an empty <div></div> should already address the matter.

As for “force a default height”, you can either make the <div> you’ve added be the height spacer by adding styles to it.

Example: <div style="min-height:300px"></div>

Alternatively, Adding a padding top+bottom to the Header Element UI, can also serve as your “forced height”.

[ideawrights]

Yes, of course, once the element is on the page, there are 25 ways to force the height. That was poorly stated.

My point is that <div class="page-hero"> is entirely missing, so there is no element to target to allow me to force a height as I would if the element were there, but zero height because of the lack of content.

The HTML here is minimal. It is literally 98 bytes of minified HTML. In absence of content and any CSS rule, it defaults to zero height, has no impact on the layout in every case I’ve seen and almost no impact on page load, even on a slow connection. It may take a bit more page generation time, but I’m guessing that by the time you determine the content is empty and won’t generate the header, that’s probably already half the battle (I’m guessing you’ve done all your queries at that point, for example).

So why not just add the

<div class="page-hero">
  <div class="inside-page-hero grid-container grid-parent">
  </div>
</div>

Let it default to zero, but then at least it exists so it can be targeted and you can force it to have a minimum height.

[Elvin]

I completely understand your point.

But for now, if it must be addressed immediately on your site, the workaround from my previous reply should work. empty <div> will make the .page-hero render.

We will consider your request. 🙂

[ideawrights]

Thanks Elvin. It is addressed on my site. That’s why I labelled this a Feature Request. I was simply asking the GP team to consider this in a future release.

I was just thinking this would be a tiny improvement in GP for people who want to hand off a site to content creators who may never have created an HTML comment in their lives (as per Tom’s suggestion of how to trigger this to show).

[Tom]

This was a tough decision to make during development. The reason we opted not to include an empty hero element was to prevent people from mistakenly adding empty page heroes to their pages.

As we transition towards Block Elements (way more powerful for page heroes), this should become less of an issue 🙂

[ideawrights]

So then going forward, the better way is to use the Block Elements?

I have honestly not looked into those at all.

[Tom]

If you use Block Elements along with our GenerateBlocks plugin, you can build full heroes visually in the block editor 🙂

[ideawrights]

Oh, I will have to check that out! Sounds great and much better than being able to hook into the Page Hero module and force adding content or something.

The lack of a visual editor in the Header module means that only certain types of users can handle it.

[Tom]

Exactly, that’s where Block Elements + GenerateBlocks really shines. It’s all visual and very powerful 🙂

[Author]

Posts