Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[HowTo] Fix empty default user avatar in custom theme user menu
#1
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!
Greetings Sven (ps: Sorry for my bad english!!)

My plugins - [email protected]
Reply
#2
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.
Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved


Reply
#3
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. Wink
Greetings Sven (ps: Sorry for my bad english!!)

My plugins - [email protected]
Reply
#4
(02-05-2015, 04:43 PM)SvePu Wrote: Include the small function into your own theme plugin

(02-05-2015, 05:11 PM)Leefish Wrote: 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.
devilshakerz.com/pgp (DF3A 34D9 A627 42E5 BC6A 6750 1F2F B8AA 28FF E1BC) ▪ keybase.io/devilshakerz
Reply
#5
@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?
Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved


Reply
#6
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.
Greetings Sven (ps: Sorry for my bad english!!)

My plugins - [email protected]
Reply
#7
Hi SvePU, could you explain to me how to Include that small function into theme?
Reply
#8
Not into theme, you have to add it into a plugin stored within the pluckin package.
http://docs.mybb.com/1.8/development/plugins/
Reply
#9
(02-05-2015, 05:59 PM)Devilshakerz Wrote: 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?
Reply
#10
Thanks, SvePu, great plugin! (Tack!)
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)