Imagen personalizada en los títulos de los mensajes

Flerex
hace 6 años
Códigos
hace 5 años
FA/phpBB3
Foroactivo
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)
Una vez creado el nuevo campo, vete a tu perfil y rellénalo con una imagen de prueba. Ahora, vete a un mensaje tuyo cualquiera y haz clic derecho en el campo y elige la opción «Inspeccionar Elemento». Copia la clase generada por el plugin para dicho campo. Por ejemplo, en mi caso sería: .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.
A continuación tan solo tienes que añadir el siguiente código JS (PA → Módulos → Gestión de JS) y mostrarlo solo en los temas. 
$(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.

Sobre el código…

Quiero aclarar que este código lo hice para una petición de soporte y está pensado desde el punto de vista de como trabajar con mi plugin, por eso no está preparado para ser automático sin tener que hacer muchas modificaciones, como los que suelo traer. Pido disculpas por esto, pero no debería dar ningún tipo de problema a parte del hecho de que se requiera un poco más de tiempo para instalarlo.