S’il y a une chose qu’on me demande souvent de personnaliser sur un réseau social bâti avec le CMS Buddypress, c’est bien la gestion des avatars. En effet, il y a d’une part le fait que l’avatar linke toujours vers la page déjà ouverte, ce qui est en soit inutile, et d’autre part sa taille, qui n’est pas customizable facilement pour un non-initié.

Je vais donc vous expliquer simplement comment faire en sorte que l’avatar ne linke plus vers le profil lorsqu’on est déjà sur la page de profil mais plutôt vers l’image servant d’avatar, et ensuite comment modifier les tailles natives des avatars pour permettre l’ouverture d’un avatar dans une plus grande taille lorsqu’on clique dessus (vous me suivez ?!).

1. Comment lier l’avatar à son image en taille réelle

members-header.php

Rendez-vous dans votre fichier member-header.php (situé dans le dossier members/single/ de votre thème Buddypress). Une fois dans ce fichier, retrouvez la ligne de code correspondant à ceci :

<a href= »<?php bp_user_link(); ?> »>

<?php bp_displayed_user_avatar( ‘type=full’ ); ?>

</a>

Remplacez ce code par celui-ci :

<a href= »<?php echo bp_core_fetch_avatar( array( ‘html’ => false , ‘type’ => ‘full’ ) ); ?> »>

<?php bp_displayed_user_avatar( ‘type=full&width=150&height=150’ ) ?>

</a>

Comme vous pouvez le constater, nous utilisons ici la fonction bp_core_fetch_avatar, avec pour attribut ‘html’ => false, qui permet de faire ressortir l’URL de l’avatar, sans le langage HTML qui l’accompagne (<img src =…).

Uploadez le fichier members-header.php.

Une fois cette étape effectuée, votre avatar devrait normalement linker vers l’image et plus vers le profil. Reste maintenant à modifier les tailles d’avatar, afin de conserver l’avatar miniature pour la liste des profils, mais d’avoir un avatar un peu plus grand lorsqu’on clique dessus.

2. Comment modifier les tailles d’avatar sous Buddypress

functions.php

Pour cela, rien de plus simple, rendez-vous dans votre fichier de fonctions (functions.php) pour y ajouter ces lignes de code :

if ( !defined( ‘BP_AVATAR_THUMB_WIDTH’ ) )
define( ‘BP_AVATAR_THUMB_WIDTH’, 50 ); //Mettez la largeur que vous souhaitez pour la taille miniature
if ( !defined( ‘BP_AVATAR_THUMB_HEIGHT’ ) )
define( ‘BP_AVATAR_THUMB_HEIGHT’, 50 ); //Hauteur des tailles miniature
if ( !defined( ‘BP_AVATAR_FULL_WIDTH’ ) )
define( ‘BP_AVATAR_FULL_WIDTH’, 400 ); //Largeur de la taille réelle
if ( !defined( ‘BP_AVATAR_FULL_HEIGHT’ ) )
define( ‘BP_AVATAR_FULL_HEIGHT’, 400 ); //Hauteur de la taille réelle

Grâce à ce bout de code, vous fixez la taille réelle des avatars à 400*400, et la taille des avatars miniature à 50*50.

3. Extensions & remarques

Vous pouvez aisément ajouter un attribut de type « lightbox », via le rel= »lightbox » par exemple, si vous avez un plugin qui gère ce genre de chose. Ainsi, vos avatars se chargeront d’une manière un peu plus sexy.

Par ailleurs, je vous renvoie vers les attributs de la fonction bp_displayed_user_avatar( ‘type=full&width=150&height=150’ ) : comme vous pouvez le voir, nous avons choisi d’afficher l’avatar en « full », c’est-à-dire en taille réelle, mais en redimensionnant l’output, afin que sur la page de profil, on ait une image de taille intermédiaire.

Cette méthode n’est certes pas conseillée du point de vue de la rapidité de chargement des pages, mais évite d’ajouter une nouvelle taille d’image pour les avatars. Vous pouvez néanmoins jouer avec ces attributs, en choisissant de mettre ‘type=thumb’ plutôt que full aux endroits que vous voulez.

Conclusion : votre réseau social met en valeur les photos de profil

Grâce à cette méthode, les avatars de vos membres linkent désormais vers des images plus grandes, ce qui est carrément plus pratique pour gérer des réseaux où la photo de profil a son importance.