How to show the avtar-wordpress-social-login in the kleo-bp-user-avatar in menu

[Salle32]

Hi,

I just wonder how to show the Facebook avatar  from wp-social-login  in the menu instead of an “mystery man” or gravatar or other options.

http://ouryoga.se

Thanks!

//F

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

You have theme updated to latest version? if no, update it.

Try to de-activate all plugins and also the child theme, if you have a cache plugin installed , flush cache and check again.

The facebook account that you have connected with it haves an avatar ?

Cheers
R.

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

What support service includes ? What not ?

[Salle32]

Hi Radu,

Everything is up to date.

I tried the plugins deactivated.

I think:

I have to edit the code for the top menu:

This code work for the site:

What do you think?

/F
But I know nothing about how to do it or where.

[Salle32]

/**/

/**/

[Salle32]

a title=”Mammafamily Johansson” class=”kleo-bp-user-avatar” href=”http://ouryoga.se/members/mammafamily_johansson/”&gt;</a

a href=”http://ouryoga.se/members/mammafamily_johansson/”&gt;
img src=”https://graph.facebook.com/221194531565271/picture?width=150&height=150&#8243; alt=”Profilbild för Mammafamily Johansson” class=”avatar avatar-wordpress-social-login” height=”50″ width=”50″> </a

Obviously I do not know how to write code on a page… 🙂

[Radu]

Hi,

Make sure to have show avatars option checked in wp-admin -> settings-> reading.

Also in theme options -> Facebook integration you should have show avatars checked

Check those settings

Cheers
R.

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

What support service includes ? What not ?

[Salle32]

Hi Radu,

Thanks for your answer.

You´re totally correct – BUT – I have WP-Social-Login. I have it because PMPRO paid membership, require it.

So what I´d like to manage is a Kleo Top Menu image (like the class=”kleo-bp-user-avatar), but with the wp-social-login (class=”avatar avatar-wordpress-social-login”).

I realize now that I may ask for to much, but it would be so beautiful to have that image for logged in users – it is really one of the nice things i like about the Kleo Theme.

If you have knowledge and could help me accomplish this – I´d appreciate it a lot!

If you look at the page http://ouryoga.se/startsida/ you´ll see what happens if Kleo Facebook login is activated. = double logins for facebook.

Many Thanks

Fredrik

[Radu]

Hi,

You can alternate the kleo avatar function using next code

COPY CODE

if ( ! function_exists( 'kleo_menu_user_avatar' ) ) {
    /**
     * Render user avatar menu item
     *
     * @param string $item_output
     * @param  array $item
     * @param  integer $depth
     * @param  object $args
     * @return string
     */
    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() . '" class="kleo-bp-user-avatar' . ( $args->has_children && in_array($depth, array(0,1)) ? ' js-activated' : '' ) . '" href="' . $url . '" title="' . $attr_title .'">'
                .  '<img src="' . esc_attr( bp_get_loggedin_user_avatar(array('width' => 25, 'height' => 25, 'html' => false)) ) . '" class="kleo-rounded" alt="">' . ($item->attr_title != '' ? ' ' . $item->attr_title : '');

            $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 '';
        }
    }
}

The function needs to be pasted in wp-content/themes/kleo-child/functions.php

You can adapt the CSS classes easily by editing the existing ones

Cheers
R.

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

What support service includes ? What not ?

[Salle32]

Hi Radu,

Thank you for your answer – I can see that this is the answer – I´m just sorry to say that I do not understand what to edit and change. Here I´m a total fuckup.

I´ve been reading and testing different solutions but I do not get the result I wanted – mostly I get a white page with error code…

May I ask you exactly how to get the avatar-wordpress-social-login image into this wonderful piece of code and make it show the facebook image avatar?

I´m sorry I do not get it.

/F

[Radu]

Hi,

Just enable BuddyPress component it will get automatically the avatar

Cheers
R.

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

What support service includes ? What not ?

[Salle32]

Hi Radu!

It works for everything – except for the image on the Kleo top menu – for logged in users.

That one becomes the “mystery man avatar” until you add your user image manually thrue your account in Buddypress.

So for users adding their profile thrue WP-Social-Login – the Kleo top menu image will not work.

Any ideas here?

/F

[Radu]

Hi,

The plugin should apply filter also for the bp_get_loggedin_user_avatar function, you can tell this to the plugin developer.

Cheers
R.

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

What support service includes ? What not ?

[Author]

Posts