[Resolved] Displaying the author avatar on top of the post modifying this code

[eduard sans]

Hi! I would like to know how to display the author avatar on top of the post adding it to the code below which allows to print the last update of the post.

if ( ! function_exists( 'generate_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 */
function generate_posted_on() 
{	
	$date = apply_filters( 'generate_post_date', true );
	$author = apply_filters( 'generate_post_author', true );
		
	//$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) )
		$time_string .= 'Actualizado el <time class="updated" style="display: inline-block;" datetime="%3$s" itemprop="dateModified">%4$s</time>';

	$time_string = sprintf( $time_string,
		esc_attr( get_the_date( 'c' ) ),
		esc_html( get_the_date() ),
		esc_attr( get_the_modified_date( 'c' ) ),
		esc_html( get_the_modified_date() )
	);
	
	// If our date is enabled, show it
	if ( $date ) :
		printf( '<span class="posted-on">%1$s</span>',
			sprintf( '<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>',
				esc_url( get_permalink() ),
				esc_attr( get_the_time() ),
				$time_string
			)
		);
	endif;
	
	// If our author is enabled, show it
	if ( $author ) :
		printf( ' <span class="byline">%1$s</span>',
			sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <a class="url fn n" href="%2$s" title="%3$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%4$s</span></a></span>',
				__( 'by','generatepress'),
				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() )
			)
		);
	endif;
	
}
endif;

[Tom]

Hi there,

Instead of using PHP to display the updated date, I would do this: https://docs.generatepress.com/article/show-the-updated-post-date/

Then, to display the gravatar next to the author, I would do this:

add_filter( 'generate_post_author_output', function( $output ) {
	$avatar = get_avatar( get_the_author_meta( 'ID' ) );

	echo '<span class="author-avatar">' . $avatar . '</span>';
	echo $output;
} );

With this CSS:

.author-avatar img {
    width: 20px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
}

[eduard sans]

amazing help as always Tom! thanks!

[Tom]

You’re welcome 🙂

[Praveen]

Hi, How do we disable the author link when we used image + upodated. date.

I am trying to remove it here – https://welderpick.com/miller-multimatic-220-review/

I was using this code before I enabled the image and it was working. But not anymore.

add_filter( 'generate_post_author_output','tu_no_author_link' );
function tu_no_author_link() {
	printf( ' <span class="byline">%1$s</span>',
		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <span class="fn n author-name" itemprop="name">%4$s</span></span>',
			__( 'by','generatepress'),
			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() )
		)
	);
}

[Tom]

Hi there,

Try this code for the image, instead:

add_action( 'generate_inside_post_meta_item_output', function( $output, $item ) {
    if ( 'author' === $item ) {
        $avatar = get_avatar( get_the_author_meta( 'ID' ) );

	$output = '<span class="author-avatar">' . $avatar . '</span>';
    }

    return $output;
}, 10, 2 );

[Praveen]

Hi, i did this and image has altogether disappeared.

[Tom]

Try this instead of both functions:

add_filter( 'generate_post_author_output', function() {
    $avatar = get_avatar( get_the_author_meta( 'ID' ) );

    printf( '<span class="author-avatar">%s</span>', $avatar );

    printf( ' <span class="byline">%1$s</span>',
        sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <span class="fn n author-name" itemprop="name">%4$s</span></span>',
            __( 'by','generatepress'),
            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() )
        ) 
    );
} );

[Praveen]

Thanks, I removed all other codes, but now two dates are being displayed. – https://welderpick.com/miller-multimatic-220-review/ I just want the one with Last Updated one to be displayed.

[Tom]

Try adding this CSS:

.posted-on .updated + .entry-date {
    display: none;
}

[Author]

Posts