Image dans le profil en fonction du groupe

 Hello

Dans ce tutoriel, nous allons voir comment ajouter une image dans le profil d'un membre dans un message en fonction du groupe auquel il appartient.


Tu peux voir le rendu sur l'un de mes forums de test :
https://miettes.lebonforum.com/
et plus précisemment dans ce topic :
https://miettes.lebonforum.com/t119-topic-divers

Comme tu le vois, dans ce sujet, plusieurs membres appartenant à des groupes différents ont répondu.

Nous allons ajouter une image pour 2 de ces groupes :
• une couronne pour le groupe des admins
• une caméra de surveillance pour le groupe "gestion des éléments du forum"


Pré-requis :
• Tu dois pouvoir accéder aux templates du forum,
• Pour que ce tutoriel fonctionne, tu dois avoir activer "Appliquer la couleur aux membres de ce groupe ? :" dans les groupes (Panneau d'administration → Utilisateurs & groupes → Groupes → Administration des groupes),
• Ce tutoriel fonctionne pour toutes les versions de forum.


Pour commencer, on va aller ajouter une balise dans notre template. Celle-ci va nous permettre de savoir où ajouter notre image. Pour cela, on va aller dans Panneau d'administration → Affichage → Templates → Général → viewtopic_body

Ici, je pars des templates par défaut, c'est-à-dire non modifiés.

On va commencer par entourer le pseudo du membre d'une classe pour récupérer facilement sa couleur :

Code:

<span class="poster-userlink">{postrow.displayed.POSTER_NAME}</span>

On va ensuite aller ajouter ceci :

Code:

<span class="tr-img-groupe"></span>

à l'endroit voulu. C'est cet élément qui affichera notre image. Personnellement, je veux afficher mon image à coté du pseudo du membre. Je vais donc l'ajouter juste avant :

Code:

{postrow.displayed.POSTER_NAME}

Ce qui donne :

Code:

<span class="tr-img-groupe"></span> <span class="poster-userlink">{postrow.displayed.POSTER_NAME}</span>

On sauvegarde et on publie le template.


On va ensuite ajouter un nouveau javascript. Pour cela, il faut aller dans Panneau d'administration → Modules → HTML & Javascript → Gestion des codes javascript. On va créer un nouveau javascript qu'on ne va afficher que sur les sujets et on va l'appeler "[SJT] Image du groupe dans le profil". On va ensuite y mettre le code suivant :

Code:

/*Au chargement de la page*/
$(function(){


  // On parcourt la liste des messages
  $( '[class*="post--"]' ).each( function(){
    // On garde en mémoire le message sur lequel on est
    var $this = $(this);
  
    // Si le membre a son pseudo coloré
    if($this.find('.poster-userlink a[href^="/u"] > span:first-child').length){
      // On récupère la couleur du groupe du membre
      var userColor = $this.find('.poster-userlink a[href^="/u"] > span:first-child').attr('style').split(':')[1];
    
      // On ajoute cette information à la balise qui doit afficher l'image
      $this.find('.tr-img-groupe').attr('data-usergroup', userColor);
    }
    
  
  });
 
});

Le code est commenté pour que tu puisses le comprendre, cela dit, tu n'as aucun changement à faire ici


Et pour finir, il ne nous manque qu'un peu de CSS pour afficher notre image. En effet, celle-ci sera affichée en tant qu'image de fond du bloc "tr-img-groupe" définit plus haut.

Pour cela, on va aller dans Panneau d'administration → Affichage → Images & couleurs → Couleurs → Feuille de style CSS et ajouter le code suivant :

Code:

/*** --- List Group - Profil --- ***/
.tr-img-groupe[data-usergroup]{
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 20px; /* Hauteur de l'image */
  width: 20px; /* Largeur de l'image */
}

/** Admin **/
.tr-img-groupe[data-usergroup="#941B1B"]{
  background-image: url("https://i.servimg.com/u/f71/20/05/19/39/2517210.png");
}

/** Gestion des éléments du forum **/
.tr-img-groupe[data-usergroup="#00B0F0"]{
  background-image: url("https://i.servimg.com/u/f71/20/05/19/39/514210.png");
}

La CSS n'est pas commentée, mais elle n'est pas compliquée à comprendre

---

Si tu as le moindre souci ou une question en rapport avec ce tutoriel, n'hésite pas à nous la poster à la suite de ce message.