user profile picture in main menu is incorrect

[giorgos]

When user uses social login, his profile picture is correct everywhere but at the main menu area. This is using css class “kleo-menu kleo-user_avatar-nav” that pulls the avatar from gravatar instead of the social login one.

see screenshot

Attachments:

You must be logged in to view attached files.

[sharmstr]

which social login plugin are you using?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[giorgos]

https://nl.wordpress.org/plugins/super-socializer/

[sharmstr]

There was a similar problem with login radius. Maybe try this fix. If it doesnt work, I’m not sure what to tell you. Most of those social login plugins override the bp avatar functions.

COPY CODE

function kleo_menu_user_avatar( $item_output, $item, $depth, $args ) {

    $output = '';

    if ( is_user_logged_in() ) {

        $url = bp_loggedin_user_domain();

        $attr_title = strip_tags( $item->attr_title );

			$output .= '<a title="' . bp_get_loggedin_user_fullname() . '">has_children && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '" href="' . $url . '" title="' . $attr_title .'">' . bp_get_loggedin_user_avatar(array('width' => 25, 'height' => 25)) . '</a>';
		
        $output .= ( $args->has_children && in_array($depth, array(0,1))) ? ' <span class="caret"></span></a>' : '</a>';

        return $output;
    } elseif ( $args->has_children && in_array( $depth, array( 0, 1 ) ) ) {
        return $item_output;
    } else {
        return '';
    }
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[giorgos]

Thanks sharmstr, I tried but I get parse error on line 11 of this code.

Parse error: syntax error, unexpected 'js' (T_STRING) in /wp-content/themes/kleo-child/functions.php on line 438

[sharmstr]

Sorry, the forum screwed up the code. Copy from attached file instead.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[giorgos]

Perfect @sharmstr. You did it once again!!
Code works like charm 🙂

[giorgos]

Oops, an css issue after the fix. avatar is not lined up anymore. See screenshot

Attachments:

You must be logged in to view attached files.

[giorgos]

For the moment I have removed the provided code as although it solves the social login header avatar issue it creates a css issue for some users. Very weird as some avatars are displayed correctly and others are as the screenshot of previous post.

I have disabled the “KLEO my account” menu item and I use a custom link for “my account” So no user avatar.

If there is an explanation for such behaviour would be fine. Otherwise I can use the current solution with no avatar.

[giorgos]

I have reopened this ticket as this code is not showing the ##member_name##. Also I was unable to solve the CSS issue mentioned above in post 65272. But If I remove the span class “caret” from the code, avatar is lined up again. Any idea how to have this code include the member name and bypass the caret issue?

[sharmstr]

You can remove this line to remove the caret

COPY CODE

$output .= ( $args->has_children && in_array($depth, array(0,1))) ? ' <span class="caret"></span></a>' : '</a>';

The member name wont work because social login does its own filtering of the avatar code that removes the stuff that kleo needs in order to display the name. This filtering is the whole reason why I had to come up with the code just to show the avatar in the first place.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[giorgos]

Thanks @sharmstr. I have removed the caret, and works fine. Only issue is on mobile devices it wont show the caret, but only the avatar without its menu links. So now there is no my account menu on mobile.

[sharmstr]

It would be helpful for you to test that before asking me how to remove it.

Anyhow, add the caret code back and try css instead.

COPY CODE

#header .navbar-nav li .caret {
    display: none;
}
@media (max-width: 991px) {
#header .navbar-nav li .caret {
   display: inline !important;
}
}

Its important to know that I cant test any of this since I dont use your plugin.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[giorgos]

The CSS solution worked fine. Thank you for your excellent support!!. My apologies for the trouble and confusion.

[sharmstr]

No problem. I’m glad it worked. It was just a guess 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts