[Block] Avatar of Users Online

[IchBin]

This php code snippet will only work in a phpbox type block. It has a configurable column setting so it can fit a top/bottom or side block. You can also set a time limit on how far back you want to show users online i.e. 15 minutes, 1hour, 1day. All of the configurable options are put in the top, including any CSS changes you want to make. If your user avatars are larger or smaller than 100x100 pixels wide, adjust the CSS accordingly in the code. A default avatar is set if the user does not have an avatar. This assumes there is a file named default_avatar.gif in your themes images directory.

Code Select Expand


global $memberContext, $db_prefix, $scripturl, $modSettings;

/* ###  CONFIGURATION OPTIONS  ### */
// Set time limit using seconds
// 1 hour = 3600
// 1 day = 84600
$timelimit = 3600;

// Set $columns to the amount of columns you need
// You set this depending on whether you want it in a side block or a top/bottom block.
$columns = 5;

// Set the height and width of avatars
// This will resize the avatars to be more uniform
$width = "40px";
$height = "40px";

// Set or change the style of all the elements
echo '<style type="text/css">
.avatar_column
{
border: 0;
}
.avatar_column td
{
height: 100px;
width: 100px;
overflow: hidden;
text-align: center;
vertical-align: top;
}
.default
{
border: 2px solid black;
}
.he
{
border: 2px solid blue;
}
.she
{
border: 2px solid pink;
}
</style>';

/* ###  END CONFIGURATION OPTIONS  ### */

