Display clickable avatar if user is logged in

Hey there! Hope you are well.. I would like to display the buddypress avatar of logged in users in the header of my site. How can I do this?
Thanks,
Mwale

  • Luís

    Hi Mwale ,

    Hope you're doing well today!

    To get the User Avatar in all pages (included outside of the BuddyPress pages) you can use this code:

    <?php echo bp_core_fetch_avatar ( array( 'item_id' => bp_loggedin_user_id(), 'width' => 50, 'height' => 50, ) ) ?>

    Place it in your theme header.php, where you want to show the avatar. Change the "width" and "height" paramenters, to the value you thing best.

    If you have doubts/difficulties in where to put the code, please, send us a screenshot and enable the Support Login, so we can check your theme code?

    If you don't already know, please, follow the link below, to see how enable the staff login:

    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    When you enable this option, please post again!

    Cheers, Luís

  • Luís

    Hi Mwale ,

    Hope you're doing well today!

    In the theme header.php, close to the line 123 you will find this:

    <?php get_template_part( 'content', 'header-rightcontent' ); ?>

    Put this code, right before this:

    <div class="header-avatar">
    <?php echo bp_core_fetch_avatar ( array( 'item_id' => bp_loggedin_user_id(), 'width' => 50, 'height' => 50, ) ) ?>
    </div>

    Then, add this CSS code in Appearance -> Custom CSS:

    .menu-notification-menu-container {
        position: unset !important;
        float: right;
        margin: -25px 50px 0;
    }
    .header-avatar {
        float: right;
        width: 50px;
    }

    We may need to make some adjustments, because, as I don't have the FTP details of your website to test the code in a secure way, I just tried to simulate this in my install.

    Cheers, Luís

  • Luís

    Hi Mwale ,

    Hope you're doing well today!

    I checked your website and now you are using a different theme. Have you gave up to the code changes?

    However, to link the avatar to the user profile page you need to change the code given, from this:

    <div class="header-avatar">
    <?php echo bp_core_fetch_avatar ( array( 'item_id' => bp_loggedin_user_id(), 'width' => 50, 'height' => 50, ) ) ?>
    </div>

    to:

    <div class="header-avatar">
    <a href ="<?php bp_loggedinuser_link() ?>">
    <?php echo bp_core_fetch_avatar ( array( 'item_id' => bp_loggedin_user_id(), 'width' => 50, 'height' => 50, ) ) ?>
    </a>
    </div>

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Luís

    Hi Mwale ,

    Hope you're doing well today!

    Firstly, sorry for the late reply and all the problems it may have caused.

    could help me centre the avatar in the header, there is too much space at the bottom than at the top

    Can you try add this CSS rule to the "header-avatar" class:

    margin-top: 7px !important;

    So, the new code should be:

    .header-avatar {
        float: right;
        width: 50px;
       margin-top: 7px !important;
    }

    However, I just noticed that when I reduce the size of the browser window, the notification icon runs out of the page (it goes to the top). How do I fix this?

    I checked you custom CSS and I think you are using some rules for this element that can be conflicting. I think you can remove or commnent these rules:

    .menu-notification-menu-container {
      position: absolute;
      top: 3px;
      right: 0;
    }
    .menu-notification-menu-container {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    and try use only this:

    .menu-notification-menu-container {
        position: unset !important;
        float: right;
        margin: -35px 50px 0;
    }

    and a media query to correct the position to other small viewports:

    @media screen and (max-width: 600px) {
    .menu-notification-menu-container {
        margin: 3px 50px 0 !important;
    }
    }

    From what I tested, it should work, so, if I am missing something, please, let me know!

    Cheers, Luís