Avatar of who last posted on the index

Hello everyone,

Here is a tutorial to display the avatar of the member who last posted on the index of your forum !


 ATTENTION 
This will not work for members with an outdated browser

2. The Javascript code :

Administration Panel > Modules > HTML & Javascript > Javascript codes management > Create a new script :

Title : Avatar in the index
Placement : In the home page
Paste the following code and save :
Code:  Select Content

Code:

        $(function(){
         
          if(!window.localStorage) return;
         
          // Avatar by default
            var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
         
          // Time of cache, here : 24hrs * 60m * 60s * 1000ms so one day
            var caching_time= 24*60*60*1000;
         
          // Time of cache in case of error, here : 60s * 1000ms so one minute
            var caching_error= 60*1000;
         
          var set_avatar= function(id) {
                $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
            };
         
          var get_avatar= function(id) {
                if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
                {
                    localStorage.setItem('d_ava'+id, default_avatar);
                    $.get('/u'+id, function (d){
                        localStorage.setItem('t_ava'+id,+new Date);
                        localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                        set_avatar(id);
                    });
                }
                return localStorage.getItem('d_ava'+id);
            };
         
          var to_replace= {};
         
          $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
                to_replace[$(this).attr('href').substr(2)]= 1;
                $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
            });
         
          for(i in to_replace)
            {
                set_avatar(i);
            };
         
      });

3. The CSS code :

Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet

Paste the following code into your sheet and submit. This will help resize the image, and position it properly in the last post.
Code:  Select Content

Code:

.mini_ava{
float:left;
}
.mini_ava img{
width:40px;
height:40px;
margin: 0 5px;
}

You can personalize the code by adding a border, colors..

and it's finished ! 

Phương pháp trên có điểm yếu là chỉ hiện ở diễn đàn chính:


Diễn đàn thứ cấp thì không hiển thị:


Riêng phương pháp dưới đây thì bảo đảm hiển thị tốt tại mọi vị trí:

Cài đặt: Vào ACP>>Display>>Structure & hierarchy>>Hierarchy>>"Show avatars in the column Last posts">>Yes

Title lenght of the last topic: 20

Kết quả:

Lưu ý: Đối với các templates đã chỉnh sửa cần thay đổi cấu trúc như hướng dẫn sau để cập nhật trên có tác dụng. 

PhppBB2

Tìm trong index_box:

Code:

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>

thay bằng:

Code:

<!-- BEGIN avatar -->
<div style="width: 200px;"></div>
<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>

Tìm trong topics_list_box:

Code:

<span
class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br
/>{topics_list_box.row.LAST_POST_AUTHOR}
{topics_list_box.row.LAST_POST_IMG}</span>

thay bằng:

Code:

<!-- BEGIN avatar -->
<div style="width: 200px;"></div>
<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->

<span
 class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br
/>{topics_list_box.row.LAST_POST_AUTHOR}
{topics_list_box.row.LAST_POST_IMG}</span>

PunBB

Tìm trong index_box:

Code:

<span>
<!-- BEGIN switch_topic_title -->
<a
href="{catrow.forumrow.U_LATEST_TOPIC}"
title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br
 />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>

thay bằng:

Code:

<!-- BEGIN avatar -->
<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->

<span>
<!-- BEGIN switch_topic_title -->
<a
 href="{catrow.forumrow.U_LATEST_TOPIC}"
title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br
 />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>

Tìm trong topics_list_box:

Code:

{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY}
{topics_list_box.row.LAST_POST_AUTHOR}
{topics_list_box.row.LAST_POST_IMG}

thay bằng:

Code:

<!-- BEGIN avatar -->
<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->

{topics_list_box.row.LAST_POST_TIME}
 {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR}
{topics_list_box.row.LAST_POST_IMG}

Chỉnh lại CSS

  Admin panel>>Display>>Colors>>CSS

 Nếu "Desactivate the basic CSS    YES bạn phải chỉnh lại CSS

 Nếu "Desactivate the basic CSS    NO bạn không phải chỉnh lại CSS


VERSION LTR (css.tpl) :

Code:

.lastpost-avatar {
float: left;
padding: 2px;
}
.lastpost-avatar img {
width: 38px;
height: 38px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}