[Resolved] Add author photo for each post in blog home

[Clément]

Hello, how can I edit the blog home template to add the author photo in each post just like on this page https://blog.intercom.com/

Thanks,

[Leo]

Hi there,

This might help: http://www.wpbeginner.com/plugins/how-to-add-an-authors-photo-in-wordpress/

[Clément]

Thanks Leo but that not what I want 🙂 I knwo how to add a photo but i want the photo on the meta in blog home page

Just like you can see in the bottom of blog post card in home blog page of intercom
https://blog.intercom.com/

I think I have some code to add in content.php but I don’t know wich code and I don’t know if content.php is the right file.

Thanks,
Clément

[Leo]

What code are you adding?

[Clément]

I have add nothing for the moment because I don’t know what to add.

Take that page, http://demo.generatepress.com/ get the .entry-meta then the .author .vcard and finally the .author-name

I want to add just in the right of the author name his avatar.
I think I have a code like “<?php echo get_avatar( $id” to add in blog template (I mean the blog home not blog single post)
And I dont knwo where to add it in wich file.

I don’t know if I’m clear :/

[Tom]

Are you wanting it to be at the bottom of the post as well, or at the top just with the gravatar?

[Clément]

One the top 🙂

[Tom]

Something like this would add it in:

add_filter( 'generate_post_author_output', 'tu_add_author_gravatar' );
function tu_add_author_gravatar() {
	printf( ' <span class="byline">%1$s</span>',
		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s %5$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() ),
			get_avatar( get_the_author_meta( 'ID' ) )
		)
	);
}

Then you would have to style the image with the available CSS classes.

Let me know if you need more info 🙂

[Clément]

It’s ok thanks ! 🙂

[Tom]

You’re welcome 🙂

[gedosan]

New to GP and loving this forum!

So I got the above working, but with limited CSS skills the author pic sits in between ‘by’ and ‘author’.

so looks like this…

by IMAGE author

Any way to make the ‘by’ shift to the right so the image is first? Or have the ‘by author’ sit below the IMAGE?

Cheers

[gedosan]

Don’t worry, figured it out…

added to the pic:

float: left;
margin: 0px 15px 20px 0px;

How about making the pic round? Can we do that in CSS too – or better to make the actual image round? (using gravitar)

Cheers

[gedosan]

Apols, need to do more research before I go asking!

It’s border-radius: 50%;

Cheers!

[Leo]

Glad you god them all 🙂

[gedosan]

Actually there is one little thing: So I have the author name to the right of the pic now, and would like to move it down so its in line with the bottom of the pic. I can’t seem to target the author name class though to do it.

Cheers

[Author]

Posts