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

Home Forums Support Blog Post Layout/Template With Overlayed Author over Featured Image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1340927
    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.

    #1341664
    David
    Staff
    Customer Support

    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 🙂

    #1350083
    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 🙂

    #1350409
    David
    Staff
    Customer Support

    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;
    }
    #1454657
    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!

    #1454925
    David
    Staff
    Customer Support

    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.

    #1456319
    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!

    #1456522
    David
    Staff
    Customer Support

    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 ?

    #1457784
    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

    #1458039
    David
    Staff
    Customer Support

    Glad to hear that! Screenshot deleted

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.