Долгое время собирался копнуть левый сайдбар движка на предмет «как оно вообще работает».
Хорошим мотивом в этом благом начинании послужила мне моя навязчивая идея улучшить дефолтный вариант вывода аватарок недавних посетителей и информации к ним.
Подумал, что как-то не эргономично… пропадает много места. Мне показалось будет более аккуратно, если выводить список аватаров не в одну колонку, как сейчас, а в три (четыре, пять… как угодно вобщем).



При этом всю информацию (ник, имя, статус, время) можно выводить средствами jQuery в небольшом прозрачном окне (по событию — наведению курсора мыши). Наверное на этом можно ставить кат и дальше переходить непосредственно к коду.


Посколько со Smarty я почти не был знаком до сегодняшнего дня, пришлось искать информацию (очень помог этот сайт).
Получилось вроде интересно, потому спешу поделиться результатами своего эксперимента с вами.

План будет такой:
Нужно добавить скрипт, который будет обрабатывать тайтл картинки (аватары) и выводить информацию из него в виде всплывающего окошка. Можно для этой цели использовать такую штуку, которая называется tooltip, но я нашел в сети более простое решение для jQuery. Далее нужно осуществить вывод аватар в три колонки и добавить в тайтл каждой информацию (ник, имя, статус, время). Все просто. Итак.

1. Первое что мы сделаем, это добавим в файл sample.header.tpl следующий скрипт:

1.  
2. <script language="JavaScript" type="text/javascript">
3. {literal}
4. function simple_tooltip(target_items, name){
5.  $(target_items).each(function(i){
6.  $("body").append("<div class='"+name+"' id='"+name+i+"'><div>"+$(this).attr('title')+"</div></div>");
7.  var my_tooltip = $("#"+name+i);
8.  
9.  $(this).removeAttr("title").mouseover(function(){
10.  my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(100);
11.  }).mousemove(function(kmouse){
12.  my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
13.  }).mouseout(function(){
14.  my_tooltip.fadeOut(100);
15.  });
16.  });
17. }
18. $(document).ready(function(){
19.  simple_tooltip(".title_img","tooltip");
20. });
21. {/literal}     
22. </script>
23.  

Вот этот код

1. simple_tooltip("img.title_img","tooltip");

в частности значение img.title_img — отвечает за то, какие именно картинки будут иметь на вашем сайте красивый всплывающий тайтл. Таким образом, добавив:

1. class="title_img"

к нужному изображению, получим такое же окошко, как у аватаров… но это лирика, возвращаюсь к сабжу.


2. Теперь нужно добавить в файл стиля вашей темы base.css следующий код:

1.  
2. .tooltip {
3.  position:absolute;
4.  z-index:999;
5.  left:-9999px;
6.  background-color:#dedede;
7.  padding:5px;
8.  border:1px solid #fff;
9.  width:170px;
10.  display:none
11.  }
12.  
13. .tooltip div{
14.  margin:0;
15.  padding:0;
16.  color:#333;
17.  background-color:#fff;
18.  padding:5px 7px 5px 10px;
19. }
20.  

3. Создаем файл (если у вас его еще нет) в папке samples/ с именем user_online.php:

1.  
2. <?php
3. require_once('system/mappers/users.mysql.mapper.php');
4. $oUsersMapper = new Users_MySQLMapper(System_Database::getInstance('site'));
5. $oSettings->setJs($oSettings->getPathWeb().'/js/users.js');
6.  
7. $aCollectionOnLineRes = $oUsersMapper->getCollectionOnLine(18);
8. $oSmarty->assign('aCollectionOnLine', $aCollectionOnLineRes['aCollection']);
9.  
10.  
11. ?>
12.  

Не трудно догадаться, что число 18 отвечает за кол-во выводимых аватаров.

4. Создаем (если такового нет) файл sample.user_online.tpl в папке themes/default/templates/, или меняем код файла на следующий:

1.  
2. <div style="padding: 10px 0 0 10px">
3. <table cellspacing="3px" cellpadding="0" border=0 >
4. <tr>
5.                                
6.         {assign var=col value=4} {*Количество колонок в таблице*}             
7.  
8.         {section name=oUser loop=$aCollectionOnLine}
9.                        
10.         {if $col == "4"}
11.             </tr><tr>{assign var="col" value="0"}
12.         {/if}  
13.                
14.         {if $aCollectionOnLine[oUser]->getAvatarExt()} 
15.         <td align="left" style="padding: 0 0 7px 5px" width="55px">
16.         <a class="gray" href="{$oRouter->getPathWeb()}/profile/{$aCollectionOnLine[oUser]->getLogin()}/">
17.         <img src="{$oRouter->getPathWeb()}/uploads/users/{$aCollectionOnLine[oUser]->getId()}/avatar_medium.{$aCollectionOnLine[oUser]->getAvatarExt()}" width="50px" height="50px" border="0" class="title_img" title="<b>{$aCollectionOnLine[oUser]->getLogin()}{if $aCollectionOnLine[oUser]->getName()} ({$aCollectionOnLine[oUser]->getName()}){/if}</b> <small>{if $aCollectionOnLine[oUser]->getUserStatus()}<br/><b>Статус</b>: {$aCollectionOnLine[oUser]->getUserStatus()} {/if}</small> <br/><b>Последний визит:</b><br/><big>{$aCollectionOnLine[oUser]->getLastTimeAsText()}</big>"></a>
18.         </td>
19.         {/if}
20.  
21.         {assign var="col" value="`$col+1`"}
22.     {/section}
23.     {assign var="remainder" value="`4-$col`"}
24.     {section name=emptyoUser loop=$remainder}
25.     <td> </td>                        
26.                                        
27.         {/section}
28.                                        
29. </tr>
30. </table>
31. <div align="right" style="padding-right:10px;"><a href="{$oRouter->getPathWeb()}/users/" border="0">Все пользователи</a></div>
32. </div>
33.  

Число 4 в данной конструкции отвечает за кол-во колонок (меняем по желанию).

5. В файле index.php, в строке:

1. $oSmarty->setSamples('left', array('small_cart', 'hot_topics_comments', 'tags_cloud', 'new_topics'));

добавляем (если нет)

1. 'user_online'

Это все. Теперь мы имеем аккуратную табличку аватарок в четыре колонки, плюс, как бонус, красивый тайтл для всех изображений сайта, которые помечены классом title_img.


Еще момент. Если присмотреться к коду файла samples/user_online.php, станет понятно, что он представляет собой небольшой кусочек кода из modules/users/index.action.php, который, в свою очередь, отвечает за вывод списка пользователей на странице сайт.ру/users/… следовательно, если взять другой небольшой кусочек этого же файла (отвечающий за сортировку по рейтингу), то можно сделать блок, который будет выводить список самых «прокачаных» пользователей сайта, аналогично блоку users_online.

Что, собственно, я для себя и сделал — топ лучших пользователей в левый сайдбар. Это оказалось довольно просто. Наверняка многие подобную штуку уже сами делали для своих проектов...
Но, тем не менее, на сайте bigstreet информации я об этом не нашел, потому если кому-то вдруг будет интересно — пишите в комментариях, дополню пост блоком топ лучших пользователей.

UPDATE
Обнаружилась неприятная бага в IE
Капризный IE помог найти ошибку в содержании title были незакрытые теги

1.  
2. <big>, <small>
3.  

Код исправил.