Community Forums › Forums › Archived Forums › General Discussion › How to display author photo next to the post on the homepage
Tagged: author avatar
- This topic has 11 replies, 3 voices, and was last updated 8 years, 1 month ago by riseUp.
-
AuthorPosts
-
February 20, 2016 at 9:16 pm #179518riseUpMember
Hello!
I would like to display the submitter's author photo and profile info on the left of the actual post.
Here is the use case:
1. User submits a new post (I am using a plugin that enables users to submit a new post via the front end).
2. User is able to view homepage where he/she can view the post including his/her author photo and other related profile info.In other words, I would like users to see that a user posted something on the homepage and the author picture and profile info is viewed adjacent to it.
Let me try to "draw it out" here just to be clear. Go to http://www.ymphony.com and notice that I have a sample post called "This is a test post." Then, I have some jibberish paragraphs underneath the title.
To the left of the title and paragraph, I want to display the author's picture and any related profile information.
Please advise? Thanks.
http://www.ymphony.comFebruary 21, 2016 at 6:40 am #179540Brad DaltonParticipantYou want to display the author avatar image inline with the entry title on the home page archive?
February 21, 2016 at 7:49 am #179547riseUpMemberThat's correct. So that random users are able to view the face and possibly other profile info adjacent to the title/paragraph area.
So, yes.
February 22, 2016 at 3:57 pm #179652riseUpMemberHello. Can somebody assist me on this please? Thanks.
February 22, 2016 at 6:02 pm #179659carasmoParticipantIf you search for 'Add author gravatar entry header genesis' in google: http://briangardner.com/display-author-gravatar/
Then read the docs my.studiopress.com docs on the entry hooks.
February 22, 2016 at 6:12 pm #179660carasmoParticipantYou can use conditional statements to show this. Here's an example from no-sidebar pro
//* Add author gravatar before post meta add_action( 'genesis_entry_header', 'ns_entry_gravatar' , 11 ); function ns_entry_gravatar() { if ( ! is_page() ) { // not a page, but everywhere else --- see https://codex.wordpress.org/Conditional_Tags echo get_avatar( get_the_author_meta( 'email' ), 96 ); } }
February 22, 2016 at 10:00 pm #179684riseUpMemberHello.
When I follow the directions, I am only able to see the avatar. I am unable to click on the avatar to take me to the profile page.
When you replied, notice how your profile picture and name is displayed next to the comment you submitted to me on this very thread. Users are able to click on your fact picture and your name...which directs the user to your profile page.
This is exactly how I want to be shown on my site...on the homepage for each post.
Can you assist? Thank you!
February 24, 2016 at 5:41 am #179784riseUpMemberHello.
Anybody able to help me with this situation? Still trying to figure out how to display profile picture and name (both links to the profile page) next to the post just like how you see it in this email thread - picture, name, and comment side by side. Thank you!
February 29, 2016 at 10:50 pm #180306riseUpMemberHello!
Ok - I am one step closer...but need a little more assistance. Few things:
1. The avatar only shows when I click on the specific post. How is it possible to display the avatar for each post on the homepage? I'd like the avatar to show on the homepage for each post, too.
2. How do I make the avatar link to the poster's profile page?
3. Is there a way to also have the poster's name right below the avatar....and have the poster's name link to his/her profile too?
Thanks!
February 29, 2016 at 10:57 pm #180307riseUpMemberAnd 4) How do I center the profile picture to be middle rather than left justified? Thank you!
March 4, 2016 at 7:55 pm #180677riseUpMemberI was able to figure out how to do this. Thank you all for your help!
.entry-header .avatar {
border: 5px solid #f5f5f5;
border-radius: 50%;
float: none;
height: 120px;
margin-bottom: 20px;
text-align: center;
width: 120px;
display: block; /* This line and the next 2 lines allow the avatar picture to be centered for each post */
margin-left: auto;
margin-right: auto
}March 4, 2016 at 8:02 pm #180681riseUpMemberResolved. Thank you!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.