[HowTo] Fix empty default user avatar in custom theme user menu

[SvePu]

Hi dear theme designers

some of you use the avatar image source code {$mybb->user['avatar']} in a user header menu, but there is no image when user has the default MyBB avatar.

Here are two ways how you can fix it.

1.) Download my "MyBB Default Avatar Fix" plugin from here and include it into your theme package.

or

2.) Include the small function into your own theme plugin:

// defaultavatarfix function by SvePu (http://community.mybb.com/user-91011.html) //
function defaultavatarfix()
{
	global $mybb;

	if(!$mybb->user['avatar'] && !empty($mybb->settings['useravatar']))
	{
		$mybb->user['avatar'] = $mybb->settings['useravatar'];
	}
}
$plugins->add_hook("global_intermediate", "defaultavatarfix");

Thank you all for your amazing themes and keep on styling!

[Leefish]

You can actually do this with javascript . Give your avatar a class of header_avatar img and add js code at the bottom of footer.

Example code

<li class="header_avatar"><img src="{$mybb->user['avatar']}" height="30px" width="30px" align="top" class="miniav"/></li>

<script>
$(document).ready(function() {
 //create a default avatar for those without one.
 if($('.header_avatar img', this).attr('src') == ''){
 $('.header_avatar img').attr('src', '/images/default_avatar.gif');
 }
});
</script>

You might say aha - but what if user has no js enabled. Um, if they have no js enabled on a 1.8 mybb board then no avatar in the header is a minor issue compared to the rest.

[SvePu]

You're right Leefish, that's also a way. But why adding another javascript function while mybb 1.8 has a default avatar option in profile settings?

The only problem is that the default avatar from profile settings isn't loading in custom theme header. With the small php function above it will.

BTW: It's only a suggestion by me, not a must have.

[Devilshakerz]

Include the small function into your own theme plugin

You can actually do this with javascript

You can actually do this with pure CSS:

<div class="avatar-box">
    <img src="{$mybb->user['avatar']}" alt="avatar" />
</div>

.avatar-box { height: 30px; width: 30px; background: url('../../../images/default_avatar.png') no-repeat; background-size: 100% auto; }
.avatar-box img { height: 30px; width: 30px; }
.avatar-box img[src=""] { display: none; }

If the user has set his own avatar, the default one gets covered behind - if not, the image is hidden to prevent the browser from rendering a broken image indicator.

[Leefish]

@Devilshaker, Yea, I use something similar to that trick for the profile backgrounds.

Anyhoo, now our themers have 3 ways to give us the avatar in the member header . That is good right?

[SvePu]

Sorry, but I guess my way has the best usability.

Users can change the path to default avatar image in profile settings as they like and it'll take effect. They haven't to change css rules or javascript entries for the new image path.

[zukro]

Hi SvePU, could you explain to me how to Include that small function into theme?

[Destroy666]

Not into theme, you have to add it into a plugin stored within the pluckin package.
http://docs.mybb.com/1.8/development/plugins/

[Dr_The_One]

You can actually do this with pure CSS:

<div class="avatar-box">
    <img src="{$mybb->user['avatar']}" alt="avatar" />
</div>

.avatar-box { height: 30px; width: 30px; background: url('../../../images/default_avatar.png') no-repeat; background-size: 100% auto; }
.avatar-box img { height: 30px; width: 30px; }
.avatar-box img[src=""] { display: none; }

If the user has set his own avatar, the default one gets covered behind - if not, the image is hidden to prevent the browser from rendering a broken image indicator.

Where to modify/add code?

[amanda_2011]

Thanks, SvePu, great plugin! (Tack!)