Show profile on the navigation bar

Application Result

Installation

Code:

/****
 * Application: Link and avatar in the navbar
 * Description: This application can show the link to the user's profile and avatar in the navbar.
 * Version: 1.0
 * Made and Optimizations by RafaelS. - 2018/07/06
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2018 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
 
$(function() {
if(_userdata.session_logged_in > 0) {
 
  var username = _userdata.username, userid = _userdata.user_id,navb,linkav = _userdata.avatar,prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a></li>';
  
if($('body#modernbb').length > 0) navb = '.navbar.navlinks'; // ModernBB version
else if($('td.bodyline').length > 0){navb = '.bodyline table:eq(1) tr td';prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;';} // phpBB2 version
else if($('body#phpbb').length > 0){ navb = '.navbar .linklist.navlinks';prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;</li>';} // phpBB3 version
else if($('.pun #pun-intro').length > 0)navb = '#pun-navlinks ul.clearfix';// punBB version
else if($('#ipbwrapper').length > 0){ navb = '#submenu ul li'; prependcode= '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a>';} // Invision version
else return; // no valid version
  
$('head').append(
    '<style type="text/css">' +
    '.mainmenu.rafavatar img {' +
    'display: inline-block !important;'+
    'width:30px;' +
    'height: 30px;' +
    'vertical-align: middle;' +
    'border-radius: 16px;'    +
    'margin-right: 7px;'    +
    'box-shadow: 0 2px 2px rgba(0,0,0,0.1);' +
   'filter: none;' +
    '}' +
    '</style>'
  );
  
$(navb).prepend(prependcode);
}else{return;}});

@RafaelS wrote:Enable by means of this script the addition of a button with the user's name and avatar to the navigation bar, which will redirect to the user's profile.

Author: RafaelS.
Working forum versions: All versions, except AwesomeBB

Application Result

The application will look as follows after being applied to the forum:

Installation

The installation is unique, and can only be done by creating a new javascript. CSS can be modified, and is embedded in Javascript. Please follow the steps below to install the effect on your community.

Control Panel >> Modules >> HTML and Javascript >> Management of Javascript codes >> Create a new javascript

Placement: On all pages

Code:

/****
 * Application: Link and avatar in the navbar
 * Description: This application can show the link to the user's profile and avatar in the navbar.
 * Version: 1.0
 * Made and Optimizations by RafaelS. - 2018/07/06
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2018 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
 
$(function() {
if(_userdata.session_logged_in > 0) {
 
  var username = _userdata.username, userid = _userdata.user_id,navb,linkav = _userdata.avatar,prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a></li>';
  
if($('body#modernbb').length > 0) navb = '.navbar.navlinks'; // ModernBB version
else if($('td.bodyline').length > 0){navb = '.bodyline table:eq(1) tr td';prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;';} // phpBB2 version
else if($('body#phpbb').length > 0){ navb = '.navbar .linklist.navlinks';prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;</li>';} // phpBB3 version
else if($('.pun #pun-intro').length > 0)navb = '#pun-navlinks ul.clearfix';// punBB version
else if($('#ipbwrapper').length > 0){ navb = '#submenu ul li'; prependcode= '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a>';} // Invision version
else return; // no valid version
  
$('head').append(
    '<style type="text/css">' +
    '.mainmenu.rafavatar img {' +
    'display: inline-block !important;'+
    'width:30px;' +
    'height: 30px;' +
    'vertical-align: middle;' +
    'border-radius: 16px;'    +
    'margin-right: 7px;'    +
    'box-shadow: 0 2px 2px rgba(0,0,0,0.1);' +
   'filter: none;' +
    '}' +
    '</style>'
  );
  
$(navb).prepend(prependcode);
}else{return;}});

@RafaelS wrote:I’m glad you enjoyed it and of course you are allowed @TonnyKamper, I see no problem there.

@Moulds965 wrote:The only thing I need now is a way for the providers (those who can post to the main blog) a way to create/edit posts. Other than adding a meta widget to the sidebar, is there a better way I can provide authors, contributors, etc.

@TonnyKamper wrote:Thank you very much @RafaelS  it's done and you can check your credits here at the bottom: Avatar met profiellink op navbar

Props to you     

@TonnyKamper wrote:Hi @skouliki I'm a bit confused, was your question for a test account addressed to me? 

@TonnyKamper wrote:@skouliki PM is sent    thank you!

@Harvey14 wrote:I’m using ProfileGrid user managing plugin, and since it’s a brand new plugin, the technical documentation is very poor. Any help would be appreciated. Thank you!

Wow! This is very cool! You can avoid some clicks to check your profile.
Thanks.

If you don't have any problem, i will translate your code to Spanish and of course give you the respective credits Wink

@oneSmile wrote:

Wow! This is very cool! You can avoid some clicks to check your profile.
Thanks.

If you don't have any problem, i will translate your code to Spanish and of course give you the respective credits Wink

Okay, so my question to RafaelS still stands, thank you for your assistance

Code Inside:

Code:

$(function(){
  $.ajax({
    url: '/u' + _userdata.user_id,
    type: 'GET',
    success: function(profs){
      var avt = $('.module:eq(0) div img',profs).attr('src'),
          nme = $('.module:eq(0) div.h3',profs).text().replace('(online)','');
     
      $('a.mainmenu[href*="editprofile"] img').removeAttr('src');
      $('a.mainmenu[href*="editprofile"]').text(nme);
      $('<img class="theavatnav" src="' + avt + '" />').prependTo('a.mainmenu[href*="editprofile"]').css({'width':'30px','height':'30px','border-radius':'100%'}); 
     
    },
    error: function(err){
      console.log("AJAX error in request (Load Profile Info)");
    }
  }); 
});

@TheCrow wrote:Hello there and excuse me for the intrusion here.

My initial thought was, why have your name there at the very beginning of the navigation bar, since you could just change it and make it simply replace the "Profile" navigation button option with the user's name and avatar?

Something I've done using Ajax, just because I am not a very "pro" javascript person but I've managed my ways throughout the years. So if possible, what @TonnyKamper is asking would be great, but with an addition of replacing the existing profile button.

Also, a quick question. How is this way any better (other than loading instantly) than the ajax way?

Code Inside:

Code:

$(function(){
  $.ajax({
    url: '/u' + _userdata.user_id,
    type: 'GET',
    success: function(profs){
      var avt = $('.module:eq(0) div img',profs).attr('src'),
          nme = $('.module:eq(0) div.h3',profs).text().replace('(online)','');
     
      $('a.mainmenu[href*="editprofile"] img').removeAttr('src');
      $('a.mainmenu[href*="editprofile"]').text(nme);
      $('<img class="theavatnav" src="' + avt + '" />').prependTo('a.mainmenu[href*="editprofile"]').css({'width':'30px','height':'30px','border-radius':'100%'}); 
     
    },
    error: function(err){
      console.log("AJAX error in request (Load Profile Info)");
    }
  }); 
});

Regards,
TC.

Example picture inside:

@TheCrow wrote:@TonnyKamper this happens because you have the "Under Construction" message there. That is considered a module and that's why it gets that image. As soon as you remove that it'll work perfectly.

I'll check to fix that later on today.

Regards,
TC.

Code:

/****
 * Application: Link and avatar in the navbar
 * Description: This application can show the link to the user's profile and avatar in the navbar.
 * Version: 1.0
 * Made and Optimizations by RafaelS. - 2018/07/06
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2018 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
 
$(function() {
if(_userdata.session_logged_in > 0) {
 
  var username = _userdata.username, userid = _userdata.user_id,navb,linkav = _userdata.avatar,prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a></li>';
 
if($('body#modernbb').length > 0) navb = '.navbar.navlinks'; // ModernBB version
else if($('td.bodyline').length > 0){navb = '.bodyline table:eq(1) tr td';prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;';} // phpBB2 version
else if($('body#phpbb').length > 0){ navb = '.navbar .linklist.navlinks';prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;</li>';} // phpBB3 version
else if($('.pun #pun-intro').length > 0)navb = '#pun-navlinks ul.clearfix';// punBB version
else if($('#ipbwrapper').length > 0){ navb = '#submenu ul li'; prependcode= '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a>';} // Invision version
else return; // no valid version
 
$('head').append(
    '<style type="text/css">' +
    '.mainmenu.rafavatar img {' +
    'display: inline-block !important;'+
    'width:30px;' +
    'height: 30px;' +
    'vertical-align: middle;' +
    'border-radius: 16px;'    +
    'margin-right: 7px;'    +
    'box-shadow: 0 2px 2px rgba(0,0,0,0.1);' +
  'filter: none;' +
    '}' +
    '</style>'
  );
 
$('li a.mainmenu[href*="profile"]').html(prependcode);
}else{return;}});

@RafaelS wrote:Hello @TonnyKamper, @oneSmile, @TheCrow

Sorry guys, I've been away for a long time.
For those who wanted to replace the default "profile" menu by this new button, please use the following code, instead:

Code:

/****
 * Application: Link and avatar in the navbar
 * Description: This application can show the link to the user's profile and avatar in the navbar.
 * Version: 1.0
 * Made and Optimizations by RafaelS. - 2018/07/06
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2018 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
 
$(function() {
if(_userdata.session_logged_in > 0) {
 
  var username = _userdata.username, userid = _userdata.user_id,navb,linkav = _userdata.avatar,prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a></li>';
 
if($('body#modernbb').length > 0) navb = '.navbar.navlinks'; // ModernBB version
else if($('td.bodyline').length > 0){navb = '.bodyline table:eq(1) tr td';prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;';} // phpBB2 version
else if($('body#phpbb').length > 0){ navb = '.navbar .linklist.navlinks';prependcode = '<li><a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;</li>';} // phpBB3 version
else if($('.pun #pun-intro').length > 0)navb = '#pun-navlinks ul.clearfix';// punBB version
else if($('#ipbwrapper').length > 0){ navb = '#submenu ul li'; prependcode= '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a>';} // Invision version
else return; // no valid version
 
$('head').append(
    '<style type="text/css">' +
    '.mainmenu.rafavatar img {' +
    'display: inline-block !important;'+
    'width:30px;' +
    'height: 30px;' +
    'vertical-align: middle;' +
    'border-radius: 16px;'    +
    'margin-right: 7px;'    +
    'box-shadow: 0 2px 2px rgba(0,0,0,0.1);' +
  'filter: none;' +
    '}' +
    '</style>'
  );
 
$('li a.mainmenu[href*="profile"]').html(prependcode);
}else{return;}});

I'm glad to help you.
Feel free to contact me, if you have any further questions.

---

Code:

/****
 * Application: Link and avatar in the navbar
 * Description: This application can show the link to the user's profile and avatar in the navbar.
 * Version: 2.0
 * Made and Optimizations by RafaelS. - 2019/10/08
 * View more in: https://ajuda.forumeiros.com
 * Copyright (c) 2018 RafaelS.<rafael_s at outlook dot pt>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
 
$(function() {
if(_userdata.session_logged_in > 0) {
 
  var username = _userdata.username, userid = _userdata.user_id,navb,linkav = _userdata.avatar,prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a>';
  var edit = $('li a.mainmenu[href*="profile"]').attr("href");
 
if($('body#modernbb').length > 0) navb = '.navbar.navlinks'; // ModernBB version
else if($('td.bodyline').length > 0){navb = '.bodyline table:eq(1) tr td';prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;';} // phpBB2 version
else if($('body#phpbb').length > 0){ navb = '.navbar .linklist.navlinks';prependcode = '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a> &nbsp;';} // phpBB3 version
else if($('.pun #pun-intro').length > 0)navb = '#pun-navlinks ul.clearfix';// punBB version
else if($('#ipbwrapper').length > 0){ navb = '#submenu ul li'; prependcode= '<a class="mainmenu rafavatar" href="/u'+userid+'"><span id="img">'+linkav+'</span>'+username+'</a>';} // Invision version
else return; // no valid version
 
$('head').append(
    '<style type="text/css">' +
    '.mainmenu.rafavatar img {' +
    'display: inline-block !important;'+
    'width:30px;' +
    'height: 30px;' +
    'vertical-align: middle;' +
    'border-radius: 16px;'    +
    'margin-right: 7px;'    +
    'box-shadow: 0 2px 2px rgba(0,0,0,0.1);' +
  'filter: none;' +
    '}' +
     'li.rafhover .rafedit{display:block!important;position:absolute}li.rafhover{position:relative;display:inline-block!important}'+
    '</style>'
  );
 
$('li a.mainmenu[href*="profile"]').parent("li").html(prependcode).append('<a style="display:none" class="mainmenu rafedit" href="'+edit+'">Edit profile</a>');

$('.mainmenu.rafavatar').parent("li").hover(function() {
   $(this).toggleClass("rafhover");
});

}else{return;}});