alternate sidebar: members online now

[s0ct0j0c]

this sidebar will load avatars for your online members rather than the default text link. i thought the members would like being able to see at a glance whos online, rather than see a list of text. member feedback has been positive.

what makes this sidebar different than the other available avatar sidebars is the following:



the smallest avatars are loaded.
staff and moderators will not reappear in 'members' (they already show in 'staff online').
people you follow will not reappear in 'members' (they already show in 'people you follow').
tooltip on mouseover with the members name.

those worried about this bloating out the page:



the avs are an average of 5KiB in size.
the avs are cached by your regulars.
the number of avs listed is configurable via the acp.


http://xenforo.com/community/data/attachments/8/8041-90d9033709e102092c063c661178d693.jpg (http://xenforo.com/community/attachments/online2-png.8041/)
(beta 5) in template sidebar_online_users:

replace all code with:


<xen:edithint template="sidebar.css" />
<xen:if hascontent="true">
<!-- block: sidebar_online_staff -->
<div class="section staffOnline avatarList">
<div class="secondaryContent">
<h3>{xen:phrase staff_online_now}</h3>
<ul>
<xen:contentcheck>
<xen:foreach loop="$onlineUsers.records" value="$user">
<xen:if is="{$user.is_moderator} OR {$user.is_admin}">
<li>
<xen:avatar user="$user" size="s" img="true" />
<xen:username user="$user" rich="true" />
<div class="userTitle">{xen:helper userTitle, $user}</div>
</li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
</div>
</div>
<!-- end block: sidebar_online_staff -->
</xen:if>
<!-- block: sidebar_online_users -->
<div class="section membersOnline userList">
<div class="secondaryContent">
<h3><a href="{xen:link online}" title="{xen:phrase see_all_online_users}">{xen:phrase members_online_now}</a></h3>
<xen:if is="{$onlineUsers.records}">
<xen:if is="{$visitor.user_id}">
<xen:if hascontent="true">
<h4 class="minorHeading"><a href="{xen:link account/following}">{xen:phrase people_you_follow}:</a></h4>
<ul class="followedOnline">
<xen:contentcheck>
<xen:foreach loop="$onlineUsers.records" value="$user">
<xen:if is="{$user.followed}">
<li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
<h4 class="minorHeading"><a href="{xen:link members}">{xen:phrase members}:</a></h4>
</xen:if>
</xen:if>
<ol class="followedOnline">
<xen:foreach loop="$onlineUsers.records" value="$user" i="$i">
<xen:if is="{$i} <= {$onlineUsers.limit}">
<xen:if is="!{$user.is_moderator} OR !{$user.is_admin}">
<xen:if is="!{$user.followed}">
<xen:if is="{$user.user_id}">
<li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
<xen:else />
{xen:phrase guest}<xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
</xen:if>
</xen:if>
</xen:if>
</xen:if>
</xen:foreach>
<xen:if is="{$onlineUsers.recordsUnseen}">
<li class="moreLink">... <a href="{xen:link online}" title="{xen:phrase see_all_visitors}">{xen:phrase and_x_more, 'count={xen:number $onlineUsers.recordsUnseen}'}</a></li>
</xen:if>
</ol>
</xen:if>
<div class="footnote">
{xen:phrase online_now_x_members_y_guests_z, 'total={xen:number $onlineUsers.total}', 'members={xen:number $onlineUsers.members}', 'guests={xen:number $onlineUsers.guests}'}
</div>
</div>
</div>
<!-- end block: sidebar_online_users -->



if you are using jaxels portal you will want to also edit his module template.

in template EWRporta_Block_OnlineUsers:

replace the entire template with the following:


<xen:if hascontent="true">
<div class="section staffOnline avatarList">
<div class="secondaryContent">
<h3>{xen:phrase staff_online_now}</h3>
<ul>
<xen:contentcheck>
<xen:foreach loop="$OnlineUsers.records" value="$user">
<xen:if is="{$user.is_moderator} OR {$user.is_admin}">
<li>
<xen:avatar user="$user" size="s" img="true" />
<a href="{xen:link members, $user}" class="username">{xen:helper richUserName, $user}</a>
<div class="userTitle">{xen:helper userTitle, $user}</div>
</li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
</div>
</div>
</xen:if>

<div class="section membersOnline userList">
<div class="secondaryContent">
<h3><a href="{xen:link online}" title="{xen:phrase see_all_online_users}">{xen:phrase members_online_now}</a></h3>

<xen:if is="{$OnlineUsers.records}">

<xen:if is="{$visitor.user_id}">
<xen:if hascontent="true">
<h4 class="minorHeading"><a href="{xen:link account/following}">{xen:phrase people_you_follow}:</a></h4>
<ul class="followedOnline">
<xen:contentcheck>
<xen:foreach loop="$OnlineUsers.records" value="$user">
<xen:if is="{$user.followed}">
<li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
</xen:if>
</xen:foreach>
</xen:contentcheck>
</ul>
<h4 class="minorHeading"><a href="{xen:link members}">{xen:phrase members}:</a></h4>
</xen:if>
</xen:if>

<ul class="followedOnline">
<xen:foreach loop="$OnlineUsers.records" value="$user" i="$i">
<xen:if is="{$i} <= {$OnlineUsers.limit}">
<xen:if is="!{$user.is_moderator} OR !{$user.is_admin}">
<xen:if is="!{$user.followed}">
<xen:if is="{$user.user_id}">
<li title="{$user.username}" class="Tooltip"><xen:avatar user="$user" size="s" img="true" class="_plainImage" /></li>
<xen:else />
{xen:phrase guest}<xen:if is="{$i} < {$OnlineUsers.limit}">,</xen:if>
</xen:if>
</xen:if>
</xen:if>
</xen:if>
</xen:foreach>
<xen:if is="{$OnlineUsers.recordsUnseen}">
<li class="moreLink">... <a href="{xen:link online}" title="{xen:phrase see_all_visitors}">{xen:phrase and_x_more, 'count={xen:number $OnlineUsers.recordsUnseen}'}</a></li>
</xen:if>
</ul>
</xen:if>

<div class="footnote">
{xen:phrase online_now_x_members_y_guests_z, 'total={xen:number $OnlineUsers.total}', 'members={xen:number $OnlineUsers.members}', 'guests={xen:number $OnlineUsers.guests}'}
</div>
</div>
</div>