How To Centre Post Title, Name & Date Plus Show Gravatar Image?

Hi there,

can you share a link to your site so i can see the current layout?

Hi David

https://colinlinnett.com/how-to-get-more-traffic-from-a-single-article-even-if-you-cant-write/

I would like the date and by author name to be centred under the title and ideally (If Possible) displaying my gravatar image

Thanks

So first off you will need to add this PHP Snippet to your site:

add_filter( 'generate_post_author_output', function() {
    return sprintf( ' <span class="byline"> by %1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a>%4$s</span>',
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() ),
            get_avatar( get_the_author_meta( 'ID' ) )
        )
    );
} );

This article explains how to add PHP:

https://docs.generatepress.com/article/adding-php/

Then add this CSS to make the Avatar image round, and for the meta to be centered.

.entry-header .entry-meta {
    text-align: center;
}
.entry-meta img.avatar {
    width: 30px;
    border-radius: 50%;
    vertical-align: bottom;
    margin-left: 10px;
}

Hi David

It hasn't quite worked.

I would like the image to be after the name or even above it, but all of it centered like the title.

KInd regards

Colin

I updated both the PHP Snippet and CSS here:

https://generatepress.com/forums/topic/how-to-centre-post-title-name-date-plus-show-gravatar-image/#post-1571384

This will place the avatar after the byline and center the meta.

Hi David

I have managed to center the meta details but I had to disable the avatars. I want the avatar to be my gravatar but it's not super important to me so I can leave as it is.

I changed the css to:

h1.entry-title, h2.entry-title {
text-align: center;
}
.entry-meta {
text-align: center;

Does that look ok?

Everything seems to be ok

Kind regards

Colin

ok Ill try again.

I posted the last reply before reading your reply.

Thanks David

You're welcome