The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Avatar in the Recent Topics

2 posters

Go down

Tutorial Avatar in the Recent Topics

Post by Ange Tuteur December 26th 2014, 3:19 pm

Avatar in the Recent Topics
Hello, this tutorial will help you add the avatar of members in the recent topics widget. This is compatible with all forum versions.

recent - Avatar in the Recent Topics Captu228


Modification of mod_recent_topics template

So, the script works without problems, you must make a small modification to the widget source. Go to Administration Panel > Display > Templates > Portal and open the template mod_recent_topics Edit

Add this to the Beginning of the template :
Code:
<div id="recentTopics">

and add this to the End of the template :
Code:
</div>

Save and publish Add


Installation

Go to Administration Panel > Modules > JavaScript codes management. Make sure JavaScript code management is enabled, then proceed to create a new script.

Title : Recent topics avatar
Placement : In all the pages
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= 'https://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).before('<span class="mini_ava2 member'+$(this).attr('href').substr(2)+'"></span>');
        });
    
       for(i in to_replace)
        {
            set_avatar(i);
        };
    
   });

Save the script, and you now have avatars in the recent topics widget ! Very good


Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile https://fmdesign.forumotion.com

poesia-verses likes this post

Back to top Go down

Tutorial Re: Avatar in the Recent Topics

Post by skouliki February 11th 2020, 6:17 pm

This code was updated to fit in with the new HTTPS address

updated 11.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 12471
Reputation : 1528
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

poesia-verses likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum