Ajouter des champs du profil à l'aperçu du mentiontag

[Invité]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://viewsbetweenvillages.forumactif.com/

Description du problème

Bonjour, j'aurais aimé savoir si quelqu'un aurait trouvé un moyen/trouvé un js (hell) qui permet d'ajouter quelques champs du profil dans l'aperçu du mentiontag s'il vous plait ?
Merci beaucoup d'avance pour votre aide er bonne journée !

[Invité]

je me permets de upper, car je ne parviens pas à savoir comment résoudre cet épineux problème...

[Milouze14]

Hello aceillm,
que veux tu ajouter dans l'aperçu du mentiontag?
a++

[Toryudo]

Bonjour !

Techniquement, c'est faisable en modifiant le Template mentions_tooltip.
Le principe, c'est qu'à l'affichage du cadre, le Template va aller regarder la page profil du membre en question pour récupérer les informations supplémentaire.
Si je me fie à ce que je vois sur le forum https://viewsbetweenvillages.forumactif.com ça donnerait très grossièrement quelque chose comme ça :

Code:

<div class="main-tooltip">
   <div class="tooltip-content">
      <img src="{USER_AVATAR}" alt="{USER_NAME}" loading="lazy" />
      <span class="tooltip-title">{USER_NAME_COLORED}</span>
      <!-- BEGIN switch_followers -->
      <button onclick="doFollowAction(this);" data-id="{USER_ID}" class="followBtn {C_FOLLOW} ion-android-notifications{C_FOLLOW_ICON} button1">
         {L_FOLLOW_TXT}
      </button>
      <!-- END switch_followers -->
      <!-- BEGIN switch_rank_info -->
      <span class="tooltip-subtitle">{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}</span>
      <!-- END switch_rank_info -->
      <ul class="tooltip-counts">
         <li>{L_POSTS}: <b>{POSTS}</b></li>
         <!-- BEGIN switch_allow_friends -->
         <li>{L_FRIENDS}: <b>{FRIENDS}</b></li>
         <!-- END switch_allow_friends -->
      </ul>
      <div id="tooltip-loadedinfo"></div>
   </div>
   <div class="tooltip-actions">
      <ul>
         <!-- BEGIN switch_button_tooltip_PROFILE -->
         <li>
            <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
               <img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_PROFILE -->
         <!-- BEGIN switch_button_tooltip_PM -->
         <li>
            <a href="{switch_button_tooltip_PM.URL}" title="{switch_button_tooltip_PM.LANG}">
               <img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_PM -->
         <!-- BEGIN switch_button_tooltip_FRIEND -->
         <li>
            <a href="{switch_button_tooltip_FRIEND.URL}" title="{switch_button_tooltip_FRIEND.LANG}">
               <img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_FRIEND -->
         <!-- BEGIN switch_button_tooltip_MESSAGES -->
         <li>
            <a href="{switch_button_tooltip_MESSAGES.URL}" rel="nofollow" title="{switch_button_tooltip_MESSAGES.LANG}">
               <img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_MESSAGES -->
         <!-- BEGIN switch_button_tooltip_FACEBOOK -->
         <li>
            <a href="{switch_button_tooltip_FACEBOOK.URL}" target="_blank" title="{switch_button_tooltip_FACEBOOK.LANG}">
               <img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_FACEBOOK -->
         <!-- BEGIN switch_button_tooltip_TWITTER -->
         <li>
            <a href="{switch_button_tooltip_TWITTER.URL}" target="_blank" title="{switch_button_tooltip_TWITTER.LANG}">
               <img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_TWITTER -->
      </ul>
   </div>
</div>
<script>
$.get( "https://viewsbetweenvillages.forumactif.com/u" + {USER_ID}, function( data ) {
  $('#tooltip-loadedinfo').append($(data).find('.spro_info'));
});
</script>

Edit : désolé Milouze, je regardais aussi en même temps, ce sera à affiner si besoin !

[Milouze14]

Hello Toryudo,
pas de soucis cher ami, j'avais déjà ajouté certaines fonctions dans ce template .
Ta solution est vraiment remarquable .

a++

[Invité]

Je vais essayer ça, en l'occurrence j'aimerais faire apparaitre le pseudo du membre, le nom de la célébrité jouée ainsi que l'âge, voire le métier du personnage.

[Milouze14]

Hello aceillm,

alors en reprenant le script de Toryudo que je salue, tu devrais obtenir satisfaction, le script placé tout en bas va rechercher ce que tu désires .

Donc édites le template nommé "mentions_tooltip" , supprimes tout le contenu et remplaces par celui-ci:

Code:

<div class="main-tooltip">
   <div class="tooltip-content">
      <img src="{USER_AVATAR}" alt="{USER_NAME}" loading="lazy" />
      <span class="tooltip-title">{USER_NAME_COLORED}</span>
      <!-- BEGIN switch_followers -->
      <button onclick="doFollowAction(this);" data-id="{USER_ID}" class="followBtn {C_FOLLOW} ion-android-notifications{C_FOLLOW_ICON} button1">
         {L_FOLLOW_TXT}
      </button>
      <!-- END switch_followers -->
      <!-- BEGIN switch_rank_info -->
      <span class="tooltip-subtitle">{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}</span>
      <!-- END switch_rank_info -->
      <ul class="tooltip-counts">
         <li>{L_POSTS}: <b>{POSTS}</b></li>
         <!-- BEGIN switch_allow_friends -->
         <li>{L_FRIENDS}: <b>{FRIENDS}</b></li>
         <!-- END switch_allow_friends -->
      </ul>
      <div id="tooltip-loadedinfo"></div>
   </div>
   <div class="tooltip-actions">
      <ul>
         <!-- BEGIN switch_button_tooltip_PROFILE -->
         <li>
            <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
               <img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_PROFILE -->
         <!-- BEGIN switch_button_tooltip_PM -->
         <li>
            <a href="{switch_button_tooltip_PM.URL}" title="{switch_button_tooltip_PM.LANG}">
               <img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_PM -->
         <!-- BEGIN switch_button_tooltip_FRIEND -->
         <li>
            <a href="{switch_button_tooltip_FRIEND.URL}" title="{switch_button_tooltip_FRIEND.LANG}">
               <img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_FRIEND -->
         <!-- BEGIN switch_button_tooltip_MESSAGES -->
         <li>
            <a href="{switch_button_tooltip_MESSAGES.URL}" rel="nofollow" title="{switch_button_tooltip_MESSAGES.LANG}">
               <img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_MESSAGES -->
         <!-- BEGIN switch_button_tooltip_FACEBOOK -->
         <li>
            <a href="{switch_button_tooltip_FACEBOOK.URL}" target="_blank" title="{switch_button_tooltip_FACEBOOK.LANG}">
               <img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_FACEBOOK -->
         <!-- BEGIN switch_button_tooltip_TWITTER -->
         <li>
            <a href="{switch_button_tooltip_TWITTER.URL}" target="_blank" title="{switch_button_tooltip_TWITTER.LANG}">
               <img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_TWITTER -->
      </ul>
   </div>
</div>
<script>
$.get( "https://viewsbetweenvillages.forumactif.com/u" + {USER_ID}, function( data ) {
$('#tooltip-loadedinfo').append(
$(data).find('.spro_1 .spro_username strong,.spro_1 .spro_info dl[id="field_id1"],.spro_1 .spro_info dl[id="field_id3"],.spro_1 .spro_info dl[id="field_id4"]')
);});
</script>


------------------------------
EDIT:
J'ai revu quelque peu le script et le template afin d'insérer une balise ul au lieu d'une div , cela devrait régler le positionnement de cette dernière .

Remplaces donc la totalité par ce contenu:

Code:



<style>
 
  #tooltip-loadedinfo{margin-top:45px;}
  #tooltip-loadedinfo li b{float:right;}
