Avatar in the Recent Topics

Hi!

I used this tutorial by @ange tuteur and I would like to know If it's possible to put the avatar somewhere else below recent topics.
Forum version: phpBB2 ^^

Where would you like them?

Hey SLGray!

I really would like to put them near the text (for exaple: click)
Is it possible?

So you do not want to place them in a different place on the forum, but change where they are in the latest topic column?

Exactly!

Please post your forum's link.

Search and remove this line in your index_box template

Code:

<div style="width: 200px;"></div>

And you should merge Topis and Posts in one row, will save more space for Last Posts.

Hi Wolfuryo!

Forum link: click

Did @SarkZKalie's solution solved your problem?

EDIT:Replace the JS code you use with this one:

Code:

        $(function(){
          var style = document.createElement('STYLE'), css = '.mini_ava2>img{height:20px;margin-right:5px;width:20px;}';
          style.type = 'text/css';
          if (style.styleSheet) style.styleSheet.cssText = css;
          else style.appendChild(document.createTextNode(css));
          document.getElementsByTagName('HEAD')[0].appendChild(style);
           
              if(!window.localStorage) return;
           
              // Default avatar
                var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
           
              // Time of cache 24h*60m*60s*1000ms - one day
                var caching_time= 24*60*60*1000;
           
              // Time of cache in case of error 60s*1000ms - one minute
                var caching_error= 60*1000;
           
              var set_avatar= function(id) {
                    $('.mini_ava2.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= {};
           
              $('#recentTopics a[href^="/u"]').each(function(){
                    to_replace[$(this).attr('href').substr(2)]= 1;
                    $(this).parent().before('<span class="mini_ava2 member'+$(this).attr('href').substr(2)+'"></span>');
                });
           
              for(i in to_replace)
                {
                    set_avatar(i);
                };
           
          });

Add this code to your css:

Code:

div#recentTopics>table>tbody>tr>td.row1>*{
display:inline-table;
}
div#recentTopics>table>tbody>tr>td.row1>span.gensmall{
width:80%;
}
div#recentTopics>table>tbody>tr>td.row1>span.mini_ava2{
position:relative;
vertical-align:middle;
top:13px;
}

No because he is talking about last post but I need help in customizing Recent topics/Latest topics widget.

I used the codes and this happend: click

Up!

I still need help

Another issue: when I log out only default avatar shows up click

java:

Code:

  $(function(){
  var style = document.createElement('STYLE'), css = '.mini_ava2>img{object-fit: cover;object-position: 50% 25%;border-radius: 100%;margin-right: 5px;height: 30px;margin-right: 5px;width: 30px;margin-top: -2px;float: left;}';
  style.type = 'text/css';
  if (style.styleSheet) style.styleSheet.cssText = css;
  else style.appendChild(document.createTextNode(css));
  document.getElementsByTagName('HEAD')[0].appendChild(style);
   
      if(!window.localStorage) return;
   
      // Default avatar
        var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
   
      // Time of cache 60s*1000ms - one day
        var caching_time= 1*1000;
   
      // Time of cache in case of error 60s*1000ms - one minute
        var caching_error= 1*1000;
   
      var set_avatar= function(id) {
            $('.mini_ava2.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= {};
   
      $('#recentTopics a[href^="/u"]').each(function(){
            to_replace[$(this).attr('href').substr(2)]= 1;
            $(this).before('<span class="mini_ava2 member'+$(this).attr('href').substr(2)+'"></span>');
        });
   
      for(i in to_replace)
        {
            set_avatar(i);
        };
   
  });

This happens because guests cannot view profiles on your forum, so the code cannot get the avatar.

Now guest can see the profile too but avatars still don't work in Google Chrome. Any other ideas?