Buddypress: Verknüpfen Sie den Miniatur-Avatar mit dem Vollbild

Wenn es eine Sache gibt, die ich oft in einem mit dem CMS erstellten sozialen Netzwerk personalisieren möchte, werde ich häufig gebeten, sie zu personalisieren Buddypress, das ist gutes Avatar-Management. Denn einerseits ist es so, dass der Avatar immer auf die bereits geöffnete Seite verlinkt, was an sich nutzlos ist, und andererseits seine Größe, die für einen Laien nicht einfach angepasst werden kann.

Ich erkläre Ihnen daher lediglich, wie Sie sicherstellen, dass der Avatar nicht mehr auf das Profil verweist, wenn Sie sich bereits auf der Profilseite befinden, sondern auf das Bild, das als Avatar dient, und wie Sie anschließend die nativen Größen der Avatare anpassen, um dies zu ermöglichen ein Avatar, der sich beim Klicken vergrößert öffnet (folgen Sie mir?!).

1. So verknüpfen Sie den Avatar mit seinem Vollbild

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 Markieren Sie die Avatar-URL, ohne die zugehörige HTML-Sprache ( <img src =…).

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

Sobald dieser Schritt erledigt ist, sollte Ihr Avatar normalerweise mit dem Bild und nicht mehr mit dem Profil verlinken. Jetzt müssen noch die Avatar-Größen geändert werden, um den Miniatur-Avatar für die Profilliste beizubehalten, beim Anklicken jedoch einen etwas größeren Avatar zu haben.

2. So ändern Sie die Avatar-Größe in 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 ( !definiert( 'BP_AVATAR_THUMB_WIDTH' ) )
define( 'BP_AVATAR_THUMB_WIDTH', 50 ); //Geben Sie die gewünschte Breite für die Miniaturbildgröße ein
if ( !definiert( 'BP_AVATAR_THUMB_HEIGHT' ) )
define( 'BP_AVATAR_THUMB_HEIGHT', 50 ); //Höhe der Miniaturgrößen
if ( !definiert( 'BP_AVATAR_FULL_WIDTH' ) )
define( 'BP_AVATAR_FULL_WIDTH', 400 ); //Tatsächliche Größenbreite
if ( !definiert( 'BP_AVATAR_FULL_HEIGHT' ) )
define( 'BP_AVATAR_FULL_HEIGHT', 400 ); //Höhe der tatsächlichen Größe

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

Sie können ganz einfach ein Attribut vom Typ „Lightbox“ hinzufügen, beispielsweise über rel="lightbox", wenn Sie ein Plugin haben, das so etwas verarbeitet. Dadurch werden Ihre Avatare etwas sexyer geladen.

Darüber hinaus verweise ich auf die Attribute der Funktion bp_displayed_user_avatar( 'type=full&width=150&height=150' ) : Wie Sie sehen können, haben wir uns dafür entschieden, den Avatar in „Vollgröße“, also in Originalgröße, anzuzeigen, aber die Größe der Ausgabe so zu ändern, dass wir auf der Profilseite ein Bild mittlerer Größe haben.

Diese Methode ist aus Sicht der Seitenladegeschwindigkeit sicherlich nicht zu empfehlen, vermeidet aber das Hinzufügen einer neuen Bildgröße für die Avatare. Sie können jedoch mit diesen Attributen experimentieren und an den gewünschten Stellen „type=thumb“ statt „full“ einfügen.

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.