</style>
  <div class="main-tooltip">
   <div class="tooltip-content">
      <img src="{USER_AVATAR}" alt="{USER_NAME}" loading="lazy" />
      <span class="tooltip-title">{USER_NAME_COLORED}</span>
      <!-- BEGIN switch_followers -->
      <button onclick="doFollowAction(this);" data-id="{USER_ID}" class="followBtn {C_FOLLOW} ion-android-notifications{C_FOLLOW_ICON} button1">
         {L_FOLLOW_TXT}
      </button>
      <!-- END switch_followers -->
      <!-- BEGIN switch_rank_info -->
      <span class="tooltip-subtitle">{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}</span>
      <!-- END switch_rank_info -->
      <ul class="tooltip-counts">
         <li>{L_POSTS}: <b>{POSTS}</b></li>
         <!-- BEGIN switch_allow_friends -->
         <li>{L_FRIENDS}: <b>{FRIENDS}</b></li>
         <!-- END switch_allow_friends -->
      </ul>
          <ul id="tooltip-loadedinfo">
            <li>Pseudo: <b class="premier"></b></li>
            <li>Nom célébrité: <b class="deuxieme"></b></li>
            <li>Âge: <b class="troisieme"></b></li>
            <li>Métier: <b class="quatrieme"></b></li>
          </ul>
   </div>
   <div class="tooltip-actions">
      <ul>
         <!-- BEGIN switch_button_tooltip_PROFILE -->
         <li>
            <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
               <img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_PROFILE -->
         <!-- BEGIN switch_button_tooltip_PM -->
         <li>
            <a href="{switch_button_tooltip_PM.URL}" title="{switch_button_tooltip_PM.LANG}">
               <img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_PM -->
         <!-- BEGIN switch_button_tooltip_FRIEND -->
         <li>
            <a href="{switch_button_tooltip_FRIEND.URL}" title="{switch_button_tooltip_FRIEND.LANG}">
               <img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_FRIEND -->
         <!-- BEGIN switch_button_tooltip_MESSAGES -->
         <li>
            <a href="{switch_button_tooltip_MESSAGES.URL}" rel="nofollow" title="{switch_button_tooltip_MESSAGES.LANG}">
               <img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_MESSAGES -->
         <!-- BEGIN switch_button_tooltip_FACEBOOK -->
         <li>
            <a href="{switch_button_tooltip_FACEBOOK.URL}" target="_blank" title="{switch_button_tooltip_FACEBOOK.LANG}">
               <img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_FACEBOOK -->
         <!-- BEGIN switch_button_tooltip_TWITTER -->
         <li>
            <a href="{switch_button_tooltip_TWITTER.URL}" target="_blank" title="{switch_button_tooltip_TWITTER.LANG}">
               <img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" loading="lazy" />
            </a>
         </li>
         <!-- END switch_button_tooltip_TWITTER -->
      </ul>
   </div>
</div>

<script>
$.get( "https://viewsbetweenvillages.forumactif.com/u" + {USER_ID}, function( data ) {
var a=$(data).find('.spro_1 .spro_username strong').text();
var b=$(data).find('.spro_1 .spro_info dl[id="field_id1"] dd div:first').text();
var c=$(data).find('.spro_1 .spro_info dl[id="field_id3"] dd div:first').text(),
var d=$(data).find('.spro_1 .spro_info dl[id="field_id4"] dd div:first').text();                       
$('#tooltip-loadedinfo .premier').append(a),
$('#tooltip-loadedinfo .deuxieme').append(b),
$('#tooltip-loadedinfo .troisieme').append(c),
$('#tooltip-loadedinfo .quatrieme').append(d);
});
</script> 



Dans le template tu vas trouver ce code html:

Code:

 
  <ul id="tooltip-loadedinfo">
            <li>Pseudo: <b class="premier"></b></li>
            <li>Nom célébrité: <b class="deuxieme"></b></li>
            <li>Âge: <b class="troisieme"></b></li>
            <li>Métier: <b class="quatrieme"></b></li>
          </ul>


Tu peux modifier les textes ici si tu le désires .

Ensuite un peu de style pour décaler sous l'avatar et placer les importations du profil à droite.

Code:


<style>
 
  #tooltip-loadedinfo{margin-top:45px;}
  #tooltip-loadedinfo li b{float:right;}
</style>


a++

[Chacha]

Bonjour, Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Invité]

@"Milouze14" Bonjour, merci beaucoup pour votre aider, je vais essayer ça !

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.