Small Author Image just before the author name after the TITLE of the post.

Hi awesome TagDiv team,
I remember that before purchasing this theme from Themeforest, I had asked few queries about small customization support that I may need from you guys for my website tomatoheart.com . Of course I won’t ask for complex customization.

Have a look at this snapshot:

This is one of the customisations that I had done on my previous MyThemeShop theme with the help of their amazing support team but since the theme changed, I don’t know if the same code will work here or not. So, I need your help.

Previously we had done this:

`Edited single.php and replaced

<i class="fa fa-user"></i>

with

32 ) ) ); ?>">

Here in our theme, perhaps we need to edit loop-single.php files as we did while adding Facebook comment codes.
But what codes do we need to add. Please help me to get this done.

Thank you 🙂

• This topic was modified 9 years by Nano.
• This topic was modified 9 years by Nano.
• This topic was modified 9 years by Nano.

I am unable to add replacement codes. I tried many times but unable to post it here. So pasting it here: http://pastebin.com/HhcME3hb

Hey, I followed your instructions and finally used following codes after doing proper adjustments.

.avatar-42{
float:left;width:42px;height:42px;border-radius:42px;margin:-12px 8px 3px 0;
}

And now it’s appearing really great. Have a look on my website 🙂

Thank you very very much 🙂 🙂

Regards.

Though while updating these codes in each loop-single.php files I noticed that div class “module-meta-info” was available on in Loop-single.php ( default), 1, 5,9 and 10.

<div class="td-module-meta-info">
<?php echo get_avatar(get_the_author_meta( 'ID' ), 42 ) . $td_mod_single->get_author();?>
<?php echo $td_mod_single->get_date(false);?>
<?php echo $td_mod_single->get_comments();?>
<?php echo $td_mod_single->get_views();?>
</div>

There were no such place to add these codes for loop-single2.php , 3,4.6,7,8,11,12 and 13. Is that okay? Is there any way to know Which loop-single.php files correspond to which Post template?

Is there any way to add this code to remaining files which don’t have “Meta info: div-class available or there is no use of it under these file types?

Thank you.

Okay! what I do is I copy the files which needs some changes to the Child theme folder and then make some modifications. Is this the right way?

I mean in case of “Child theme” do WordPress automatically look in the child theme for a file and if it doesn’t find here, only then it looks for the corresponding file under original theme?

Please help me to understand child theme better. I have gone through the Child theme tutorial but these things are not clear. Thank you.

I just felt like I am being taught by one of the best teachers of my childhood 😀 😀

Thank you very much for the detailed response. I understood each and everything.

Hi Bogdan,

Recently I disabled default Gravatar option from Dashboard setting and started using recommended plugin “WP User Avatar” with option to display locally uploaded Avatars.

Though it’s working fine for Author card but now I am unable to see the same author image for the “author image” that we have created below post title based on codes written above. It’s showing the Default author image ( my logo ) I set under WP User Avatar.

Shouldn’t WP User Avtar support this author image too? Do we need to do any modification in code to make it grab author image from WP user avatar?

Kindly help.

Thank you.

Hi Bogdan, the wholepoint of using this avatar, not gravatar is to load author images from local host, not gravatar host which slows down the site speed a little based on GT matrix score.

In your test, probably you didn’t check this option which says to “Disable Gravatar and use only local avatars” here https://i.snag.gy/gOWUVa.jpg because if you won’t check, the theme will load both local avatar and user avatar.

Now the plugin user guide says here to manually replace get_avatar with get_wp_user_avatar to make the local avatar work. the whole things has been explained here

Now please tell me if you can get the small author image with check marking “Disable Gravatar and use only local avatars” and also without manually replacing the get_avatar with get_wp_user_avatar ?

If no, please tell me where should I make this change in our theme. Thank you.

Hello Bogdan,

As I can see here, under your setting – http://screencast.com/t/I2zJ1ylaaRG,the author image thatappears on the front end is the default image you set for the avatar. My website is a multi-author website and all of them showing the default image ( in my case default image is the tomatoheart square logo), not their own image and that’s the issue.

And this is why under both kind of settings, you are able to get the same image. If you really want to understand my issue. Make a different author, upload a different ( different than default image) for the new author and see if you are getting the same result on the front end.

For example- Here is my defualt author image setting setting: https://snag.gy/E0khcp.jpg , this is the setting of a different author Nit: https://snag.gy/sZeJIf.jpg and still this is how I still see the default image on the front end , not her own picture: https://snag.gy/lbhFKQ.jpg

and yes, I will try to implement the code as you said here http://screencast.com/t/CqT6BPe0nJ using Adobe Edge Code CC, which I use. I hope it will work as fine as notepad++

🙁 I am really sorry to trouble you again and again.

Now I have to look for the reasons. I literally have no idea why it’s happenning. May be I should run “Forced Regenerate thumbnails once.

Thank you for all your help.

Update: Sorry! it didn’t work. It shows the image of author who is logged in.

Hi Bogdan,

After continuousely struggling for 5 hours and playing with various code combinations, finally my problem get solved.

Here is what I needed to do : I need to replace

<?php echo get_avatar(get_the_author_meta( 'ID' ), 42 ) .

with

<?php echo get_avatar($current_user->ID, 42) . 

I don’t know why it can not call the previous code but this is what actually worked for me. So, the final code under single_template file will look something like this:

       <div class="td-module-meta-info">                               
                   <?php echo get_avatar($current_user->ID, 42) . $td_mod_single->get_author();?>
                                <?php echo $td_mod_single->get_date(false);?>
                                <?php echo $td_mod_single->get_views();?>
                                <?php echo $td_mod_single->get_comments();?>
                            </div>

Here is the snapshot: https://i.snag.gy/Qtqlp3.jpg

I got the idea for searching this code, because I can see that newspaper theme is correctly extracting the right author image under TOP menu and other places so, I looked for Get_avatar call under top-menu.php and hence I found this code.

Thank you very much Bogdan for all the help. 🙂 🙂

PS: writing in detail here for the benefit of other community users. I know you don’t want such silliy details.

• This reply was modified 9 years by Nano.
• This reply was modified 9 years by Nano.

Can you tell me from which file, this author image has been called here so that I can use the same get_avatar image code here too : https://i.snag.gy/XKYWOp.jpg

Thank you

Perhaps the code is :

<?php echo get_avatar($part_cur_auth_obj->user_email, '96'); ?>


But it’s not working either 🙁

Again f0r last 5 hours, I am trying different code combinations to call for the get_avatar like :

<?php echo get_avatar( get_the_author_meta( $field, $user_id ), 42) .
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '42')


But all of them is returning the same “default avatar” 🙁 I am unable to understand what should I do. Read hundreds of threads online.

Suprisingely , a post with style template-9 ( video post) is showing the correct small author image. ( click here for one sample post) There is something related to the way I put these codes. Though I tried many times by carefully placing the code.

Do you want to give a look to it? Let me konow so that I can send you login credentials. Thank you.

Hello Bogdan,

It’s indeed a big task for non-programmers like me and hence is still continue 🙂 So, here is the latest theory :

As in my third post, I said- We don’t have place to insert this code in all loop_single.php files.

In fact it’s only available under Loop_single.php ( default), 1, 5,9 and 10.

There were no such place to add these codes for loop-single 2.php , 3,4.6,7,8,11,12 and 13 and hence you told me to look for right place under corresponding single_templates. Right?

Now, though I discovered the right place under single_template.php but today I noticed that our codes are working well here on my side too, but only with style ( default), 1, 5,9 and 10 because these codes belong to loop_single ( default), 1, 5,9 and 10.

for those style for which we inserted the code under single_template ( 2,3,4.6,7,8,11,12 and 13 ) , it’s NOT WORKING and hence now it’s your turn to prove it’s working on your side under these styles too 🙂

( in fact more than proof, I want solution 🙁 )

Thank you.

Hi

The code provided by Bogdan works as expected even if it’s added in single files, here is an example for single_template_3.php: http://screencast.com/t/vZamMOopwFj – http://screencast.com/t/Z70kHL3Q

Thanks!

Hi Andrei, Thanks for the quick response . I hope you must have taken care of the fact you need to use “different author image” other than “default avatar” in the above shown example of yours. Because the problem is- it shows the default avatar at the place of real author image.

It’s becoming harder to solve this now but one thing is sure. I am still facing thing issue is only with style types with single_templates.php files. I am unable to understand what is wrong where.

For example, Here is how a single post calls for the small author image.

1. This is the code I took from view source when a loop_single style type was active, which displays author image correctly.

<div class="td-module-meta-info">
<img src="https://domain.com/wp-content/uploads/2016/09/AAEAAQAAAAAAAAd_AAAAJDdiYzA5Mjc2LWQzOWEtNDM5NC04YzkwLTQ1ODk4MDM0MzFlYg-200x198.jpg" width="42" height="42" alt="Amardeep Singh" class="avatar avatar-42 wp-user-avatar wp-user-avatar-42 alignnone photo"/><div class="td-post-author-name"><div class="td-author-by">By</div> <a href="https://domain.com/author/amardeep-singh/">Amardeep Singh</a></div> </div>

2. This is the code I tool when single_template style was active for the same post. It shows the default avatar

<div class="td-module-meta-info">
<img src="https://domain.com/wp-content/uploads/2016/08/domain-Fevicon-iOS-152-152x150.png" width="42" height="42" alt="" /><div class="td-post-author-name"><div class="td-author-by">By</div> <a href="https://domain.com/author/amardeep-singh/">Amardeep Singh</a></div> </div>

Can you spot why the same code is calling for two different images under different style type? Since you are developer , you may spot things that I am unable to find.

• This reply was modified 9 years by Nano.
• This reply was modified 9 years by Nano.

Hi

You can also try this code as alternative, it should work fine on both loop and single files:

post_author), 42) . $td_mod_single->get_author();?>

Thanks!

Finally something worked 😀 😀 😀 … Thank you very much.

Just one small CSS thing. I tried all possible waty to adjust author image so that it can come in the same horizontal line in which author name is written but I didn’t succees. Here is what CSSI have used:

.avatar-42{
float:left;width:42px;height:42px;border-radius:42px;margin:-25px 8px 6px 0;
}

Here is how it looks: http://i.imgur.com/zskzhM6.jpg

I to move “Author Name” down, so that it can be either in the middle or in the same line to that of Author image. I have tried adjusting author image but it didn’t work. May be some custom CSS code for adjusting “Author Name” can help.

Thank you.