[Resolved] Add image/banner above Post Title

[Steve]

I’ve incorporated a special purpose site into my general site. The special purpose site had a special header (actually just a full width image) that I’d like to use just on the special category of posts. I can disable the header element on a sample post to not display the general site’s header. But I don’t know how to make the special purpose heading show above the post title. I figure there’s a way to do that between GPP and GB, but I’ve never done it and don’t have any successful experience with blocks. (Tried and failed to emulate some of Leo’s tutorial lessons.)

These are posts that were created in and I’m trying to edit with the classic editor. I’m not averse to converting each one (about 30 posts total, a manageable number for me – I’m retired) if someone could just explain how to add a block with the image/banner that would appear above each post title as a stand-in for a header.

Thanks in advance.

[Elvin]

Hi Steve,

Can you link us to a sample page w/ the post title where you want to place this special purpose heading?

So we can check its structure and figure out the appropriate hook and priority value you can use to put it in properly.

[Steve]

Elvin, here’s an example post: https://stevestockdale.com/cs-39-new-motto/

The blue background image just below the post title with the ring on it is what I’d like to display above the post title, similar to the look on this page: https://stevestockdale.com/spirit-of-76-attic.

Thanks!
Steve

[Elvin]

Ah I see now.

You can hook the image banner on generate_before_content so it appears before the title.

You can make the banner within a Hook element (if manually coded) or Block element (if done within block editor) and set the hook to the hook I’ve mentioned and set the display rule location to this example post or the taxonomy of the post you want the banner to display on. 😀

[Steve]

Elvin, thanks. I’m not quite competent enough with hooks and blocks to understand that. Could you either point me to a tutorial(s) that demonstrates a similar technique or give me a step-by-step for this one instance I could learn from?

(Following is related to my specific case that you’ve address, but an even more general question I have. Disregard if it is too general or not applicable at all.)

Part of what I’ve missed in not being active with WordPress for the past three years is the interplay between the core WordPress, the GP Premium, and GenerateBlocks Pro – in other words, I’m not clear on which feature or function resides within which capability. In this case, is what you’ve suggested with the hook or block something I can do within the capabilities of GeneratePress Premium and with the classic editor (i.e., editing what I used to create the page a couple of years ago), or if I need to convert the post page to blocks, then look in the GPP documentation for how to do what you suggested; or the GenerateBlocks (free or pro) documentation and feature sets?

Or any other remedial suggestion, short of hiring somebody? 😉

[David]

Hi there,

I notice on some of your posts you have a Featured Image which is set to display above the Post Title.eg.

https://stevestockdale.com/officers-pay-guide-1975/

If you:

1. Go to Dashboard > Appearance > GenaratePress and enable the Blog Module.
2. Go to Customizer > Layout > Blog –> Featured images, select the Posts tab and then set Location to Above Content Area:

https://www.screencast.com/t/hBRSpjULQx

This will move the Featured Image above the Title and the Sidebar giving you a similar layout to this page:

https://stevestockdale.com/spirit-of-76-attic/

Then you jsut need to edit your Posts, remove the Blue image from the Post content and add it to the Featured Image instead.

[Steve]

David, henceforth to be addressed as “Sir David the Magician”:

That worked! And I was so close … I had previously tried making the image/banner the Featured Image but I didn’t notice the change. And I had the Blog Layout set to “Above Title” … would not have considered “Above Content.”

The only edit to the underlying post was to delete the image from the post content, after I made it the Feature Image.

Now I need to go through the rest of the site and see what collateral damage I have to deal with. 😉

Thanks so much to you and Elvin. His replies got me thinking about the problem and reading some of the documentation about hooks. That’s what prompted the pitch for a “for dummies” solution and you hit it out of the park!

Resolved!

[David]

Really glad to hear that _ and thanks for the kind feedback 🙂

[Author]

Posts