Adding Avatars from phpbb forum and pulling..

mp777
2012-01-12
2013-04-05
  • mp777
    mp777
    2012-01-12

    I have Ajax integrated with my phpbb forum. Is it possible to have Ajax Chat use avatars pulled from a phpbb forum and resized smaller so they appear next to the user names? Haven't figured out how to do this yet. Anybody have success?

    Also I have placed the chatroom at the bottom (registered users are auto-logged in) of the forum, placed in an <iframe> tag in the overallfooter.html … Normally when i click on a post or subforum, it jumps to the TOP of the forum. But now it always defaults by pulling focus down to the chatroom text input box at the BOTTOM. Any way to remedy this?

    Thanks fo your help!

     
  • YIFY
    YIFY
    2012-01-28

    you can add images to the users in the chat.js file (chat/js/chat.js)

    Have the images saved in a folder each named with the username (or better yet userID  e.g. 14213321.png)

    now go ahead and edit the "getChatListMessageString: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip)" section with:
    added a few comments to help better understand this.

            //Checks if the user is chatbot
            if (userName == 'ChatBot'){
                //Places the chatbot avatar in the variable
                var AvatarPic = '<img src="img/chatbot.png"></img> ';
            }
            else{
                //Places the UNIQUE user avatar in the variable
                //outcome of this will be: <img title="UniqueUserName" alt="UniqueUserName" src="img/userID.png"></omg>
                var AvatarPic = '<img title="'
                            + userName
                            +'" alt="'
                            + userName
                            + '" src="img/'
                            + userID
                            +'.png"></img> ';
            }
    
            //Here is where everything is written to chat           
            return  '<div id="'
                    + this.getMessageDocumentID(messageID)
                    + '" class="'
                    + rowClass
                    + '">'
                    + this.getDeletionLink(messageID, userID, userRole, channelID)
                    + dateTime
                    //This is where the Avatar Line is inserted (just before the AjaxChat username
                    + AvatarPic         
                    + '<span class="'
                    + userClass
                    + '"'
                    + this.getChatListUserNameTitle(userID, userName, userRole, ip)
                    + ' dir="'
                    + this.baseDirection
                    + '" onclick="ajaxChat.insertText(this.firstChild.nodeValue);">'
                    + userName
                    + '</span>'
                    + colon
                    + this.replaceText(messageText)
                    + '</div>';
    

    Hope this helps

     
  • YIFY
    YIFY
    2012-01-28

    For some reason above post formatting came up all weird here is the same code but just better formatting:

    http://pastebin.com/RD0y4Ksu

     
  • scottishduck
    scottishduck
    2012-03-06

    that code seems to work great…

    but how would I include a default avatar for guest users … unregistered ones.

    I've played around with

     if (userRole == 'AJAX_CHAT_USER')
    

    to no avail. Maybe I'm not nesting my if/then statements correctly… but i've tried a lot of permutations and cannot get it to work.

     
  • YIFY
    YIFY
    2012-03-06

    I have modified the above code to include a default;t pic for guests which will be 'guest.png'

    here is a complete new code INCLUDING the guest avatar

    http://pastebin.com/7aK9QP4X

    This is what I added:

    //Checks if the user is a guest
    else if(userRole == 0){
            //uses the guest,png avatar
    var AvatarPic = '<img src="img/guest.png"></img> ';
    }

     
  • scottishduck
    scottishduck
    2012-03-06

    I swore I tried that…

    something that seems to be an issue though, when using the avatars, the autoscroll doesn't go all the way to the bottom of the chat for some reason. no idea why, as i'm somewhat new to this type of coding.

     
  • YIFY
    YIFY
    2012-03-06

    I dont think its due to the avatar add-on because this happens to many other people using ajax chat on a webkit browser like chrome who dont modify their chat at all.

    Reading these forums I have found many have that issue but no solution yet. :(

     
  • scottishduck
    scottishduck
    2012-03-06

    thank you so much for the information.

    The reason I brought it up is that without the avatar add-on, it seems to autoscroll pretty well (at least within a line or two).

    With the avatar code in there, on new messages refresh the chat to the middle of the page.

    I am on Chrome, W7 64-bit.


    But I will play around a bit. :-)

     
  • scottishduck
    scottishduck
    2012-03-06

    works beautifully in IE, competently in firefox (after the initial load to the middle), but keeps reloading to the middle in Chrome…

    I'll keep messing around.

    Also, the avatar code works great. THANK YOU!!!

     
  • scottishduck
    scottishduck
    2012-03-07

    Two things to make this avatar code better:

    1 - Add a class to the image, "avatar"

    For the chatbot/guest image:

    var AvatarPic = '<img class="avatar" src="img/chatbot.png"></img> ';
    

    for the user images:

    var AvatarPic = '<img class="avatar" title="'
                            + userName
                            +'" alt="'
                            + userName
                            + '" src="img/'
                            + userID
                            +'.png"></img> ';
    

    This will allow you to add to your CSS to make the images automatically resize (so you don't have to size the avatar images yourself).

    To do the resizing, in your css, add this:

    #content #chatList .avatar {
            max-height: 35px;
            height: expression(this.height > 35 ? "35px" : true);
        }
    

    You could also do the same with the width if you prefer. Or if you want to directly size them, remove "max-" and set the absolute sizes for both.

    2 - adding avatar to online users list

    In addition to making the avatars resize themselves (and saving you work) You can use the same code/images to place avatars in the "online users" list.

    In order to add the avatars to the online list, you use the same exact codes above, but place them in a different spot in the code.

    In your css, to make a smaller avatar than the chat avatar:

    #content #onlineListContainer .avatar {
            max-height: 15px;
            height: expression(this.height > 15 ? "15px" : true);
        }
    

    In the chat.js file (same as above), find

    getUserNodeString: function(userID, userName, userRole) {
    

    at about line1000 or so.

    add in the code above as follows (new code in bold):

        getUserNodeString: function(userID, userName, userRole) {
            if(this.userNodeString && userID == this.userID) {
                return this.userNodeString;
            } else {
                var encodedUserName = this.scriptLinkEncode(userName);
                [b]//Checks if the user is chatbot
            if (userName == 'Pay4Play Bot'){
                //Places the chatbot avatar in the variable
                var AvatarPic = '<img class="avatar" src="img/chatbot.png"></img> ';
            }
            //Checks if the user is a guest
            else if(userRole == 0){
                var AvatarPic = '<img class="avatar" src="img/guest.png"></img> ';
            }
            else{
                //Places the UNIQUE user avatar in the variable
                //outcome of this will be: 
                //<img title="UniqueUserName" alt="UniqueUserName" src="img/userID.png"></img>
                var AvatarPic = '<img class="avatar" title="'
                            + userName
                            +'" alt="'
                            + userName
                            + '" src="img/'
                            + userID
                            +'.png"></img> ';[/b]
            }   
                var str = '<div id="'
                        + this.getUserDocumentID(userID)
                        + '"><a href="javascript:ajaxChat.toggleUserMenu(\''
                        + this.getUserMenuDocumentID(userID)
                        + '\', \''
                        + encodedUserName
                        + '\', '
                        + userID
                        + ');" class="'
                        + this.getRoleClass(userRole)
                        + '" title="'
                        + this.lang['toggleUserMenu'].replace(/%s/, userName)
                        + '">'
                        [b]+AvatarPic[/b]
                        + userName
                        + '</a>'
                        + '<ul class="userMenu" id="'
                        + this.getUserMenuDocumentID(userID)
                        + '"'
                        + ((userID == this.userID) ?
                            '>'+this.getUserNodeStringItems(encodedUserName, userID, false) :
                            ' style="display:none;">')
                        + '</ul>'
                        +'</div>';
                if(userID == this.userID) {
                    this.userNodeString = str;
                }
                return str; 
            }
        },
    
     
  • pastorvictor
    pastorvictor
    2013-02-10

    Thank you so much for this code!! This is exactly what I was looking for :D

     
    Last edit: pastorvictor 2013-02-10
  • pastorvictor
    pastorvictor
    2013-02-11

    Hey, I have a big issue now. I assigned badges to my staff, but now every other registered user has a "broken image" icon next to them. Do I have to add icons for every registered user??

     
  • ~cXc~
    ~cXc~
    2013-02-14

    Solved at Google Group :)