BuddyPress xprofile hovercard..

Crédits Photo Hovercard by K. Nugent

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..

Le résultat attendu.

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 ūüôā

Les champs xprofile

Conclusion

Vous pouvez r√©cup√©rer ma ¬ę¬†bricole¬†¬Ľ¬†en t√©l√©chargeant 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

34 commentaires sur “BuddyPress xprofile hovercard..

  1. hello,
    -j’ai ajout√© ton morceau au function.php
    – j’ai mis les fichiers de tes dossiers js et images dans les dossiers images et include/js de mon th√®me adapt√© √† BP
    -itou pour tes fichiers css, dans mon-theme/
    mais √ß√† n’affiche pas le petit cartouche
    est-ce que j’ai proc√©d√© de mani√®re correcte ?

  2. Salut,
    pardon pour les questions de newbie (j’en suis un total)
    comment j’indique le chemin des js ?
    est-ce que $customjs_dir joue une r√īle la dedans ou je peux me contenter d’ajouter dans ton code le chemin complet ?
    Genre : wp_enqueue_script( ‘tipsy’, $customjs_dir . ‘/wp-admin/MONTHEME/js/jquery.tipsy.js’ );
    et ceci je suppose dans chaque ligne qui appelle un js

    pardon encore de transformer le thread en support technique, dis-moi d’ailleurs si cela pose pb. If yes, no problemo for me.
    a+

  3. hello @LSM,

    no problemo, les commentaires sont faits pour √ßa ūüėČ
    En fait normalement $customjs_dir prend la valeur du chemin jusqu’√† ton th√®me ou child th√®me, c’est l’objet de cette fonction get_bloginfo(‘stylesheet_directory’);

    Donc si tu mets les js dans tontheme/include/js, il faut que tu changes légèrement la fonction imath_hovercard en intercalant simplement include :
    – wp_enqueue_script( ‘tipsy’, $customjs_dir . ‘/include/js/jquery.tipsy.js’ );
    – wp_enqueue_script( ‘tipsy-hovercard’, $customjs_dir . ‘/include/js/jquery.tipsy.imath.hovercard.js’ );

    Si les css ne sont pas dans le répertoire tontheme/css alors il faut également modifié les wp_enqueue_style.

    En espérant que ça te permettra de résoudre cette difficulté.
    A+

  4. gr√Ęce √† tes explications tr√®s p√©dagogiques, j’ai eu l’impression de comprendre et me suis lanc√© dans un grand nettoyage de mes css ; √ß√† m’a tout mis en vrac.

    j’avais modifi√© le function.php avec /includes/js ; √ß√† ne donnait rien. Je suis sur un th√®me adapt√© pour BP ; l’affichage des pages sp√©ciales BP (groups, members, etc) n’a jamais √©t√© terrible. Les css √©taient en vrac dans montheme/
    j’ai remis en l’√©tat mais √ß√† bug
    je regarde
    a+
    ls

    1. bonjour,
      Juste pour info Le style principal doit rester dans tontheme/style.css, seuls les styles pour l’hovercard sont √† mettre dans le sous r√©pertoire css.
      Sinon tu peux mettre tout les styles dans tontheme/ et modifier les wp_enqueue_style en enlevant le dossier css.
      Bon courage ūüėČ

  5. Bonjour,

    Merci beaucoup pour ce tip, je vais pouvoir virer CD-Bubble-Avatar !

    Ceci-dit, petite question, le background est transparent, et je trouve pas l’instruction correspondante dans les CSS, comment je peux changer √ßa ?

    Merci !
    Guillaume.

  6. Merci @IMATH

    Par contre il arrive un truc tr√®s bizarre sur IE. J’ai un peu customis√© la hovercard, et sur IE, le background est opaque, pas de probl√®me, mais le texte est transparent… Incompr√©hensible.. Si tu as une id√©e, je suis preneur ūüôā

    A voir sur http://webcaviste.com avec IE.

    Bonne soirée.

  7. Bonjour et tout d’abord merci pour ces astuces,

    Je prends la suite de Guillaume, et je suis actuellement en train de tenter de modifier le comportement des hovercards pour qu’elles s’affichent avec un d√©lai, de facon √† ce qu’elles ne bugguent pas lorsque je passe ma souris rapidement sur un ¬ę¬†nuage d’avatars¬†¬Ľ (par exemple dans la sidebar sur webcaviste.com).
    J’ai d’abord cru que DelayIn et DelayOut √©taient les valeurs √† modifier dans jquery.tipsy.js, mais sans succ√®s. J’ai par la suite tent√© de modifier le comportement en ajoutant un setTimeout par ci par l√† mais je n’arrive pas √† obtenir ce que je souhaite.
    Je d√©bute seulement en Jquery, et je comprends le principe de fonctionnement g√©n√©ral du plug-in, mais je n’arrive pas √† trouver o√Ļ placer mon point d’arret de facon √† ce que cela fonctionne.
    Pourrais-tu m’√©clairer si tu as une id√©e de comment faire ?

    Merci !
    Charlie

    1. Bonsoir @Charlie,

      J’ai fait qqes tests et je te proposer de tester ceci :
      1/ dans /js/jquery.tipsy.imath.hovercard.js, ligne 47 remplace show(a); par jQuery(¬ę¬†.tipsy-inner¬†¬Ľ).html(response);
      2/ toujours dans /js/jquery.tipsy.imath.hovercard.js, ligne 81 remplace hideDelay: 300, par hideDelay: 0,

      Normalement, le ‘bug’ de l’hovercard qui reste affich√© malgr√© qu’on ne soit plus hover aura disparu..

      Merci pour ton commentaire ūüėČ

  8. Bonsoir @Imath,

    Merci pour ta r√©ponse, malheureusement ca ne fonctionne pas… Je d√©sesp√®re un peu et je pense que je vais tenter de modifier le code de facon √† ce que le bulle ne s’affiche que lors du clic de la souris sur un avatar et non plus lors du hover.

  9. Salut @imath,

    Au temps pour moi, ton astuce marche, a priori mon souci venait du fait que tu avais utilis√© les mauvaises quotes (jQuery(¬ę¬†.tipsy-inner¬†¬Ľ).html(response); au lieu de
    jQuery(‚Äú.tipsy-inner‚ÄĚ).html(response);).

    Encore merci pour ton aide !

  10. Salut @Imath,

    J’ai remarqu√© quelques bugs sur mon site avec l’hovercard, et malgr√© toute ma bonne volont√© je n’ai pas r√©ussi a trouver de fix. Tout d’abord, buddypress utilise de l’Ajax sur la page de communaut√© de mon site pour naviguer entre les pages des membres. Il semblerait que les attributs des avatars charg√©s avec Ajax ne sont pas modifi√©s par l’astuce et n’affichant donc pas la bulle. Saurais-tu comment r√©gler ce souci ou est-ce tout simplement impossible avec la forme actuelle de l’astuce ?
    Un autre petit probl√®me, en utilisant ton code pour ¬ę¬†√©liminer¬†¬Ľ les bulles r√©calcitrantes √† disparaitre, le fait d’utiliser Jquery.html() implique que lors du premier chargement de la bulle, le contenu se place au m√™me endroit que le fallback (la bulle ne se ¬ę¬†replace¬†¬Ľ pas comme elle le devrait pour etre centr√©e). J’ai tent√© de modifier cela, mais je suis bloqu√©, n’√©tant pas familier avec toutes les possibilit√©s de Jquery.
    Cela m’aiderait beaucoup si tu avais une id√©e, ou m√™me me donner quelques pistes √† explorer pour r√©soudre ceci ! (les bugs en question sont visibles sur le site)
    Merci pour ton temps ūüėČ

  11. Hello @Charlie,
    très sympa ton site.

    Autrement, pour ce qui est des réponses à ton commentaire :

    1/Suite √† Ajax, les hovercards ne s’affichent plus : tu peux essayer de rajouter dans le functions.php dans la fonction qui ajoute le tipsy et juste avant la balise fermante </script>
    jQuery(".avatar").live(‘hover’, function(){
    jQuery(".avatar").tipsyHoverCard();
    });

    2/ le décallage une fois les données affichées, si tu utilises 1, alors, il faudra changer le fallback dans jquery.tipsy.imath.hovercard.js, en adaptant la height selon tes besoins :
    fallback : ‘<div style="height:100px">Chargement en cours</div>’

    Si tu n’utilises pas 1, au lieu de modifier le fallback, tu peux ajouter √† jquery.tipsy.imath.hovercard.js juste en dessous de jQuery(".tipsy-inner").html(response);

    var top = jQuery(".tipsy").css("top");
    var newtop = Number(top.substring(0,top.length-2) – 40);
    jQuery(".tipsy").css("top",newtop+"px");
    en adaptant newtop √† tes besoins…

    En espérant que ça te permette de résoudre ces bugs.
    A+

  12. bonjour, je suis un gros newbi dans la mati√®re, je ne comprend presque rien de tout ce que tu as √©crit ce qui n‚Äôemp√™che pas d’√™tre super √©tonn√© de ce travail. Ma question :
    Ou dois-je mettre le fichier contenue dans votre zip pour que les personnes puisses chang√© leurs avatar sans pass√© sous gravatar ūüôā , c’est tr√®s g√™nant de vous demand√© √ßa mais j’en ai besoin pour une question de facilit√© ūüôā

    1. Hello Jamesnewbi,

      Ce trick n’a pas pour objectif de remplacer gravatar. Il permet d’afficher un hovercard au survol de l’avatar de l’utilisateur. Par ailleurs, dans l’exemple que je donne, je m’appuie sur des fonctionnalit√©s BuddyPress. Donc, si tu n’as pas install√© BuddyPress, ce n’est pas la peine de poursuivre le tuto ūüėČ
      Autrement si tu as installé BuddyPress, chaque utilisateur en allant sur son profil peut changer son avatar et uploader sa propre image.

      Si tu souhaites une solution permettant aux utilisateurs de personnaliser leur profil WordPress sans pour autant passer par BuddyPress, alors, il s’agit de rechercher un plugin du type user-photo

      A+

  13. D’accord je passe par buddypress, je fais fonctionn√© mon r√©seaux social mais il y a toujours ce gravatar qui me fais chier …… Aurais tu une solution pour enlev√© ce lien et que les gens puissent upload leurs photos profils sans pass√© pas gravatar… ( sans oubli√© que je suis un nooby )
    le site en question–> http://theonlystation.powa.fr/
    Merci de tes réponses je pense que vous êtes la personne la plus qualifié pour me répondre .

  14. D√©sol√© de te faire encore ch****, Mais j’y arrive pas , je cr√©e le fichier bp-custom.php, je le met dans les extantions et le fichier marche mais affiche les codes sur le site et en plus ne change rien a mon probl√®me. Je peux te donn√© mes id pour le ftp si tu voudrais bien me le faire…Ou alors me donn√© si tu en a envie, une autre solution. En te remerciant
    James ūüôā

    1. Il faut mettre le code dans le fichier functions.php du th√®me actif en fait, pas dans les extensions. Essaye de cette mani√®re, si toutefois √ßa ne fonctionne pas, je m’inscrirai sur ton blog et tu n’auras qu’√† me nommer administrateur le temps que je fasse le n√©cessaire.
      A+

  15. D’accord c’est fais mais √ßa me donne toujours le m√™me r√©sultat..Vous devez me prendre pour un vrai noob … Je veux bien que vous vous inscrivez sur mon blog, je vous donnerais toutes les informations que vous avez besoin pour y boss√© en toute libert√© et je vous en serez tr√®s reconnaissant

Les commentaires sont fermés.