Ready to get started?Download WordPress


[Plugin: Author Avatars List] Display authors side by side (22 posts)

  1. mugilan02
    Posted 5 years ago #

    Dear buddy,

    I've recently came across the plugin and a good one indeed - a plugin that i was looking for. Unfortunately when I add the widget to my sidebar, instead of displaying the authors in a group ( cloud ) it is being displayed line by line, one author on each line.

    My Website: http://hotfriendsterlayouts.com/
    Sidebar on right, see the bottom of the sidebar.

    How can I display the authors side by side like these websites,
    http://www.wildmind.org/author/kulananda or

    Another thing I would like to know, how I can make the widget to display authors only with avatars? ( if you see, some of them dont have avatar )

    Thanks in advance.

  2. Ben
    Posted 5 years ago #

    Hi mugilan02,

    Your author's are displayed line by line because the plugin's styles do not get applied properly. It looks like you're theme is doing something different in showing widgets; you're missing a container around the widget holding the class "multiwidget_author_avatars".

    Usually themes have a "before widget" and "after widget" code defined on their sidebars (theme functions.php), for example:

    register_sidebar( array(
        'name' => 'Sidebar Name',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div >',
    ) );

    It's important that the "before_widget" bit is set and that it contains class="widget %2$s".

    If changing the html markup is not an option you could also just take the css styling from widgets.css, copy it to your theme's style.css and strip the .multiwidget_author_avatars bits.

    Because of the way avatars are handled by wordpress and gravatar there is no easy way to distinguish between a proper avatar and a placeholder image ("no avatar") as far as I know.


  3. mugilan02
    Posted 5 years ago #


    You rock man !!!!!!!!!

    'before_widget' => '<div id="%1$s" class="widget %2$s">',

    I include the code above and now can see the avatars being displayed in a cloud.

    Thanks a lot man. Keep up the good work :)

  4. typebee
    Posted 5 years ago #

    hello bforchhammer, gosh, I'm missing something. I want to display my Author Avatars in a cloud on the sidebar too! I have the avatars on several pages -- index, single, comments, and author page -- but cannot figure out how to code the widget for the sidebar. (I'm self-hosting, so can't use the admin widget.) The code I'm using <?php wp_list_authors('exclude_admin=1&hide_empty=1'); ?> displays a vertical list of usernames only -- no avatars. Can you help? Do I install all the Author-Avatars files manually? Thanks! dabuzzing.org

  5. typebee
    Posted 5 years ago #

    hey Ben, Sorry to bug you. I found the page where you had already answered my question about hand-coding this plugin. It worked great! (http://wordpress.org/support/topic/218939/page/2?replies=66)

  6. typebee
    Posted 5 years ago #

    However...can I add my blog's default avatar for those Authors without one? What code would I use in the sidebar? The cloud Author display looks great, but has many missing icons. I'm using the code you provided elsewhere:

    <?php require_once(ABSPATH . PLUGINDIR . '/author-avatars/lib/UserList.class.php' );
    			$userlist = new UserList();
    			$userlist->hiddenusers = array('admin');
    			$userlist->roles = array('Administrator', 'Editor', 'Author');
    			$userlist->link_to_authorpage = true;
    			$userlist->show_name = false;
    			$userlist->avatar_size = 20;
    			$userlist->limit = 30;
    			$userlist->order = 'display_name';
  7. Paul Bearne
    Posted 5 years ago #

    We are looking at doing this

    It may be posable to send a default avatar URL to the avatar service we are looking at how we can do this.

    But you need to understand that use the WordPress/BuddyPress avatar code to fetch the images so sometimes there are limits as to what we can do.


  8. Ben
    Posted 5 years ago #

    Here's a post about how to add a custom "default avatar": http://wpengineer.com/add-avatar-to-wordpress-default/

    That should work nicely in combination with our plugin as we the plugin makes use of wordpress core avatar functions.

  9. typebee
    Posted 5 years ago #

    hey again. Thanks for your help and information. Last night I tried to use the code at wpengineer, but the edits to my functions.php made no avatars appear on the Admin|Discussion options page. I had to give up when, sleepy and exhausted, I created a code error in functions and had to upload the original one. UGH! It would be an ideal solution though if only I could figure out why it doesn't work. I use Cutline 2pt1 theme (dabuzzing.org) running the latest WP version. No XHTML or CSS errors either. What is "template_directory"? I don't see that on any of the php pages on my site. Maybe I had the wrong path, but I tried several. Even put the images (.jpg) in the root. Anything else I could try? Thanks again!

  10. Ben
    Posted 5 years ago #

    function typebee_default_avatar( $avatar_defaults ) {
    	$myavatar = get_bloginfo('template_directory') . '/avatar.jpg';
    	$avatar_defaults[$myavatar] = 'Typebee Avatar';
    	return $avatar_defaults;
    add_filter( 'avatar_defaults', 'typebee_default_avatar' );

    That added to functions.php and the avatar put as "avatar.jpg" into the directory of your active theme should do the job.

    Get some sleep and try again ;-)

  11. typebee
    Posted 5 years ago #

    hey bforchhammer, it worked! Thank you so much. Are you a genius!? I think so! I'm going to make a donation to your author-avatars plugin.

  12. Ben
    Posted 5 years ago #

    My pleasure, thanks!

  13. typebee
    Posted 5 years ago #

    another question, if I may. How can I style the sidebar author avatars differently than the avatars on page or post? Which CSS file do I look for? In the sidebar I would like less padding. Thanks again!

  14. Ben
    Posted 5 years ago #

    The sidebar avatars are styled by the css styles defined in css/widget.css, the avatars on a page/post by the styles in css/shortcode.css.

  15. typebee
    Posted 5 years ago #

    Hey again. Still trying to put a different style on the sidebar author avatars at dabuzzing.org using the above php code you provided.

    In my custom.css, I added this:

    .author-list .avatar {
    float: left;
    display: block;
    margin: 0;
    padding: 1px;
    border: solid 1px #ddd;
    background-color: #fff;
    color: #000;

    That works in both Firefox & IE. However, in IE the link to the author.php pages is there but not clickable. I cannot find the anchor link. What is the answer, oh wise one? I know you know! Thanks again.

  16. Ben
    Posted 5 years ago #

    Looks like some element gets displayed "in front" of your avatar pictures and blocks the user from clicking the links

    It sounds like you need to do some css debugging (identify which css statement causes it by taking away stylesheets or parts of stylesheets; narrow it down; once you've found what's causing it you can google a solution). Especially if it did work before, remove what you've added and put it back in little bits.... ;-)

  17. typebee
    Posted 5 years ago #

    Hey, Thanks for your support. I didn't find any problems with the stylesheet. I Googled and found this additional css which I modified -- and now the avatars are clickable in IE too. http://bavotasan.com/tutorials/how-to-display-an-author-list-with-avatars-in-wordpress/ I had specified only the image, but when I styled li and .with-name, it worked.

    Thanks for your help! The Author-Avatar plugin is terrific. I hope the upgrade to 2.8 won't break any of this plugin's functions.

  18. livebydesign
    Posted 5 years ago #

    I have been wrestling with your widget, trying to get it not to wrap into the widget below it.

    My site is http://www.thezeitgeiststudios.com/blog/

    If anyone knows how to do this I would appreciate the help.

    Thanks bforchammer for the awesome widget!!

  19. Ben
    Posted 5 years ago #

    livebydesign: in your style.css remove "float: right;" from the img.avatar rule; now the avatars should be centered in the widget area...

    Now to make the avatars be on the right or left side add the following to your style.css, and set text-align to "left" or "right" respectively:
    html .multiwidget_author_avatars .author-list { text-align:left; }

  20. livebydesign
    Posted 5 years ago #

    Your a genius!!! It looks great! Thanks!

  21. livebydesign
    Posted 5 years ago #

    Ok, one more question. if you look at my site http://www.thezeitgeiststudios.com in safari or chrome the avatar_authors widget looks great, but in firefox the right side gets pushed over to the next row. Any thoughts?

  22. Ben
    Posted 5 years ago #

    Probably too much padding on .multiwidget_author_avatars .author-list .user; you can try reducing it or using a fixed pixel value instead of em.

Topic Closed

This topic has been closed to new replies.

About this Topic