Display the user avatar before mentions

This small plugin will allow you to show the avatar of the user you mentioned on the forum. The avatar will show either before or after the mention depending on your preferences.

Click to view demo

Installation

To install this plugin go to Modules > JavaScript codes management and create a new script with the following settings.

Tittle : Mention Avatar
Placement : In all the pages ( or "In the topics" if you want it to only work in topics )
Paste the script below and click save :

Code:

(function() {
  window.faMentionAvatar = {
    // position modifies the position of the avatar
    // 0 = before mention
    // 1 = after mention
    position : 0,
    cacheTime : 1*60*60*1000, // amount of time the avatar is cached ( 1 hour )
   
    mentions : null, // mention node list
    index : -1, // current index in the mentions array
   
    // checks if the mention is valid and then gets the avatar
    getter : function() {
      var mention = faMentionAvatar.mentions[++faMentionAvatar.index],
          storage = window.localStorage,
          id;
         
      if (mention) {
        id = mention.href.replace(/.*?\/u/, '');
       
        if (storage && storage['mentionAvatar_' + id] && storage['mentionAvatar_' + id + '_exp'] > +new Date - faMentionAvatar.cacheTime) {
          var avatar = document.createElement('IMG');
          avatar.className += ' mention-ava';
          avatar.src = storage['mentionAvatar_' + id];
          faMentionAvatar.position ? mention.appendChild(avatar) : mention.insertBefore(avatar, mention.firstChild);
          faMentionAvatar.getter();
        } else {
          $.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
            var avatar = $('.tooltip-content > img', d)[0];
               
            if (avatar) {
              faMentionAvatar.position ? mention.appendChild(avatar) : mention.insertBefore(avatar, mention.firstChild);
             
              if (storage) {
                storage['mentionAvatar_' + id] = avatar.src;
                storage['mentionAvatar_' + id + '_exp'] = +new Date;
              }
            }
            faMentionAvatar.getter();
          });
        }
      }
    }
  };
 
  // write the stylesheet into the HEAD section
  document.write('<style type="text/css">.mentiontag img { height:20px; width:20px; vertical-align:middle; border-radius:100px; background:#FFF; box-shadow:0px 1px 1px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3); margin:1px 3px; padding:1px; }</style>');
 
  // statements that need execution when the document is ready
  $(function() {
    faMentionAvatar.mentions = $('.mentiontag');
    faMentionAvatar.getter();
  });
}());

Once the script is saved go to a topic that someone was mentioned in and you should see their avatar before the mention ! If you'd like to change the position of the avatar please see the modifications section.

Modifications

There are only a few modifications for this plugin which should be easy to understand and edit.

position : At the top of the script you'll see a variable titled "position", this variable modifies the position of the avatar. If you'd like the avatar after the mention change the 0 to a 1 and you'll be set. Change it back to 0 if you want the avatar before the mention. I left a comment in the script as a reminder.

cacheTime : This option influences the amount of time that the avatars are cached. By default the avatars are cache for 1 hour (

Code: 1*60*60*1000

), modify the value of this option if you want to change the cache time. This is primarily meant for performance purposes so that multiple requests don't have to be submitted for the same user. In short ; it makes the script run faster.

style : The style of the avatar is influenced by this line in the script :

Code:

document.write('<style type="text/css">.mentiontag img { height:20px; width:20px; vertical-align:middle; border-radius:100px; background:#FFF; box-shadow:0px 1px 1px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3); margin:1px 3px; padding:1px; }</style>');

What this line does is write a small stylesheet into the HEAD section of the document. You can modify this CSS to change the size, color, margin, etc.. of the avatar. This is the unminified CSS to make editing easier :

Code:

.mentiontag img {
  height:20px;
  width:20px;
  vertical-align:middle;
  border-radius:100px;
  background:#FFF;
  box-shadow:0px 1px 1px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3);
  margin:1px 3px;
  padding:1px;
}

If you have any questions or comments please feel free to leave them below. Enjoy !

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

Hello,
Very nice code @Ange Tuteur thank you very mych. Another perfect code by Ange.

@Dark-Avenger No problem, I'm glad you like it !

Thanks for the neat tutorial. I am going to try it on both of my forums now.

Wow, this is sooo great! Thank you so much! 

I am using it on both of my forums. They looking great in posts.

You're welcome guys, I'm happy you like it ! ^^

You always surprise us w your best code, Katty
Thank you @Ange Tuteur !

Does this work for PunBB?

Luke Spike wrote:Does this work for PunBB?

Yes since the tutorial does not specifically state a version.

@Luke Spike it's as SLGray says ; It'll work on any version, because the class

Code: .mentiontag

is now present on all mentions after this update.

A good addition indeed. Thank you for this Ange!

Of course I am using this 

I love this cool system looks so cool just one thing is there away to add a small code to this so when you Tag some one in the post it puts a box around the Avatar and the name like this

@Ape of course, you can use the

Code: .mentiontag

class.

Here's an example CSS rule :

Code:

.mentiontag {
  background:rgba(0, 0, 0, 0.05);
  border:1px solid rgba(0, 0, 0, 0.1);
  border-radius:3px;
  display:inline-block;
  padding:1px 3px;
  margin:1px;
}

perfect Thank you

Ape wrote:perfect Thank you

Anytime.

Nice! Installed & works with Edge.