Site logo

Archived topic

Styling gravitar / date / author

7 replies · Started by Kevin Wabiszewski on February 23, 2019

Viewing posts 1–8 of 8

Hey I know this is out of the scope of GP support but I was wondering if you could help me style the author gravitar / date / author name on a GP page like this https://www.betterhomeguides.com/appliances/most-energy-efficient-space-heaters-review/

Similar to what you see on another website of mine below.

https://www.marineapproved.com/best-hiking-gps-review/

I am going to transfer all of my sites to GP Premium so I want to get this set up before I swap the sites with a lot of content.

The author box doesn't have to be circle and it doesn't have to look exactly like the other site but as long as it looks organized.

I'm happy to pay you all an additional fee if needed.

Thanks in advance

Hi Leo, I think the second one looks really good. My only problem with it is that if we show the authors first and lasts name it will take up two lines on a phone. I was hoping to come up with a solution that takes up a little less space.

Hi Tom and Leo! Thanks so much for your help. I just added the new function :)

Hi there,

sorry another change so we can get rid of the 'by' - use this function:

add_filter( 'generate_post_author', '__return_false' );
add_filter( 'generate_post_date_output', function( $date ) {
    printf( 
        '<span class="meta-gravatar">%s</span>',
        get_avatar( get_the_author_meta( 'ID' ) )
    );

    echo '<span class="meta-data">';

    printf( ' <span class="byline">%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></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() )
        )
    );

    echo $date;

    echo '</span>';
} );

And this CSS:

.single-post .entry-meta, .single-post .entry-meta .meta-data {
    display: flex;
}
.single-post .entry-meta .meta-data {
	flex-direction: column;
    margin-left: 0.75em;
}
.single-post .entry-meta .meta-gravatar img {
    width: 40px;
    border-radius: 50%;
}
.single .byline {
    font-weight: 700;
}
.single-post .entry-meta .meta-data .posted-on {
    font-size: 0.8em;
}

Thank you so much everyone. You guys have the best support by far!

Glad we could all be of help :)

This archived topic is closed to new replies.