Cómo mostrar la foto de portada detrás del avatar en la barra lateral

La nueva versión de WoltLab Suite ha mejorado la estética de la lista de miembros y ahora se muestra la foto de portada tras el avatar. Este efecto también se puede replicar en la barra lateral del foro y conseguir un efecto bastante interesante para tu comunidad. Aquí te explicamos varias formas para implementarlo.

Este efecto lo vi por primera vez en el foro de SoftCreator, miembro y desarrollador de plugins del ecosistema de Woltlab. Al verlo me gustó tanto que busqué en la comunidad de WoltLab si alguien había preguntado cómo hacerlo. Así descubrí que hay dos formas de implementar la foto de portada detrás del avatar en la barra lateral en nuestro foro y las comparto en este artículo por si tú también estas interesado en este efecto.

'Enhanced Cover Photos' de VieCode

La primera opción es utilizar el plugin Enhanced Cover Photos de VieCode. Este complemento es gratuito y cuenta con casi 900 descargas cuando escribo este artículo. La ventaja de usar esta solución es que nada más instalarlo ya muestra las fotos de portada en la barra lateral de los usuarios sin tener que ajustar ningún parámetro.

Esta opción posiblemente sea la más accesible y sencilla para todas las personas, sobre todo, para aquellas que no tienen conocimientos técnicos para editar el código del software. Sin embargo, hay quien prefiere no depender de complementos externos y editar directamente las plantillas y el código CSS de su instalación, de forma que controlan los cambios que realizan y no tienen que estar pendientes de si el desarrollador actualiza el plugin.

Edita las plantillas y el CSS

Si eres de los que prefieres prescindir de complementos de terceros y te atreves a editar las plantillas y el código CSS de tu foro, aquí te mostramos la solución aportada por @CL4Y en el foro oficial de WoltLab. Esta solución solo es posible si tienes acceso al servidor o hosting donde se encuentra alojada tu instalación de WoltLab Suite.

Paso 1. Edita la plantilla 'messageSidebar'

El primer paso será editar la plantilla messageSidebar añadiendo el siguiente código en la línea 13. Para editar la plantilla deberás acceder a través del FTP a tu instalación y buscar la carpeta /templates. En dicha carpeta encontrarás el archivo messageSidebar.tpl. Una vez editada la plantilla deberás guardarla y volver a subirla para que tenga efecto.

Code
<div class="messageAuthorBackground" style="background-image: url({@$userProfile->getCoverPhoto()->getURL()});"></div>

Paso 2. Añade el código CSS

Para conseguir que la foto de portada se vea en el lugar y con la apariencia adecuada es necesario añadir el código CSS que te compartimos a continuación. Este código deberás añadirlo en el panel de administración en la ruta "ACP → Personalización → Estilos → CSS y SCSS globales".


Si te atreves a probar este efecto verás que mejora sustancialmente la apariencia de tu comunidad, a la vez que anima a tus usuarios a usar una foto de portada personalizada, lo que les hará diferenciarse de los demás. Además, no tienes porque esperar a que los usuarios editen su foto de portada para conseguir un toque personal para tu foro, ya que puedes editar el archivo por defecto de las foto de portada y utilizar una imagen acorde al estilo de tu comunidad.

Y ahora que sabes como hacerlo, ¿te imaginas una foto de portada con un gif tras tu avatar? ;)


En WoltLab Community | Mostrar imagen de portada en la barra lateral (en alemán)

Comments