[Resolved] Post title and meta above sidebar

[Leo]

Hmm sorry I’m not sure why that would be.

Could we try using the header element solution to keep things simple?

Here is what I did.

– Add this PHP function to create a shortcode for author image:

function lh_page_hero_gravatar() {
    ob_start();
    global $post;
    $author_id = $post->post_author;
    ?>
    <div class="page-hero-gravatar">
        <?php echo get_avatar( $author_id ); ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'page_hero_gravatar', 'lh_page_hero_gravatar' );

– Add this as the page hero content:

<h1>{{post_title}}</h1>
<div class="entry-meta entry-meta-container">
    <div class="entry-meta-gravatar">
        [page_hero_gravatar]
    </div>

    <div class="entry-meta-info">
        <div class="entry-meta-author">
            {{post_author}}
        </div>

        <div class="entry-meta-date">
            {{post_date}}
        </div>
     </div>
</div>

– CSS should be the same here:
https://docs.generatepress.com/article/entry-meta-style/#example-2

– Result: https://www.screencast.com/t/WQ5LQ4pppL

If that fixes the gravatar issue, then we can tweak the rest with some CSS.

[George]

No, it works perfectly as it is!

I put the CSS in, the only thing I can’t seem to fix is this small gap at the top of the featured image when inspecting the content-area class. Basically, I am trying to line up the featured image top with the right sidebar top but there is this tiny top gap. Can you see it?

[Leo]

Try this CSS:

.post-image-below-header.post-image-aligned-center .inside-article .featured-image {
    margin-top: 0;
}

It’s there by default to separate the title (which we moved) and the featured image.

[George]

It doesn’t work, the problem is in the content-area class but I can’t see any CSS value that affects it. Very strange. I already have zeroed the margins for the featured image.

I can live with that, though, it’s just very strange.

[Leo]

My CSS should work – I’m not seeing it being added currently.

When I added it using the browser inspector tool, this is the result:
https://www.screencast.com/t/wm5iKQ7ZrDD

[George]

Ok, must be my browser.

Thanks, Leo, appreciate it!

[Leo]

No problem 🙂

[Author]

Posts