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.

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 : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

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 : 15029
Reputation : 1680
Language : English,Greek
Location : Greece

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