Adding author's avatar beside post title

Hi, I would like to put author’s avatar beside post title using visual composer’s module 9 on my homepage.

Is there any way to do that?

thanks team.

Hi

You need to edit td_module_9.php file and add this line of code like here: http://screencast.com/t/IVuJ4eblrYN
<div class="avatar-img"> <?php echo get_avatar( get_the_author_meta( 'ID' )); ?> </div>

Also you can add this css in theme panel > custom code > custom css if you want to center the image: http://screencast.com/t/JP4hD3vp

.avatar-img img{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

Note that WordPress doesn’t have an option to add an avatar image, you will need a plugin like https://wordpress.org/plugins/wp-user-avatar/ or to use gravatar: https://codex.wordpress.org/How_to_Use_Gravatars_in_WordPress

Let me know how it goes.
Thanks!

• This reply was modified 10 years by Andrei L..

Hi Andrei L., Thank you for your help.

I have added those line of code on module 9, and the author’s avatar appears on my homepage.

However, I would like to customise the image to be a little bit smaller, and stand exactly beside the title post. I would like the module to be seen like this one: http://postimg.org/image/3p95q0pwv/

Please advice,

Thank you

Hi

To achieve that first you need to move this line of code here: http://screencast.com/t/UEVjibBSjg4t

<div class="avatar-img"> <?php echo get_avatar( get_the_author_meta( 'ID' )); ?> </div>

Then add this css in theme panel > custom code > custom css: http://screencast.com/t/LTSBs7WJjwsB

.avatar-img{
position: absolute;
}
.td_module_9 .item-details{
margin-left: 105px;
text-align: left;
 }
.td_module_9 .td-post-category {
margin-left: 0;
}

Thanks!

• This reply was modified 10 years by Andrei L..

Hi Andrei L.,

Thank you so much for your help. May i know how can I adjust the size of the avatar appeared on previous edited module 9?

Hi team,

I managed to adjust to adjust the image size of the avatar in css using
.avatar-img {
max-width: 40px;
max-height: 40px;

However, the avatar wont appear on my homepage as seen on this image http://postimg.org/image/jptzksi57/ ,
I used “Simple local avatars”.

Please help me!…

Hi

We didn’t tested Simple local avatars plugin with the theme and I can’t say how will work. For the above demonstration I’ve used WP User Avatar: https://wordpress.org/plugins/wp-user-avatar/ which works fine with the theme so you can try this plugin and see how it works. Also you can use use gravatar: https://codex.wordpress.org/How_to_Use_Gravatars_in_WordPress

Thanks!

I have tried it on localhost, and the image appears. but when I do it on host server, the image shows a default wordpress avatar user. Please have a look at my website: acehtrend.co the module located at the “Opini” section on the right side of the page.

Please help…

Hi

I’ve checked your site and from what I can see you don’t have set any avatar image: http://screencast.com/t/TpvbEWqpds WordPress doesn’t have an option for avatar image, you will have to use either a plugin or gravatar to achieve that: https://codex.wordpress.org/How_to_Use_Gravatars_in_WordPress Please make sure that you’ve set the avatar image, under User > Avatar in case that you’re using WP User Avatar plugin: http://screencast.com/t/7xeVyxJ1m clear all caches and test again.

Thanks!

Hi, I’ve done as instructed, and still the image has not yet appeared on the website.

I have installed and activated WP User Avatar plugin, but the image still has not appeared.

Pleaseeeeee help.

Hi

The avatar image works fine on post’s author box: http://screencast.com/t/z3SBxTwwC or in authors block: http://screencast.com/t/NuqpJJkr If does it should work and on module 9 because the implementation it’s similar.
If you still can’t manage to solve this issue please address us via email at contact@tagdiv.com including a link to this conversation and also give us wp-access so we can have a closer look at this and we will get back to your as soon as possible.

Thanks!