User avatar in the Admin bar drop down is incorrectly sized when it is the default.

[fanquake]

I've tested this with BP disabled, and the issue isn't present in WordPress, so I'm assuming its a Buddypress issue. When you view the user profile drop down on the admin bar, the avatar is incorrectly sized if it has not been changed from the default.

Screenshot attached.

[fanquake]

Avatar screenshot

[DJPaul]

Good catch. Gravatar's gone mad!

[fanquake]

Looks like its changed, but still broken.

Edit: Must have been some weirdness on my end, it hasn't changed. Still looking like the original upload.

[DJPaul]

This issue is showing up in BP 1.5.2 -- http://buddypress.org/community/groups/miscellaneous/forum/topic/important-some-notes-about-wordpress-3-3-and-buddypress/?#post-117677

[mercime]

Feedback -
Didn't see that problem with WP 3.3 multisite/subdomain with BP 1.6 trunk-5457 installed in main site. Image attached - on Firefox.

[mercime]

Looks good in IE as well

[mercime]

Looks good in Firefox

[rossagrant]

The issue only arises if a user DOESN'T upload an avatar. If the profile then defaults to a default avatar such as 'mystery man' that is where we see this problem.

I can confirm 100%. Seen it on 2 seperate installs, both in my theme and BP Default.

[boonebgorges]

Confirmed. This only happens for users who are falling back on the default avatar.

The problem is that we load the default image via a callback from Gravatar (the fallback for when a user doesn't have an avatar), and for some reason the browser isn't respecting the inline width and height attributes in the img tag.

This would be an easy fix if we had an admin-bar stylesheet, but we don't have one that loads with WP 3.3 anymore. I'm going to poke around to see if I can find a decent solution.

[boonebgorges]

Ugh. I can't think of a decent way to solve this. We have a couple options:

(1) Resize the default avatar, possibly on the fly (at least the first time it's requested). Not sure if that's even possible.
(2) Load our own stylesheet. This seems like the "right" way to do it, but it seems a shame to load an entire stylesheet just so we can say #wp-admin-bar-user-info .avatar { width: 64px; height: 64px;}
(3) When using the WP admin bar, output the styles inline somewhere
(4) Filter the output of bp_core_fetch_avatar() when it appears in this context, and add an inline style="display...." attribute.

I guess we should probably go with (2), as there will likely be a point down the road when we'll need other custom styles for the toolbar.

[mercime]

Defining height and width for the avatar solved this for me.

[boonebgorges]

That works on BP trunk because we are loading an admin-bar stylesheet on trunk, but not in the branch. See ​https://buddypress.trac.wordpress.org/browser/branches/1.5/bp-core/bp-core-adminbar.php?annotate=blame&rev=5483#L244

I think we'll have to revert that check, but I want to get feedback from jjj first.

[johnjamesjacoby]

What are we doing wrong that WordPress core is doing correctly? Any way we can pass the size to Gravatar? Pretty sure we are already doing that?

[tsany]

actually it's only happened with the mistery man avatar..

if you changed it into other type of avatar.. it's back to normal

[boonebgorges]

This issue sucks. Here's what's happening:

The markup for our BP avatar specifies the correct height and width params:
height="64" width="64"
but these values are being overridden by the following style in WP's admin-bar stylesheet:
#wpadminbar * { height: auto; width: auto; }

The reason why it's not a problem for WP's core implementation is that get_avatar() gets a default image *from Gravatar*, so that when a user does not have a Gravatar, the default image that is served is generated at the proper size: 64x64. We, on the other hand, pass a *local path* to Gravatar to serve as the default image, and the default image is 128x128.

Based on this, I don't see a way around it - we have to load our own stylesheet.

[fanquake]

You might want to keep tabs on this ticket over on the WP trac. I think it could be a similar issue.

​http://core.trac.wordpress.org/ticket/19539

[boonebgorges]

Good call, fanquake. It is indeed the same issue. I've left a comment there. If WP fixes this in 3.3.1, I think we can wontfix it here.

[herronelou]

Hi,
i personally just fixed that by adding

#wpadminbar #wp-admin-bar-user-info img{height:64px;width:64px;}

in admin-bar.css (the wordpress one, not the buddypress one) but i don't know if you're "allowed" to do that in BP.. i'm definitely interested about a way to clean fix this issue.

[boonebgorges]

This is a pretty big bug, so I'm going to load a stylesheet for BP 1.5.3. We can revisit this when and if WP addresses this issue.

[boonebgorges]

(In [5628]) Reinstates admin-bar stylesheet on 1.5 branch. Fixes default avatar size in 'Howdy' toolbar menu for WP 3.3.x. Props mercime. See #3782.

[DJPaul]

Is this ticket complete? Can it be closed?

[johnjamesjacoby]

Works for me. Closing as fixed.

[DJPaul]

This has broken in trunk again. I'm going to port fix from branch. (1.5 branch works)

[djpaul]

(In [5856]) Port avatar sizing fix for toolbar howdy menu from 1.5 branch to trunk. Fixes #3782 again

[DJPaul]

Re-opening again because it's broken in the 1.5 branch when using the BuddyBar; the previous fixes all live in the Toolbar-specific CSS file.

[djpaul]

(In [5864]) Avatar sizing fix for Toolbar howdy menu, when in wp-admin and when using the BuddyBar. Fixes #3782 again.

[djpaul]

(In [5865]) Avatar sizing fix for Toolbar howdy menu, when in wp-admin and when using the BuddyBar. For trunk. Fixes #3782 again again.