Afficher l'avatar du dernier inscrit dans le QEEL

Coucou

Dans ce tutoriel, nous allons voir comment récupérer l'avatar du dernier membre inscrit pour le faire apparaître dans le qui est en ligne sous forme d'infobulle.

Tu peux voir le rendu de ce tutoriel sur mon forum de test

Pré-requis :
• Avoir accès aux templates du forum,
• Connaître le fonctionnement des positionnements en CSS,
• Avoir lu le tutoriel concernant les infobulles.

Ce tutoriel fonctionne sur toutes les versions de forum.

Ici, je pars du principe que les templates sont ceux par défaut. Logiquement, le tutoriel est assez simple à appliquer même sur un template personnalisé. Cela dit, si tu coinces, n'hésite pas à venir nous demander un coup de pouce.


Dans un premier temps, on va cibler la phrase qui correspond au dernier inscrit dans le QEEL. Grâce à ça, on va charger le lien vers son profil afin de pouvoir récupérer en javascript son avatar. On va ensuite afficher celui-ci dans le QEEL.
Enfin, avec un peu de CSS, on va faire en sorte que l'avatar s'affiche sous forme d'infobulle quand on survole le pseudo du membre.


La majorité des manipulations à faire sont communes à toutes les versions. Il y a juste 2 petites différences pour ModernBB et AwesomeBB. Mais ne t'inquiète pas, je le signalerai


Nous allons commencer par modifier le template qui contient le QEEL et en particulier l'information concernant le dernier utilisateur. Pour cela, nous allons aller dans Panneau d'affichage > Affichage > Templates > Général.

• Pour PhpBB2, PhpBB3, PunBB, Invision : il s'agit du template "index_body".
• Pour ModernBB, AwesomeBB : il s'agit du template "overall_footer_begin".

Nous allons ensuite repérer

Code:

{NEWEST_USER}

qui correspond à la phrase "L'utilisateur enregistré le plus récent est...".

Nous allons ajouter juste après cette variable la balise qui contiendra l'image et qu'on l'on affichera en infobulle :

Code:

<span id="ib-last-user"></span>

Et pour finir, on entoure le tout d'un span avec un id pour pouvoir le cibler en CSS et Javascript :

Code:

<span id="last-user">
    {NEWEST_USER}
    <span id="ib-last-user"></span>
</span>

On sauvegarde et on publie.


Voici ensuite le javascript à n'afficher que sur l'index. Pour cela, on va aller dans Panneau d'affichage > Modules > HTML & Javascript > Gestion des codes Javascript, on va créer un nouveau javascript et cocher "Sur l'index". Voici le code à y mettre. Celui-ci est commenté pour que tu puisses le comprendre :

Code:

$(function(){
   
    // On teste si l'information du dernier inscrit
    // est visible sur la page
    if( $('#last-user').length ){
   
        var $lastUser = $('#last-user'),
       
        // Dans ce cas, on va récupérer l'url vers le profil du dernier inscrit
            urlLastUser = $lastUser.find('a').attr('href'),
        // Et son pseudo
            pseudoLastUser = $lastUser.find('a > span > strong').text();
       
        // On déplace l'infobulle juste après le lien
        $('#last-user #ib-last-user').insertAfter($lastUser.find('a'));
       
        // on va récupérer l'avatar dans l'infobulle
        $('#last-user #ib-last-user').load('' + urlLastUser +' img[alt="'+ pseudoLastUser +'"]');

    }
});

Pour finir, il ne nous reste plus qu'à mettre la CSS pour cacher l'avatar par défaut et ne l'afficher sous forme d'infobulle que lorsque l'on survole le nom du dernier inscrit.

Pour cela, on va aller dans Panneau d'affichage > Affichage > Images & Couleurs > Couleurs > Feuille de style CSS et on va y mettre le code suivant :

Code:

/*** --- QEEL - Infobulle dernier inscrit --- ***/

/*** On cache l'infobulle au départ ***/
#last-user #ib-last-user{
    display: none;
}

/*** On indique le lien vers le profil du dernier utilisateur comme élement de référence ***/
#last-user > strong{
    position: relative;
}

/*** Au survol du pseudo, on affiche l'infobulle ***/
#last-user a:hover + #ib-last-user,
#last-user #ib-last-user:hover{
    background: #F2EACB; /* Couleurs de fond */
    border: #dbc8a4 1px solid; /* Les bordures de l'infobulle */
    border-radius: 5px; /* Coins arrondis */
    box-sizing: border-box;
    box-shadow: 0 1px 6px rgba(219, 200, 164 ,0.6); /* Ombrage */
    cursor: pointer;
    display: block;
    height: 120px; /* La hauteur de l'infobulle */
    padding: 6px;
    position: absolute;
    right: -10px; /* Position de l'infobulle par rapport au bord droit du lien */
    text-align: center;
    top: -10px; /* Position de l'infobulle par rapport au bord haut du lien */
}

/*** On fixe des dimensions pour l'image afin qu'elle ne dépasse pas
En général, c'est la hauteur qui est la plus grande. On l'impose de la même taille que celle de l'infobulle. La largeur s'adaptera. ***/
#last-user #ib-last-user img{
    display: block;
    height: 100%;
    width: auto;
}

En plus de la CSS précédente, il faut ajouter ceci :

Code:

/* On fait en sorte que l'infobulle ne soit pas coupée */
.statistics{
    overflow: visible;
}
       
.statistics .wrap:after{
    clear: both;
    content: " ";
    display: block;
}

Dans la CSS précédente, il faut remplacer ceci :

Code:

#last-user > strong{
    position: relative;
}

par :

Code:

#last-user > strong{
    display: inline-block;
    position: relative;
}

pour faire en sorte que l'infobulle ait une bonne référence pour son placement.

---

Et voilà, c'est terminé Si tu as un souci avec ce tutoriel, n'hésite pas à nous demander un coup de pouce.