MyBB Community Forums

Full Version: MyBB Scratchboard – Post your random admin/dev stuff
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Was looking at how I could do a default avatar in the welcomeblock without using template conditionals. Doesn't exactly rely on JS, but will default to a broken image if the user doesn't have an avatar (And has JS disabled).

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

<script type="text/javascript">
function imageExists(url) {
	var img = new Image();
	img.src = url;
	return img.height != 0;
}

if (!imageExists({$mybb->user['avatar']})) {
	document.getElementById('user-avatar').innerHTML = '<i class="icon-user"></i>';
}
</script>
Quote:Was looking at how I could do a default avatar in the welcomeblock without using template conditionals

I had a request for no avatar fix but the user didn't want any plugins (like TC or default avatar) so i've used background image approach.

in welcome member template

<span class="user_avatar"><span></span></span>

In headerinclude

<style type="text/css">
.user_avatar,
.user_avatar > span {
 display:inline-block;
 vertical-align:middle;
 background-size:45px 45px;
 background-repeat:no-repeat;
height:45px;
width:45px;
}

.user_avatar {
  background-image: url(images/default_avatar.gif);
}

.user_avatar > span {
 background-image: url({$mybb->user['avatar']});
}

</style>

It will show both avatars (the user one and the default one), if the user has no avatar default_avatar.gif will be displayed since the child span is empty.

The only downside is background-size, since it's a css3 property it will only work for ie9 and above (you could use CSS3 PIE for that on IE8).
Yours is a nice solution as well. I guess it's really a choice of loading 2 images, or using JS. ^.^ (With JS you can do this:

<div id="user-avatar"></div>

<script type="text/javascript">
function imageExists(url) {
    var img = new Image();
    img.src = url;
    return img.height != 0;
}

if (imageExists({$mybb->user['avatar']})) {
    document.getElementById('user-avatar').innerHTML = '<img src="{$mybb->user['avatar']}" alt="Avatar" />';
} else {
    document.getElementById('user-avatar').innerHTML = '<i class="icon-user"></i>';
}
</script>

which means no extra images are loaded)
This kind of things are better suitable using server-side code IMHO.
Yeah but in theme production it's pretty pointless to create a whole plugin for something small like this that users have to install to use your theme. We have to use workarounds until MyBB introduces a fix.
(2013-06-27, 01:52 AM)Nathan Malcolm Wrote: [ -> ]If you're looking to just write something up you can always write up the new help documents. They desperately need some attention. Smile

Sure, though ideally good design would make a help section unnecessary.
Working on our framework. Big Grin

http://i5.minus.com/i61tLzNd2UC5G.png
(2013-06-27, 12:24 PM)Shade Wrote: [ -> ]This kind of things are better suitable using server-side code IMHO.

+1. A single if statement in the script or loading extra JS (which doesn't work for users with JS disabled) or loading an extra image. The first option always sounds the best to me.
(2013-06-27, 01:36 PM)brad-t Wrote: [ -> ]
(2013-06-27, 01:52 AM)Nathan Malcolm Wrote: [ -> ]If you're looking to just write something up you can always write up the new help documents. They desperately need some attention. Smile

Sure, though ideally good design would make a help section unnecessary.

I personally find it unnecessary. Good design should negate the need.

Have fun writing them! I wasn't too successful with it yesterday since I stuck to the old wording subconsciously too much.
(2013-06-27, 01:36 PM)brad-t Wrote: [ -> ]
(2013-06-27, 01:52 AM)Nathan Malcolm Wrote: [ -> ]If you're looking to just write something up you can always write up the new help documents. They desperately need some attention. Smile

Sure, though ideally good design would make a help section unnecessary.

Ideally it would, but not everything is about design. At this point the help section is practically unusable.