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

Mitglieder-Header.php

Gehen Sie zu Ihrer Datei member-header.php (befindet sich im Ordner „members/single/“ Ihres Buddypress-Themes). Suchen Sie in dieser Datei nach der entsprechenden Codezeile:

<a href="/de/”NO NUMERIC NOISE KEY/" 1000”>

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

</a>

Ersetzen Sie diesen Code durch diesen:

<a href="/de/”NO NUMERIC NOISE KEY/" 1000”>

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

</a>

Wie Sie sehen, verwenden wir hier die Funktion bp_core_fetch_avatar, mit dem Attribut ‘html’ => false, welches erlaubt faire ressortir l’URL de l’avatar, sans le langage HTML qui l’accompagne (<img src =…).

Laden Sie die Datei „members-header.php“ hoch.

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

Funktionen.php

Um dies zu erreichen, könnte es nicht einfacher sein, gehen Sie zu Ihrer Funktionsdatei (functions.php) und fügen Sie diese Codezeilen hinzu:

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

Mit diesem Code stellen Sie die tatsächliche Größe der Avatare auf 400*400 und die Größe der Miniatur-Avatare auf 50*50 ein.

3. Erweiterungen & Bemerkungen

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.

Darüber hinaus verweise ich auf die Attribute der Funktion 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.

Fazit: Ihr soziales Netzwerk hebt Profilfotos hervor

Dank dieser Methode verlinken die Avatare Ihrer Mitglieder nun mit größeren Bildern, was für die Verwaltung von Netzwerken, in denen das Profilfoto wichtig ist, viel praktischer ist.