Récupérer l'avatar d'un utilisateur fixe

[Grenaak]

Bonjour,

Afin d'automatiser quelque peu l'affichage des avatars de mon staff afin que la PA soit a jour en permanence, j'ai commencé a rechercher sur des topics plus anciens s'il était possible, avec le numéro d'utilisateur, d'afficher son avatar, et je suis tombé sur ce topic : https://forum.forumactif.com/t341492-code-de-l-avatar-d-un-membre

Le script qui permet d'afficher un avatar est fonctionnel mais il retourne l'avatar de son propre compte. Or il faudrait que le script (probablement en mettant le numéro d'utilisateur dans un 'id') récupère un numéro d'utilisateur fixe, et affiche l'avatar qui y est associé.

Voici mes codes actuels pour faire ceci :

JavaScript

Code:

        $(function() {
          $.get("/u" + +(my_getcookie("fa_" + location.host.replace(/\./g, "_") + "_data") || "").replace(/^.*"userid";(s:[1-9][0-9]*:"([1-9][0-9]*)"|i:([1-9][0-9]*));.*$/, "$2$3"), function(a) {
            $(".useravatar").attr("src", $("#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img", a).first().attr("src") || "http://i48.servimg.com/u/f48/16/78/05/90/myster10.png")
          })
        });

Extrait d'HTML concernant l'affichage des avatars

Code:

<img class="useravatar" />

Pour reprendre mes propos avec le code, j'imagine ajouter ceci dans ma ligne de code HTML pour pouvoir récupérer l'avatar d'un membre bien précis.

Code:

<img class="useravatar" id="numero_administrateur"/>

Cordialement

[Grenaak]

Up

[[Nihil]]

Hello

Je crois qu'il faut modifier cette partie là :

Code:

$.get("/u" +(my_getcookie("fa_" + location.host.replace(/\./g, "_") + "_data") || "").replace(/^.*"userid";(s:[1-9][0-9]*:"([1-9][0-9]*)"|i:([1-9][0-9]*));.*$/, "$2$3")

Qu'on remplacerait par :

Code:

$.get("/u5")

En remplaçant 5 par l'ID de l'utilisateur

L'id étant disponible sur la page du profil. Par exemple le tiens sur le FdF est 161555 : https://forum.forumactif.com/u161555

Ce qui donne donc :

Code:

$(function() {
  $.get("/u5", function(a) {
    $(".useravatar").attr("src", $("#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img", a).first().attr("src") || "http://i48.servimg.com/u/f48/16/78/05/90/myster10.png")
  })
});

Dis nous si ça fonctionne bien

[Grenaak]

ça risque de ne pas marcher comme je l'imagine.

Le script va récupérer -si j'ai bien compris- un avatar a la fois (admettons que je prenne forum.forumactif.com/u16155, je vais récupérer l'avatar que j'utilise sur FA.

Or ça ne règle pas exactement mon souci....Le script doit récupérer une information en entrée qui est donnée par le HTML. (J'imagine un id="161555" pour continuer sur le même exemple) et récupérer l'avatar de u161555, mais si l'id est de 12345, il doit récupérer l'avatar de u12345...

N'y connaissant pas grand chose en JS, mais un peu en développement en général, je propose de remplacer ceci.

Code:

$.get("/u5")

Par quelque chose qui ressemblerait a ça (Mon souci au fond est de ne pas connaître JS.)

Code:

$.get("id")

Est-ce que c'est possible ?

[[Nihil]]

J'ai du mal à comprendre ce que tu recherches exactement...

Or il faudrait que le script (probablement en mettant le numéro d'utilisateur dans un 'id') récupère un numéro d'utilisateur fixe, et affiche l'avatar qui y est associé.

Dans ta question tu parles d'un utilisateur fixe. Ce n'est pas un utilisateur fixe ? Tu veux que l'id soit associé à un champ dans un formulaire ? Ou bien y a-t-il plusieurs avatars ? Pour qu'on puisse t'aider davantage là il nous faudrait plus d'informations sur ce que tu veux faire

Le code ressemblera donc plus à ceci :

Code:

$.get("/u" + idMembre)

Reste à définir comment on définit idMembre, je te laisse nous en dire plus sur ce que tu veux faire ^^

[Grenaak]

Bon, j'ai essayé le script mais rien a faire, donc je vais reprendre un peu depuis le début.

J'ai dans mon en-tête, sur la page d'accueil, un affichage des avatars des membres du staff. (dans une balise img), mais plutôt que de créer des immages supplémentaires a chacun d'eux, j'aimerais que la mise a jour des avatars se fasse automatiquement (par le biais du Javascript).

Du coup, je suis tombé sur ce script qui permet de récupérer un affichage de son avatar. Fort bien mais c'est celui de certains membres bien précis que je veux.

Je pourrais éventuellement faire 5 scripts différents (1 pour chaque membre de mon staff) mais j'imaginais prendre uniquement un seul script qui récupère un nombre (un numéro utilisateur donc) et qu'il se mette a afficher dans les balises img l'avatar du numéro utilisateur demandé.

[[Nihil]]

Il nous faut ta page d’accueil actuelle pour pouvoir adapter le javascript

Il s'agit de la même question qu'ici : Recherche script pour avatar

Il faut adapter le javascript en fonction du HTML de ta page d’accueil, c'est pour ça qu'il faudrait que tu nous le fournisses

[Grenaak]

ça semble être ce que je recherche, mais il n'est pas possible de laisser ce script dans la gestion des scripts JV ? Après tout, la différence entre l'autre topic et ma demande, c'est que je ne l'utilise pas pour une page HTML mais pour ma page d'accueil.

J'essaie ce script plus tard dans la soirée.

[[Nihil]]

Bien sûr il est possible de laisser le script dans la gestion des script JS.

Mais pour faire le JS, il nous faudrait connaitre la structure HTML de ta PA pour l'instant. Connaitre la structure HTML actuelle de ta PA nous permet ainsi que modifier le javascript pour lui dire quelle classe sélectionner dans ta PA pour savoir où il doit insérer l'image dans le code.

[Grenaak]

Je vous laisse donc la partie du code où je souhaite récupérer les avatars : l'en-tête.

En sachant que dans cet en-tête il y a un système d'onglets fonctionnant avec un script JS que je mets en-dessous.

HTML (pour retrouver l'onglet concernant les avatars, il suffit de rechercher "useravatar" dans le code.)

Code:

<div class="en_tete_overall">
                                                                                                    
   <div class="systab">
                                                                                                               
      <div class="selected">
                                                                     <span>Contexte</span>                                                         
         <div class="contenu_taille">
                                                                                                     
            <div class="onglet_contexte">
                                                           Aujourd'hui, 3 ans se sont écoulés depuis la défaite du célèbre Sonic le Hérisson. Dr.Eggman s'isole de plus en plus de la politique pour se renfermer sur ses recherches et laisse ses sbires faire la loi. L'antiSonic se rebaptisa Scourge le Hérisson et il devint un terroriste de renommée internationale. Tandis tous les royaumes, les pays et les factions se déchirent, entre les partisans et les anti-partisans de l'empire d'Eggman. L'injustice, l'industrialisation de masse, la corruption, l'esclavage et la violence règnent en maîtres, sans oublier les rafles quotidiennes perpétrées par les robots afin de robotiser toute personne qui ose contester l'autorité d'Eggman. Le monde de Mobius est déchiré et divisé. Mais l'âge des ténèbres ne fait que commencer, mais personne ne l'a vu venir...                                           
            </div>
                                                        <a href="http://bluezone.frbb.net/t615-contexte-de-blue-zone" class="link_contexte">Voir le contexte</a>                                           
         </div>
                                                                                                                  
      </div>
                                                                                                               
      <div>
                                                                     <span>Le staff de Blue Zone</span>                                                         
         <div class="contenu_taille">
                                                                 
            <div class="staff_center">
                                                                                                            
               <div class="décoration_avatar">
                                                                                                                                     
                  <div class="titre_décoration_avatar">
                                                           Me. Renard                                     
                  </div>
                                                        <img class="useravatar" />                                     
                  <div class="desc_staff">
                                                                                      
                     <div class="titre_staff">
                                                          Fondateur                               
                     </div><a href="http://bluezone.frbb.net/privmsg?mode=post&u=1" class="link_staff">Le contacter</a><br /><a href="http://bluezone.frbb.net/u1" class="link_staff">Voir son profil</a>                                   
                  </div>
                                                                                           
               </div>
                                                                                  
               <div class="décoration_avatar">
                                                                                                                                   
                  <div class="titre_décoration_avatar">
                                                         Jet the Hawk                                   
                  </div>
                                                        <img class="useravatar" />                                   
                  <div class="desc_staff">
                                                                                    
                     <div class="titre_staff">
                                                        Maître du jeu                               
                     </div><a href="http://bluezone.frbb.net/privmsg?mode=post&u=16" class="link_staff">Le contacter</a><br /><a href="http://bluezone.frbb.net/u16" class="link_staff">Voir son profil</a>                                 
                  </div>
                                                                                     
               </div>
                                                                      
               <div class="décoration_avatar">
                                                                                                                                     
                  <div class="titre_décoration_avatar">
                                                           Sally Acorn                                     
                  </div>
                                                        <img class="useravatar" />                                     
                  <div class="desc_staff">
                                                                                      
                     <div class="titre_staff">
                                                          Modérateur                                 
                     </div><a href="http://bluezone.frbb.net/privmsg?mode=post&u=61" class="link_staff">Le contacter</a><br /><a href="http://bluezone.frbb.net/u61" class="link_staff">Voir son profil</a>                                   
                  </div>
                                                                                           
               </div>
                                                                                  
               <div class="décoration_avatar">
                                                                                                                                   
                  <div class="titre_décoration_avatar">
                                                         Lien-Da                                   
                  </div>
                                                        <img class="useravatar" />                                   
                  <div class="desc_staff">
                                                                                    
                     <div class="titre_staff">
                                                        Modératrice                               
                     </div><a href="http://bluezone.frbb.net/privmsg?mode=post&u=125" class="link_staff">La contacter</a><br /><a href="http://bluezone.frbb.net/u125" class="link_staff">Voir son profil</a>                                 
                  </div>
                                                                                     
               </div>
                                                                
               <div class="décoration_avatar">
                                                                                                                                   
                  <div class="titre_décoration_avatar">
                                                         Saber Irwin                                   
                  </div>
                                                        <img class="useravatar" />                                   
                  <div class="desc_staff">
                                                                                    
                     <div class="titre_staff">
                                                        Modérateur                               
                     </div><a href="http://bluezone.frbb.net/privmsg?mode=post&u=134" class="link_staff">Le contacter</a><br /><a href="http://bluezone.frbb.net/u134" class="link_staff">Voir son profil</a>                                 
                  </div>
                                                                                     
               </div>
                                                                  
            </div>
                                                                   
         </div>
                                                                                                          
      </div>
                                                                                                               
      <div>
                                                                     <span>Navigation Rapide</span>                                                         
         <div class="contenu_taille">
                                                                                         
            <table class="table_nav">
                                                            
               <tbody>
                                                               
                  <tr>
                                                                  
                     <td>
                                                <a href="http://bluezone.frbb.net/t464-vous-souhaitez-commencer-votre-experience-sur-les-forums-rp-a-blue-zone-ce-tutoriel-est-pour-vous">Tutoriel</a>                       
                     </td>
                                                                  
                     <td>
                                                Si vous souhaitez vous inscrire sur Blue Zone, sans réellement savoir comment préparer votre fiche de validation, vous pouvez consulter le tutoriel.                       
                     </td>
                                                                    
                  </tr>
                                                           
                  <tr>
                                                              
                     <td>
                                              <a href="http://bluezone.frbb.net/t615-contexte-de-blue-zone">Contexte</a>                     
                     </td>
                                                              
                     <td>
                                              Le contexte de Blue Zone vous permettra de connaître rapidement la situation RP du forum.                     
                     </td>
                                                              
                  </tr>
                                                           
                  <tr>
                                                              
                     <td>
                                              <a href="http://bluezone.frbb.net/t174-les-factions-principales">Factions</a>                     
                     </td>
                                                              
                     <td>
                                              Forces de la GUN, Freedom Fighters, Dark Legion, Eggman Empire...Toutes les informations sur les principales forces en présence du forum sont ici.                     
                     </td>
                                                              
                  </tr>
                                                           
                  <tr>
                                                              
                     <td>
                                              <a href="http://bluezone.frbb.net/t665-les-modeles-de-fiche-de-presentation-disponibles">Modèles de fiche</a>                     
                     </td>
                                                              
                     <td>
                                              3 modèles de fiches sont disponibles, ainsi que les règles spécifiques à la rédaction et à la personnalisation des fiches de personnages.                     
                     </td>
                                                              
                  </tr>
                                                           
                  <tr>
                                                              
                     <td>
                                              <a href="http://bluezone.frbb.net/t17-les-celebrites-disponibles">Prédéfinis</a>                     
                     </td>
                                                              
                     <td>
                                              Nombreux sont les personnages issus de l'univers de Sonic. Ce lien vous amènera vers une liste non-exhaustive de ceux-ci, ainsi que leur disponibilité.                     
                     </td>
                                                              
                  </tr>
                                                         
                  <tr>
                                                            
                     <td>
                                            <a href="http://bluezone.frbb.net/f28-foire-aux-questions">F.A.Q. des invités</a>                   
                     </td>
                                                            
                     <td>
                                            Vous n'êtes pas encore inscrit mais vous avez des questions à poser sur le forum ? Vous pouvez ouvrir en tant qu'invité un topic pour poser vos questions.                   
                     </td>
                                                            
                  </tr>
                                                       
                  <tr>
                                                          
                     <td>
                                            <a href="http://bluezone.frbb.net/f27-demande-de-partenariat">Demande de partenariat</a>                   
                     </td>
                                                          
                     <td>
                                            Si vous souhaitez faire une demande de partenariat, c'est ici que ça se passe. Vous trouverez au passage nos boutons de partenariat, ainsi que notre fiche.                   
                     </td>
                                                          
                  </tr>
                                                                                               
               </tbody>
                                                            
            </table>
                                                                               
         </div>
                                                                                                                  
      </div>
                                                                                                               
      <div>
                                                                     <span>Event en cours/prochain event</span>                                                         
         <div class="contenu_taille">
                                                            Mon contenu 2                                             
         </div>
                                                                                                              
      </div>
                                                                                                                           
      <div>
                                                                     <span>Topsites & partenaires</span>                                                         
         <div class="contenu_taille">
                 
            <div class="titre_partenaires">
                 Nos topsites 
            </div>
                                    <!-- Accumulation des topsites --> 
            <div class="titre_partenaires">
                 Nos partenaires   
            </div>
                 
            <div class="bloc_partenaires">
                   <!--Accumulation des partenaires du forum -->     
            </div>
                                                   
         </div>
                                                                                                              
      </div>
                                                                                                 
   </div>
                                                              
</div>

JS (permettant au fonctionnement du menu a onglets)

Code:

$(function() {
            // clic sur un onglet
            var d = function() {
                // si l'onglet est déjà actif, ne rien faire
                if ($(this).is(".selected")) return;
                // affiche le contenu correspondant et on met l'onglet en sélectionné
                var a = $(this).closest(".systab");
                a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
                $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
            };
            // pour chacun des systèmes d'onglets
            $("div.systab").each(function() {
                var a = $("> div", this).detach(),
                    c = this,
                    b;
                // on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
                $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
                    "tabs" : "contents") + '"></div>');
                $(a).each(function() {
                    b = $(this).children(":first");
                    b.is("span") ? (
                        $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
                });
                $("> div.contents", this).append(a);
                b = $(".content:first,.content.selected", this).last();
                $(b).addClass("selected").siblings().hide();
                $(b).data("tab").addClass("selected")
            }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
        });

[[Nihil]]

Merci beaucoup !

Alors, dans le javascript on peut mettre ceci :

Code:

$(function(){
    /* recuperer l'avatar pour chaque personne */
    $('.js-replace-avatar').each(function(){
        var lienProfil = $(this).attr('href'); /* trouve le lien du profil*/
     
        /* verifie qu'il s'agit bien d'un lien de profil */
        if (! /^\/u\d+$/.test(lienProfil)) return;
       
        /* recupere l'avatar sur la page /uXXX */
        $.get(lienProfil, function(a){
            $("img", this).src("src", $("#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img", a).first().attr("src") || "http://i48.servimg.com/u/f48/16/78/05/90/myster10.png");
        });
    });
});


Ensuite dans ton HTML tu peux remplacer :

Code:

<img class="useravatar" />

Par ceci :

Code:

<a href="/u2" class="js-replace-avatar" title="Profil de XXX"><img class="useravatar" /></a>

/u2 correspond au lien vers le profil (utilisateur n°2). 2 est l'idMembre comme je disais plus haut

Si le code ne marche pas, pourrais tu fournir le lien de ton forum pour qu'on regarde directement dans la console du navigateur le problème s'il te plait ?

[Grenaak]

(Désolé de la semaine passée, j'ai légèrement laissé de côté ce souci d'avatar.)

Le script ne fonctionne apparemment pas (Il est sensé faire au moins apparaître l'avatar de u1 sauf que ce n'est pas le cas)

Je laisse donc le lien vers le forum de test : http://grenaak-industry.forumactif.org/

[[Nihil]]

Hello, avec ce JS là ça devrait être mieux

Code:

$(function(){
    /* recuperer l'avatar pour chaque personne */
    $('.js-replace-avatar').each(function(){
        var $this = $(this);
        var lienProfil = $this.attr('href'); /* trouve le lien du profil*/
   
        /* verifie qu'il s'agit bien d'un lien de profil */
        if (! /^\/u\d+$/.test(lienProfil)) return;
     
        /* recupere l'avatar sur la page /uXXX */
        $.get(lienProfil, function(a){
            $("img", $this).attr("src", $("#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img", a).first().attr("src") || "http://i48.servimg.com/u/f48/16/78/05/90/myster10.png");
        });
    });
});

Seul le premier profil peut se charger, pas les suivants car ils ne sont pas inscrits sur ton forum test (^-^)

[Grenaak]

Seul le premier profil peut se charger, pas les suivants car ils ne sont pas inscrits sur ton forum test (^-^)

Forcément, je me doute qu'il ne va pas afficher l'avatar d'un utilisateur qui n'existe pas sur mon forum. et a juste titre je veux juste voir s'il marche sur le premier utilisateur.

Et donc après modification du JS, tout semble fonctionner, donc merci beaucoup, je fais les modifications (résolu + merci)