Buddypress: collega l'avatar in miniatura all'immagine a grandezza naturale

Se c'è una cosa che spesso mi viene chiesto di personalizzare su un social network costruito con il CMS Buddypress, è un'ottima gestione degli avatar. C'è infatti da un lato il fatto che l'avatar si collega sempre alla pagina già aperta, cosa di per sé inutile, e dall'altro le sue dimensioni, che non possono essere facilmente personalizzate per un non esperto.

Ti spiegherò quindi semplicemente come fare in modo che l'avatar non si colleghi più al profilo quando sei già nella pagina del profilo ma piuttosto all'immagine che funge da avatar, e poi come modificare le dimensioni native degli avatar per consentire un avatar da aprire in dimensioni maggiori quando cliccato (mi segui?!).

1. Come collegare l'avatar alla sua immagine a dimensione intera

membri-intestazione.php

Vai al tuo file intestazione-membro.php (situato nella cartella members/single/ del tuo tema Buddypress). Una volta in questo file, trova la riga di codice corrispondente a questa:

<a href="/it/ »NO NUMERIC NOISE KEY/" 1000 »>

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

</a>

Sostituisci questo codice con questo:

<a href="/it/ »NO NUMERIC NOISE KEY/" 1000 »>

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

</a>

Come puoi vedere, qui usiamo la funzione bp_core_fetch_avatar, con l'attributo 'html' => falso, che permette evidenziare l'URL dell'avatar, senza il linguaggio HTML associato ( <img src =…).

Carica il file members-header.php.

Una volta eseguito questo passaggio, il tuo avatar dovrebbe normalmente collegarsi all'immagine e non più al profilo. Ora resta da modificare le dimensioni dell'avatar, in modo da mantenere l'avatar in miniatura per la lista dei profili, ma avere un avatar leggermente più grande quando cliccato.

2. Come modificare le dimensioni dell'avatar in Buddypress

funzioni.php

Per fare ciò, niente di più semplice, vai al tuo file di funzioni (functions.php) per aggiungere queste righe di codice:

if (!definito('BP_AVATAR_THUMB_WIDTH'))
define('BP_AVATAR_THUMB_WIDTH', 50 ); //Inserisci la larghezza che desideri per la dimensione della miniatura
if (!definito('BP_AVATAR_THUMB_HEIGHT'))
define('BP_AVATAR_THUMB_HEIGHT', 50 ); //Altezza delle dimensioni in miniatura
if (!definito('BP_AVATAR_FULL_WIDTH'))
define('BP_AVATAR_FULL_WIDTH', 400); //Larghezza della dimensione effettiva
if (!definito('BP_AVATAR_FULL_HEIGHT'))
define('BP_AVATAR_FULL_HEIGHT', 400); //Altezza della dimensione effettiva

Usando questo pezzo di codice, imposti la dimensione reale degli avatar su 400*400 e la dimensione degli avatar in miniatura su 50*50.

3. Estensioni e commenti

Puoi facilmente aggiungere un attributo di tipo "lightbox", ad esempio tramite rel="lightbox", se hai un plugin che gestisce questo tipo di cose. Ciò farà caricare i tuoi avatar in un modo leggermente più sexy.

Inoltre vi rimando agli attributi della funzione bp_displayed_user_avatar('tipo=pieno&larghezza=150&altezza=150') : come puoi vedere, abbiamo scelto di visualizzare l'avatar “full”, cioè a grandezza reale, ma ridimensionando l'output, in modo che nella pagina del profilo, abbiamo un'immagine di dimensione intermedia.

Questo metodo è sicuramente sconsigliato dal punto di vista della velocità di caricamento della pagina, ma evita di aggiungere una nuova dimensione all'immagine per gli avatar. Puoi comunque giocare con questi attributi, scegliendo di mettere 'type=thumb' anziché full nei posti che preferisci.

Conclusione: il tuo social network mette in risalto le foto del profilo

Grazie a questo metodo, gli avatar dei tuoi membri ora si collegano a immagini più grandi, il che è molto più pratico per gestire le reti in cui la foto del profilo è importante.