Hello, this tutorial will help you add the avatar of members in the recent topics widget. This is compatible with all forum versions.
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
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
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 !
|