Add badges under cover photo depending on profile fields

[Kida]

Hi Kleo team!

I have a question, slightly related to this topic (Add a gallery under member header).

I’d like to add badges under the member header, related to profile fields.

For instance, one of my profile field is “talent1” and one of the answer could be “musician” (dropdown menu).

I’d like to display a badge/image under the member header to reflect that.

I’ve tried checking around, also checked the code given by Sharmstr in the ticket above, but can’t get anything to work. I’ve added the below code into member-loop.php in theme>kleo-child>buddypress>members>single

 

This is what I have so far:

 

‘<?php

add_action( ‘bp_after_member_header’, ‘show_badge’, 99 );

function show_badge() {

if ( bp_get_the_profile_field_name() == ‘talent1’ ) {

global $field;

if ( bp_unserialize_profile_field( $field->data->value ) == “Musician” )

echo ‘<img src=”musician-red-trans.png” alt=”musician” title=”musician” />’;

endif;

<?’

 

Could you point me in the right direction?

[Kida]

I can’t edit the post, I’ve made a mistake, I’ve added the code above in home.php, not member-loop.php, in theme>kleo-child>buddypress>members>single

[Radu]

So you have solved the problem?

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 ?

[Kida]

Nope, I just precised where I had added the code, but the code is not working.

[Radu]

The code seems to be ok, but that code should be added in wp-content/themes/kleo-child/functions.php

And try to paste code form here : http://pastebin.com/raw/jwa3FVT1

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 ?

[Kida]

I’ve tried to paste that code into the child/function.php but it doesn’t work.
I should add the complete image path, such as “http://www.mysite.com/wp-content/uploads/2016/09/musician-red-trans.png&#8221;, right?

[Radu]

yes you should add the complete path or not but to be sure add entire link, check it before adding to function

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 ?

[Kida]

This reply has been set as private.

[Radu]

Hi,

You can inspire from this code : https://archived.seventhqueen.com/kleo/article/add-extra-profile-fields-show-certain-profile-fields-member-profile-header try to use this hook : bp_profile_header_meta instead of bp_after_member_header

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 ?

[Kida]

Hey Radu,

I don’t want the images to appear on the cover but between the cover and the buddypress tabs.
I had checked this thread : https://archived.seventhqueen.com/forums/topic/add-a-gallery-under-member-header to get inspiration but I don’t manage to make it work.
I would really appreciate if you or one of your colleague could have a look and help me out

[Kida]

I’ve tried many things, none of which is working…

COPY CODE

add_action('bp_init', 'show_user_badge', 2);
function show_user_badge () {
    if (bp_is_user()){
        add_action('kleo_before_main_content', 'show_badge', 99);
    }

}

function show_badge() {
	if ( bp_get_the_profile_field_name() == 'talent' ) {
		global $field;
		if ( bp_unserialize_profile_field( $field->data->value ) == "Photography" ) {
		echo 'is it working?';
		}
	}
}

I also tried the same but using ‘bp_after_member_header’ instead ‘kleo_before_main_content’.
I’ve tried to echo a sentence instead of an image but no luck.

Sharmstr helped for the other code, maybe she’d accept to help me with this one too?

[Radu]

Kida the function and hook works, but maybe the code it’s rendered under the cover ?

If you will use this function you will see that the content it’s added under the avatar

COPY CODE

function show_badge() {

    echo '<h1 style="text-align: center; z-index: 22 !important;position: inherit;"> TESTINGGGG </h1>';
    if ( bp_get_the_profile_field_name() == 'talent' ) {
        global $field;
        if ( bp_unserialize_profile_field( $field->data->value ) == "Photography" ) {
            echo 'is it working?';
        }
    }
}

add_action( 'bp_after_member_header', 'show_badge' );

If this it’s not true if ( bp_get_the_profile_field_name() == ‘talent’ ) { the rest of the code (below) will not be executed.

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 ?

[Kida]

This reply has been set as private.

[Kida]

Ok, I found out that the badge picture is there but going under the cover photo.
I have tried to assign a class (badge1) the the image and change its z index but it doesn’t seem to take into account the class assigned.
So I created a div with a class and that works (I can change the background color etc) but the z-index still didn’t change anything, until I added the attribute position:relative; (I’m adding details in case someone else was after the same thing)

This is the working code

COPY CODE

function show_badge() {

    echo '<div class="badge1"><img src="http://www.mysite.com/wp-content/uploads/musician-red-trans.png"></div>';
    if ( bp_get_the_profile_field_name() == 'talent' ) {
        global $field;
        if ( bp_unserialize_profile_field( $field->data->value ) == "Photography" ) {
          }
    }
}
add_action( 'bp_after_member_header', 'show_badge' );

I also managed to get it under the cover photo by replacing ‘bp_after_member_header’ with ‘kleo_before_main_content’!! Woohoo! 🙂

Thank you very very much for your help, I’ve added my rating and review!

[Kida]

Ok I spoke too fast … Even when I change the field value to something else the badge continue to appear..
I guess I should precise in the code, that if the field of this user is “that”, then display the badge.
Or, if any user has the field set to “that” then display the badge.

How would I do that? I’ve tried with the: if ( bp_is_user() ) but then the code doesn’t work anymore.

[Kida]

Ok, I understand now that the function I used was just to display the badge no matter what. I’m a bit slow in understanding coding 🙂

So, I’ve tried to put back my initial function because you thought it would work but be hidden under my cover photo. Unfortunately it didn’t work.

COPY CODE

function show_badge() {

	if ( bp_get_the_profile_field_name() == 'Talent' ) {
		global $field;
		if ( bp_unserialize_profile_field( $field->data->value ) == "Photography" ) {
		echo '<div class="badge1">is it working?</div>';
		}
	}
}

add_action('bp_init', 'show_user_badge');
function show_user_badge () {
    if (bp_is_user()){
        add_action('kleo_before_main_content', 'show_badge');
    }
}

I’ve tried changing the bp_unserialize_profile_field( $field->data->value ) == “Photography” to bp_get_the_profile_field_value() == “Photography” but no luck either.

The field is a dropdown menu, I thought maybe I coulod just use its value (I know it’s different for checkboxes, I’m not sure for dropdowns).

So, I’m back at square 1…not sure why this isn’t working.

[Kida]

Ok, I managed to fix it (with help 🙂 ) but I have trouble making it appear above the cover picture…

This is my function:

COPY CODE

add_action( 'bp_after_member_header', 'talent_show_badge' );
function talent_show_badge(){
    if( !bp_is_active( 'xprofile' ) )
        return;
    
    $field_value = xprofile_get_field_data( 'Talent', bp_displayed_user_id() );
    
    if( 'photography' == strtolower( $field_value ) ){
        echo '<div id="badges"><div class="badge1"><img src="http://www.mysite.com/wp-content/uploads/image1.png" id="talent1"></div></div>';
    }

    if( 'voice' == strtolower( $field_value ) ){
        echo '<div id="badges"><div class="badge1"><img src="http://www.mysite.com/wp-content/uploads/image2.png" id="talent1"></div></div>';
    }
}

add_action( 'bp_after_member_header', 'voice_show_badge' );
function voice_show_badge(){
    if( !bp_is_active( 'xprofile' ) )
        return;
    
    $field_value = xprofile_get_field_data( 'Voice type', bp_displayed_user_id() );
    
    if( 'rock' == strtolower( $field_value ) ){
        echo '<div id="badges"><div class="badge2"><img src="http://www.mysite.com/wp-content/uploads/image3.png" id="talent2"></div></div>';
    }

    if( 'opera/classical' == strtolower( $field_value ) ){
        echo '<div id="badges"><div class="badge2"><img src="http://www.mysite.com/wp-content/uploads/image4.png" id="talent2"></div></div>';
    }

}

and my css:

COPY CODE

#badges {
width: 900px;
z-index: 2;
}

.badge1 {
float: left;
width: 100px;
margin-left: 580px;
padding: 15px;
z-index: 2;
}

.badge2 {
float: left;
width: 100px;
margin-left: 10px;
padding: 15px;
z-index: 2;
}

.badge1 #talent1 {
z-index: 2;
}

.badge1 #talent2 {
z-index: 2;
}

body.is-user-profile div#item-header div#badges {
z-index: 2;
}

.buddypress div#item-header div#badges {
z-index: 2;
}

As you can see, I’ve tried adding the z-index everywhere I could think of but the pictures still appear under the cover. What would be the class or ID to use for the location ‘bp_after_member_header’?

Thanks in advance

[Kida]

Hello again!
I’ve decided to add the badges under the cover photo.
The problem is that, intermittently, the nav bar (#buddypress div#item-nav) disappears, see picture attached.
It’s intermittent because sometime I refresh and it’s there, and sometimes not (then all the menu items are present in the dropdown).
How can I make sure it doesn’t impact the nav bar?

Attachments:

You must be logged in to view attached files.

[Kida]

I’ve added a css to float the bp profile nav bar to left and it seems to have solved it!

[Radu]

Hi,

Add these CSS declarations for the badge div to make sure to don’t overlap items…

COPY CODE

div#badges {
    clear: both !important;
    width: 100%;
    display: inline-block;
}

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 ?

[Radu]

Great

Have a nice week

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 ?

[Kida]

You too!

[Radu]

Thank you

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