Buddypress: vincula el avatar en miniatura a la imagen en tamaño completo

Si hay algo que a menudo me piden que personalice en una red social creada con el CMS Buddypress, eso es una buena gestión de avatar. En efecto, por un lado está el hecho de que el avatar siempre enlaza con la página ya abierta, lo que en sí mismo es inútil, y por otro lado su tamaño, que no puede personalizarse fácilmente para un no iniciado.

Por lo tanto, simplemente le explicaré cómo garantizar que el avatar ya no se vincule al perfil cuando ya esté en la página de perfil, sino a la imagen que sirve como avatar, y luego cómo modificar los tamaños nativos de los avatares para permitir un avatar para abrir en un tamaño más grande al hacer clic (¡¿me estás siguiendo?!).

1. Cómo vincular el avatar a su imagen a tamaño completo

miembros-encabezado.php

Ir a tu archivo encabezado-miembro.php (ubicado en la carpeta miembros/single/ de su tema Buddypress). Una vez en este archivo, busque la línea de código correspondiente a esto:

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

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

</a>

Reemplace este código con este:

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

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

</a>

Como puedes ver, aquí usamos la función. bp_core_fetch_avatar, con el atributo 'html' => falso, Que permite resaltar la URL del avatar, sin el lenguaje HTML que lo acompaña ( <img src =…).

Sube el archivo member-header.php.

Una vez realizado este paso, su avatar normalmente debería vincularse a la imagen y ya no al perfil. Ahora queda modificar los tamaños de los avatares, para mantener el avatar en miniatura para la lista de perfiles, pero tener un avatar un poco más grande al hacer clic.

2. Cómo cambiar los tamaños de avatar en Buddypress

funciones.php

Para hacer esto, nada podría ser más simple, ve a tu archivo de funciones (functions.php) para agregar estas líneas de código:

si (! definido ('BP_AVATAR_THUMB_WIDTH'))
definir ('BP_AVATAR_THUMB_WIDTH', 50); //Pon el ancho que quieras para el tamaño de la miniatura
si (! definido ('BP_AVATAR_THUMB_HEIGHT'))
definir ('BP_AVATAR_THUMB_HEIGHT', 50); //Altura de tamaños miniatura
si (! definido ('BP_AVATAR_FULL_WIDTH'))
definir ('BP_AVATAR_FULL_WIDTH', 400); //Ancho del tamaño real
si (! definido ('BP_AVATAR_FULL_HEIGHT'))
definir ('BP_AVATAR_FULL_HEIGHT', 400); //Altura del tamaño real

Usando este fragmento de código, estableces el tamaño real de los avatares en 400*400 y el tamaño de los avatares en miniatura en 50*50.

3. Extensiones y comentarios

Puedes agregar fácilmente un atributo de tipo “lightbox”, a través de rel="lightbox", por ejemplo, si tienes un complemento que maneja este tipo de cosas. Esto hará que tus avatares se carguen de una manera un poco más sexy.

Además, os remito a los atributos de la función. bp_displayed_user_avatar('tipo=completo&ancho=150&alto=150') : como puedes ver, elegimos mostrar el avatar en “completo”, es decir en tamaño real, pero cambiando el tamaño de la salida, para que en la página de perfil tengamos una imagen de tamaño intermedio.

Este método ciertamente no es recomendable desde el punto de vista de la velocidad de carga de la página, pero evita agregar un nuevo tamaño de imagen para los avatares. Sin embargo, puedes jugar con estos atributos eligiendo poner 'tipo=pulgar' en lugar de completo en los lugares que desees.

Conclusión: tu red social destaca las fotos de perfil

Gracias a este método, los avatares de tus miembros ahora enlazan con imágenes más grandes, lo que resulta mucho más práctico para gestionar redes donde la foto de perfil es importante.