[Support request] Blog Post Layout/Template With Overlayed Author over Featured Image

[culpable]

Hi,

I’ve been playing around with hooks/layout but I’m really struggling to get a particular type of aesthetic.

Could you please help me to set up my GP blog akin to the format shown here: https://imgur.com/ZfuXtsY (“blog post layout”). Taken from https://detailed.com/affiliate-serps/).

I’m struggling to find a similar format/template that will allow me to have this layout for blog posts.

I would also love some help in setting up the navigation bar similar to what is shown here: https://imgur.com/ZfuXtsY (“Nav bar layout”).

Thank you very much for your guidance, it is very much appreciated.

[David]

Hi there,

this example will get you halfway there:

https://docs.generatepress.com/article/page-hero-examples/#example-2

To add the comments link you would need a shortcode which can be created with this PHP snippet:

add_shortcode( 'comment_number', function() {
    ob_start();
        comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
    return ob_get_clean();
} );

Then you can add [comment_number] to the hero

Let us know if you get stuck 🙂

[culpable]

Thanks David.

I got somewhere with what you sent me, but I’m still a little stuck.

Is there a way for me to have the featured image “under” the navigation bar, with a max-width? Similar to https://detailed.com/affiliate-serps/

Or if that’s not possible, to have the navbar under the featured image like this https://www.authorityhacker.com/how-to-sell-your-business/ (similar but no max-width constraint).

Thank you very much for your help 🙂

[David]

Option 1 edit your Header Element:
In the Element classes field add: contained-hero
Go to the site Header Tab and uncheck merge site header with content.

Then add this CSS to your site:

.contained-hero {
    max-width: 1080px;
    margin: 20px auto;
}

[culpable]

Your code is perfect David.

I also just want to say that just coming from lackluster support from other WordPress-related plugins & services – the support I’ve received from GeneratePress has been OUTSTANDING. You guys are doing amazing work.

One thing that’s really making me scratch my head is this little “jiggle” that’s occurring between the home page and any “post”. I’ve highlighted these pages in the private information section.

You can see when you swap tabs from one page to another, that the logo is jiggling (i.e. it’s not in the same position).

The max-width property is the same, so I’m not sure why this is occurring.

Related note: is there a way to set the .inside-nagivation max-width property within GP? Right now I’m using some custom CSS.

Thank you for your help David!

[David]

Awesome – thanks for the great feedback – much appreciated.

Main ‘jiggling’ i notice is the Lazy Loader mostly affecting the avatar image.
Looks like you’re using A3 lazy loaded – within it settings you can exclude images by CSS Class. Try excluding avatar and header-image

Navigation inner width requires CSS today.

[culpable]

Thank you David! I deactivated the plugin altogether, but it didn’t seem to fix the issue.

That said I think I didn’t properly communicate what my issue is.

The “jiggling” isn’t occurring when the page itself is loading.

It’s occurring because the position of the logo on WordPress “pages” is slightly different from the position of the logo on WordPress “posts”. But I can’t seem to figure out why that is. If you look at the two links I’ve attached, you can see the logo is in a slightly different position between the two pages (which results in a “jiggle” when you’re on one page and then load the other. It’s obvious when having the URLs opened in separate tabs and swapping between them).

The max-width property is the same, so I’m a little confused as to why this is happening. Thank you for your help David!

[David]

I am not seeing any difference in the positioning or size of containers:

Is this on any particular device or browser ? Maybe browser cache needs clearing ?

[culpable]

I woke up this morning and noticed that they are now aligned… I literally thought “Oh, David must have fixed it!” before coming to my senses…

HAHA no idea what happened, but thank you for your help David. Legend!

p.s. could you please delete the screenshot above? Thank you sir <3

[David]

Glad to hear that! Screenshot deleted

[Author]

Posts