[Plugin: Add Local Avatar] Admin bar avatar wrong size

Hi,

I do have the same issue as well. Let me know if you find any solution.

Thanks!

Me too — the avatar in the top left of the page is so large it covers the blog title. IMHO the avatar shouldn’t even be there — a simple user menu (like on normal blog pages) would be sufficient.

The avatar is only supposed to be 16px square, so it would normally be a very unobtrusive design item.

Our avatars are larger than 16px, but everywhere else on the site they are being scaled down to 16px. Only the admin bar displays the avatars as full size. Maybe the admin bar should be using “16px” explicitly as the size.

I haven’t had that happen on my site, fortunately. I believe the admin bar does specify 16px as the size of the avatar, but the plugin conflict is throwing a spanner in the works.

You can turn off the admin bar by visiting your profile. Users who are not logged in should hopefully see the avatars the correct size in any event. You can also turn off the admin bar globally by putting some piece of code in your theme’s functions.php file. Hunt around in the forum and you’ll find the code.

I found the problem on our site. We have an Avatar plugin that is returning not only the image, but an ‘A’ tag that makes the image into a link. In the admin bar, this produces a nested ‘A’ tag which breaks things. So instead of this:

<li id="wp-admin-bar-my-account-with-avatar" class="menupop">
 <a href="https://myblog/wp-admin/network/profile.php">
  <span>
    <img src="https://avatarserver/jsmith.jpg" width="16" alt=""/>
   jsmith
  </span>
 </a>
</li>

our site displays this:

<li id="wp-admin-bar-my-account-with-avatar" class="menupop">
 <a href="https://myblog/wp-admin/network/profile.php">
  <span>
   <a href="https://homepages/jsmith">
    <img src="https://avatarserver/jsmith.jpg" width="16" alt=""/>
   </a>
   jsmith
  </span>
 </a>
</li>

Time to modify the plugin.

Here’s a temporary fix.
Try adding the following to your theme’s functions.php file:

function my_admin_head() {
	echo '<style type="text/css">#wp-admin-bar-my-account-with-avatar img { width:16px; height:16px; }</style>';
}
add_action( 'admin_head', 'my_admin_head' );

Sorry, that only changes it in the admin, this changes it everywhere:

function my_admin_head() {
	echo '<style type="text/css">#wp-admin-bar-my-account-with-avatar img { width:16px; height:16px; }</style>';
}
add_action( 'admin_head', 'my_admin_head' );
add_action( 'wp_head', 'my_admin_head' );

It’s times like these I really appreciate the work plugin designers do. I rely on this plugin, and so I’ve donated $25 to the author. I’d encourage other people to do likewise: https://www.sterling-adventures.co.uk/blog/2008/03/01/avatars-plugin/

Ben: Thanks for the suggested fix. I tried it too (hard-coding 16px) but it doesn’t work in my case because of the two nested “A” tags, which seem to throw off both Firefox and Internet Explorer. I would guess it’s illegal HTML.

Didn’t work for me, either. Previously, I’d also tried simply adding a similar style declaration to the end of my stylesheet, but that didn’t work. Unlike dbvista, I don’t have nested links.

What did work for me was to add the following to the end of wp-includes/css/admin-bar.css

#wp-admin-bar-my-account-with-avatar img { width:16px; height:16px; }

I created an awful hack to distinguish the usual avatars (in comments) from the one in the Admin Bar.

That, together with Haecceity’s CSS above, makes everything work out.

Version 9.1 addresses this and other issues to work with WP 3.1. ??

Thanks, Peter. That was quick work.

@ben Huson
We pasted the code that you showed in your second example into our theme’s functions.php code. PERFECT! Thank you very much!