Imagen personalizada en los títulos de los mensajes
Tabla de contenidos
Algunos foros están dando a sus usuarios nuevas formas de personalizar sus perfiles. Últimamente estoy viendo bastantes foros con imágenes elegidas por los usuarios al lado de los títulos de sus mensajes.
Según tengo entendido, esto es algo muy sencillo de implementar en la plataforma Jcink, pero en Foroactivo puede ser un poco más lioso. He decidido hacer esta guía para enseñaros como hacerlo en Foroactivo en unos muy sencillos pasos utilizando mi plugin de modificaciones a los perfiles.
Funcionamiento
El usuario podrá acceder a su perfil, donde un nuevo campo aparecerá para que introduzcan la URL a una imagen que deseen que aparezca en sus mensajes, al lado de los títulos.Instalación
Antes de nada asegúrate que has instalado el plugin de modificaciones a los perfiles, de lo contrario nada de lo que a continuación explique funcionará. Instalar el plugin no significa que tengas que activar todas sus características, la única que necesitaremos seráuniqueFieldClass: true,
.
Para empezar, crea un nuevo campo de perfil a tus usuarios (PA → Usuarios y Grupos → Perfiles). A la hora de completar las opciones el perfil, la siguiente configuración es obligatoria:
- Tipo: Campo de Texto
- Nombre: Cualquier nombre, para esta guía utilizaré «Imagen de los título»
- Obligatorio de completar: No
- Mostrar en: Solo los mensajes
- ¿Quién puede modificarlo?: Al menos usuarios
- Mostrar para al menos: Los invitados (de lo contrario los invitados solo verán una imagen por defecto)
.postprofile-field-imagen-de-los-titulos
.
Ahora edita la plantilla viewtopic_body
y busca:
<h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
<p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
Sustitúyelo por:
<div class="topictitle-container">
<div class="topictitle-info">
<h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
<p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
</div>
<div class="topictitle-image">
<img src="IMAGEN" alt="" />
</div>
</div>
Nota: Fíjate que en la parte a sustituir aparece IMAGEN
. Sustituye esa parte por una dirección a una imagen por defecto que aparecerá en caso de que:
- El usuario al que corresponde el mensaje aún no ha introducido una imagen.
- El que vea el mensaje sea un invitado y no hayas dado permiso a los invitados para ver el campo de perfil.
$(function() {
$('.postprofile-field-imagen-de-los-titulos').each(function() {
let image = $('.postprofile-field-content', this).text().trim();
image != '' && $(this).closest('.post').find('.topictitle-container .topictitle-image img').attr('src', image);
});
});
Nota: El código tiene una parte .postprofile-field-imagen-de-los-titulos
que se corresponde a la clase del campo de perfil que generó el plugin.
La lógica ya está, ahora tan solo falta añadir un poco de diseño. El CSS que os dejo a continuación tan solo sería una estructura básica para dejarlo como en la imagen de arriba, pero sois libres de modificarlo como veáis:
.postprofile-field-imagen-de-los-titulos {
display: none;
}
.topictitle-container {
border: 1px solid white;
padding: 10px;
/* las siguientes propiedades son parcialmente necesarias para la estructura
deseada y están ligadas a las propiedades obligatorias de más adlenate */
box-sizing: border-box;
width: 100%;
align-items: center;
/* las siguientes propiedades son obligatorias para la estructura deseada */
display: flex;
flex-direction: row-reverse;
}
.topictitle-container .topictitle-info {
/* las siguientes propiedades son parcialmente necesarias para la estructura
deseada y están ligadas a las propiedades obligatorias de más adlenate */
align-items: center;
/* las siguientes propiedades son obligatorias para la estructura deseada */
flex: 1;
display: flex;
flex-direction: column;
}
.topictitle-container .topictitle-info p.author {
margin: 0;
padding: 5px;
border: 1px solid white;
}
.topictitle-container .topictitle-info h2.topic-title {
border: 1px solid white;
padding: 10px;
margin-bottom: 20px !important;
}
.topictitle-container .topictitle-image img {
border: 1px solid white;
padding: 5px;
/* los siguientes atributos son importantes: fuerzan la altura y ancho
por si algún usuario pone medidas extrañas y que así no se descuadre */
width: 100px;
height: 100px;
}
Nota: En este CSS también hay una referencia a la clase de nuestro campo de perfil, en la primera línea (. postprofile-field-imagen-de-los-titulos
). Cambia esa parte, pues ocultará el campo de perfil para que no se vea la dirección.