// Load all users who have logged in within $timelimit
$result = db_query("
SELECT mem.ID_MEMBER, mem.showOnline, mem.lastLogin, mem.realName, mem.avatar, mem.gender, a.ID_ATTACH, a.attachmentType, a.filename
FROM ({$db_prefix}members as mem)
LEFT JOIN {$db_prefix}attachments AS a ON (a.ID_MEMBER = mem.ID_MEMBER)
WHERE mem.lastLogin > (UNIX_TIMESTAMP() - $timelimit)
ORDER BY mem.lastLogin DESC", __FILE__, __LINE__);

$users = array();

// Loop through the results to display the users avatar
while ($row = mysql_fetch_assoc($result))
{
    $users[$row['ID_MEMBER']] = array (
    'id' => $row['ID_MEMBER'],
    'href' => $scripturl.'?action=profile;u='.$row['ID_MEMBER'],
    'name' => $row['realName'],
    'show' => $row['showOnline'],
'gender' => $row['gender'],
    'avatar' => array(
    'image' => $row['avatar'] == '' ? ($row['ID_ATTACH'] > 0 ? 'src="' . (empty($row['attachmentType']) ? $scripturl . '?action=dlattach;attach=' . $row['ID_ATTACH'] . ';type=avatar' : $modSettings['custom_avatar_url'] . '/' . $row['filename']) . '" alt="" border="0" width="'.$width.'" height="'.$height.'" title="'.$row['realName'].'" />' : '') : (stristr($row['avatar'], 'http://') ? 'src="' . $row['avatar'] . '" alt="" border="0" width="'.$width.'" height="'.$height.'" title="'.$row['realName'].'" />' : 'src="' . $modSettings['avatar_url'] . '/' . htmlspecialchars($row['avatar']) . '" alt="" border="0" width="'.$width.'" height="'.$height.'" title="'.$row['realName'].'" />'),
    ),
    );
}

mysql_free_result($result);

echo '
<table class="avatar_column">
<tr>';

$counter = 0;

foreach ($users as $user)
{
if ($user['show'] == 1)
{
switch ($user['gender'])
{
case 0:
$css = "default";
break;
case 1:
$css = "he";
break;
case 2:
$css = "she";
break;
}
if ($counter < $columns)
{
echo '
    <td>',empty($user['avatar']['image']) ? '<a href="'.$user['href'].'"><img class="'.$css.'" src="'.$settings['images_url'].'/default_avatar.gif" width="'.$width.'" height="'.$height.'" alt="" title="'.$user['name'].'" /></a><h6>'.$user['name'].'</h6></td>' : '<a href="'.$user['href'].'"><img class="'.$css.'" '.$user['avatar']['image'].'</a><h6>'.$user['name'].'</h6></td>';
    $counter++;
}
else
{
echo '
</tr>
<tr>
<td>',empty($user['avatar']['image']) ? '<a href="'.$user['href'].'"><img class="'.$css.'" src="'.$settings['images_url'].'/default_avatar.gif" width="'.$width.'" height="'.$height.'" alt="" /></a><h6>'.$user['name'].'</h6></td>' : '<a href="'.$user['href'].'"><img class="'.$css.'" '.$user['avatar']['image'].'</a><h6>'.$user['name'].'</h6></td>';
$counter = 1;
}
}
}

echo '
</tr>
</table>';


This next bit of code creates a single row with the avatars scrolling to the left. There is no column configuration for this code as it will scroll all the online users within the configurable time limit to scroll in the block.

Code Select Expand

global $memberContext, $db_prefix, $scripturl, $modSettings;

/* ###  CONFIGURATION OPTIONS  ### */
// Set time limit using seconds
// 1 hour = 3600
// 1 day = 84600
$timelimit = 3600;

// Set the height and width of avatars
// This will resize the avatars to be more uniform
$width = "40px";
$height = "40px";

// Set or change the style of all the elements
echo '<style type="text/css">
.avatar_column
{
border: 0;
}
.avatar_column td
{
height: 60px;
width: 60px;
overflow: hidden;
text-align: center;
vertical-align: top;
}
.default
{
border: 2px solid black;
}
.he
{
border: 2px solid blue;
}
.she
{
border: 2px solid pink;
}
</style>';

/* ###  END CONFIGURATION OPTIONS  ### */

// Load all users who have logged in within $timelimit
$result = db_query("
SELECT mem.ID_MEMBER, mem.showOnline, mem.lastLogin, mem.realName, mem.avatar, mem.gender, a.ID_ATTACH, a.attachmentType, a.filename
FROM ({$db_prefix}members as mem)
LEFT JOIN {$db_prefix}attachments AS a ON (a.ID_MEMBER = mem.ID_MEMBER)
WHERE mem.lastLogin > (UNIX_TIMESTAMP() - $timelimit)
ORDER BY mem.lastLogin DESC", __FILE__, __LINE__);

$users = array();

// Loop through the results to display the users avatar
while ($row = mysql_fetch_assoc($result))
{
    $users[$row['ID_MEMBER']] = array (
    'id' => $row['ID_MEMBER'],
    'href' => $scripturl.'?action=profile;u='.$row['ID_MEMBER'],
    'name' => $row['realName'],
    'show' => $row['showOnline'],
'gender' => $row['gender'],
    'avatar' => array(
    'image' => $row['avatar'] == '' ? ($row['ID_ATTACH'] > 0 ? 'src="' . (empty($row['attachmentType']) ? $scripturl . '?action=dlattach;attach=' . $row['ID_ATTACH'] . ';type=avatar' : $modSettings['custom_avatar_url'] . '/' . $row['filename']) . '" alt="" border="0" width="'.$width.'" height="'.$height.'" title="'.$row['realName'].'" />' : '') : (stristr($row['avatar'], 'http://') ? 'src="' . $row['avatar'] . '" alt="" border="0" width="'.$width.'" height="'.$height.'" title="'.$row['realName'].'" />' : 'src="' . $modSettings['avatar_url'] . '/' . htmlspecialchars($row['avatar']) . '" alt="" border="0" width="'.$width.'" height="'.$height.'" title="'.$row['realName'].'" />'),
    ),
    );
}

mysql_free_result($result);

echo '
<marquee direction="left">
<table class="avatar_column">
<tr>';

foreach ($users as $user)
{
if ($user['show'] == 1)
{
switch ($user['gender'])
{
case 0:
$css = "default";
break;
case 1:
$css = "he";
break;
case 2:
$css = "she";
break;
}
echo '
<td>',(empty($user['avatar']['image']) ? '<a href="'.$user['href'].'"><img class="'.$css.'" src="'.$settings['images_url'].'/default_avatar.gif" width="'.$width.'" height="'.$height.'" alt="" title="'.$user['name'].'" /></a><h6>'.$user['name'].'</h6>' : '<a href="'.$user['href'].'"><img class="'.$css.'" '.$user['avatar']['image'].'</a><h6>'.$user['name'].'</h6>'),'</td>';

}
}

echo '
</tr>
</table>
</marquee>';

[fl4pj4ck]

not working, showing all avatars instead

[IchBin]

Do you mean it's showing all users?

--edit--

Bah... I just realized I left the query messed up from testing it.. Will fix it as soon as I get some things done today.

[IchBin]

Ok that should work now. I forgot to mention I put in the default avatar. You can rename it if you need. This snippet expects a default_avatar.gif to be in the images folder of any theme that you're using.

[fl4pj4ck]

almost perfect, but it needs some polishing. i.e. what if the avatars have different sizes? could you please update it with "height" and "width" options? trier it myself and with this code:

--remove code by IchBin--

looks like this (see pic attached), for some reason not all pics are resized, can you help me with that?

[JPDeni]

You misspelled "height".

Code Select Expand


'<img width=35 heigth=35


should be

Code Select Expand


'<img width=35 height=35


[IchBin]

Thanks Deni.

I'll add the height and width to the settings for a better all around look by default.

I've updated the first post.

[fl4pj4ck]

didnt help too much:

EDIT: wokrs ok now, I have pasted the wrong code

thanks guys

[fl4pj4ck]

TWO more things: the default avatar is not being resized and the default avatar is not clickable

any chance of updating the code with different colours for names for males/females?

[IchBin]

Default avatar size and linking is fixed. How about you take a bit and think about what you want this snippet to do. I can't spend all my time coming back and forth adding features as they come to you. Let me know what you want out of this code so I can do it, and then be done with it. Thanks.

I'm also removing the code that you posted above. I'd like to keep the code posted in the first post to keep the topic cleaned up so users don't get confused when searching in here.