Latest topics
» "Edit this page" feature
by skouliki Today at 01:36

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Tue 17 Oct 2017, 15:07

» Dark Mode + Another Question
by Ace 1 Tue 17 Oct 2017, 12:42

» [GAME] What are you thinking right now?
by Ace 1 Tue 17 Oct 2017, 08:09

» [GAME] Count to One Million!
by Ace 1 Tue 17 Oct 2017, 08:07

» [GAME] Last Letter Game
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] World Snake
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Never have I ever..
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Animal Game
by universecat Mon 16 Oct 2017, 21:43

» [GAME] Post a random picture
by SLGray Mon 16 Oct 2017, 16:28

» Hi everyone!
by skouliki Mon 16 Oct 2017, 02:01

» Hai Guys~
by skouliki Mon 16 Oct 2017, 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

» Chit Chat Thread
by Ange Tuteur Sat 14 Oct 2017, 11:20

Recent Tutorials
Who is online?
In total there are 15 users online :: 0 Registered, 0 Hidden and 15 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Display the user avatar before mentions

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 11 Mar 2016, 10:04

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() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t399-display-the-user-avatar-before-mentions#3207';
 
  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 ! Thumb left


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


Last edited by Ange Tuteur on Tue 05 Jul 2016, 09:37; edited 5 times in total
avatar
Van-Helsing

Title :
Coding Expert.
I.T Manager.
Web Developer.
Gender : Male
Age : 43
Posts : 844
Points : 2436
Reputation : 78
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Fri 11 Mar 2016, 11:35

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

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 11 Mar 2016, 11:46

@Dark-Avenger No problem, I'm glad you like it ! Very Happy
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4730
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Fri 11 Mar 2016, 14:31

Thanks for the neat tutorial. I am going to try it on both of my forums now.
avatar
mimóza
New Member
Title :
Gender : Unspecified
Posts : 2
Points : 594
Reputation : 4
Language : English, Hungarian
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile http://www.graphicballoon.com/

Postmimóza on Sat 12 Mar 2016, 11:37

Wow, this is sooo great! Thank you so much! 
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4730
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Sat 12 Mar 2016, 14:22

I am using it on both of my forums. They looking great in posts.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 12 Mar 2016, 17:57

You're welcome guys, I'm happy you like it ! ^^
avatar
SarkZKalie
Member
Title :
Exodia the Forbidden One
Gender : Male
Age : 26
Posts : 22
Points : 1396
Reputation : 11
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostSarkZKalie on Sat 12 Mar 2016, 21:27

You always surprise us w your best code, Katty Twisted Evil
Thank you @Ange Tuteur !
avatar
Luke Spike
New Member
Title :
Design Addict
Gender : Male
Posts : 9
Points : 995
Reputation : 0
Location : Paradise
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostLuke Spike on Fri 25 Mar 2016, 21:06

Does this work for PunBB?
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2447
Points : 4730
Reputation : 286
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Fri 25 Mar 2016, 22:48

Luke Spike wrote:Does this work for PunBB?
Yes since the tutorial does not specifically state a version.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 26 Mar 2016, 11:08

@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.
avatar
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 31
Posts : 868
Points : 2230
Reputation : 124
Language : Filipino and Engrish
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://generalaxis.forums.com.bz/

PostWilson on Thu 31 Mar 2016, 13:34

A good addition indeed. Thank you for this Ange!

--------

A banana a banana does not banana doctor banana. -Poetic
avatar
Niko!

Title :
Cookies-eater
Gender : Male
Age : 21
Posts : 98
Points : 1643
Reputation : 51
Location : Milan, Italy
Language : Italian, English, French,
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile https://www.translationscloud.com https://www.facebook.com/TranslationsCloud https://twitter.com/TranslaCloud https://pinterest.com/translacloud

PostNiko! on Thu 07 Apr 2016, 14:44

Of course I am using this

--------

avatar
Ape

Title :
Gender : Male
Posts : 131
Points : 1429
Reputation : 26
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://missingpeople.darkbb.com

PostApe on Sun 15 May 2016, 14:00

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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 15 May 2016, 21:27

@Ape of course, you can use the
Code:
.mentiontag
class. Wink

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;
}
avatar
Ape

Title :
Gender : Male
Posts : 131
Points : 1429
Reputation : 26
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://missingpeople.darkbb.com

PostApe on Mon 16 May 2016, 07:54

perfect Smile Thank you Very good
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 16 May 2016, 11:27

Ape wrote:perfect Smile Thank you Very good
Anytime. Doff
avatar
Guest
Guest
View all awards

PostGuest on Sat 03 Dec 2016, 07:59

Nice! Installed & works with Edge.

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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