BuddyPress xprofile hovercard..

Twitter, Facebook, Gravatar proposent leurs hovercards pour afficher des informations de profil de l'utilisateur.. Sur un Intranet, on peut aussi le faire en utilisant les xprofile fields de BuddyPress.

Tags

, ,

par imath Le novembre 23, 2010

34 réactions
facebook share mail email A+ A-

À propos de l'auteur

je "bricole" sur le web en manipulant des outils comme html/css, php, asp 3.0 (si si!!), javascript, actionscript 1-2-3, Ajax, flash, flex.. i am a Mac/linux allergique à Windows ;)

Du même auteur

Sur le même sujet

Ces temps-ci, je suis à fond sur la refonte d’un Intranet : ce qui explique mon activité sur ce blog… Aujourd’hui je vous propose d’imiter les hovercards que proposent Twitter, Gravatar ou autre Facebook dans le contexte d’un Intranet. En Internet, il me semble plus simple de précisément faire appel aux hovercards de Gravatar par exemple..

Résultat recherché ;)

Uses de l’astuces.

Si on se plonge (très légèrement) dans le code source html des zones contenant les avatars des utilisateurs BuddyPress, on s’aperçoit que l’une des classes de la balise img transporte l’identifiant de l’utilisateur :

<img src="lien-vers-avatar" alt="" class="avatar user-1-avatar" width="50" height="50">

Il sera donc pratique au moment venu de “splitter” user-ID-avatar

Write less, do more.

Vous l’aurez compris, on va se simplifier la tâche et utiliser/adapter des plugins jQuery existants. Après une recherche Google, j’ai opté pour la combinaison de Rrrene qui utilise tipsy + son propre plugin.
Pour assurer son fonctionnement avec l’ajax de WordPress, j’ai quelque peu modifié sa fonction enter comme illustré ci-dessous :

  function enter() {
    var a = $(this);
    var url = ajaxurl;
    var user_id = a.attr('class').split('-');
    if( url && !a.data('ajax-success') ) {
        var data = {
            action: 'imath_overcard',
            userid: user_id[1]
        };
        jQuery.post(url, data, function(response) {
        a.data('ajax-success', true);
        a.attr('title', response);
        show(a);
        });
    }
    show(a);
  }

Quelques explications rapides :

  1. ajaxurl : BuddyPress définit cette variable pour nous.
  2. user_id sera un tableau dont l’indice 1 contiendra l’ID du membre
  3. imath_overcard nous permettra de récupérer les données via le mécanisme Ajax de WordPress

 

Cap sur le functions.php du thème actif !

Il nous reste à charger les js et css nécessaires à l’hovercard, à indiquer qu’il concernera la classe “.avatar” et à écrire la fonction qui va répondre à l’Ajax. Pas besoin de plugin !

Je zappe les deux premières fonctions (elles sont dans le zip final) pour me concentrer sur celle qui va écouter l’appel Ajax.

  function imath_ajax_hovercard(){
    global $bp;
    ?>
    <table border="0" cellspacing="0" cellpadding="0" style="text-align:left">
      <tr>
        <td style="line-height:12px;padding:0px"><b> <?php echo xprofile_get_field_data( 'Name', $_POST['userid'] );?></b></td>
      </tr>
    </table>
    <?php
    die();
  }
  add_action('wp_ajax_imath_overcard', 'imath_ajax_hovercard');

Explications rapides :

  1. on retrouve bien imath_overcard à la suite de wp_ajax, ce qui nous permet de lancer la fonction imath_ajax_hovercard
  2. la fonction BuddyPress xprofile_get_field_data nous permet de récupérer les valeurs que les membres auront saisies dans leur profil BuddyPress (dans cet exemple, je n’ai pris que le xprofile par défaut “Name”)

 

BackEnd BuddyPress

Etape finale : rajouter des champs depuis le lien Config des profils de l’Admin de BuddyPress :)

Conclusion

Vous pouvez récupérer ma “bricole” en téléchargerant les fichiers nécessaires.
NB : Dans les fichiers du zip, vous trouverez notamment une adaptation du script de Rrrene dont l’original est sur github
Illustration article : Hovercard by K. Nugent

Suivez nous sur Twitter et sur Facebook.