AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -45%
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre ...
Voir le deal
339 €

    [Terminé merci Nihil!] Afficher auto. l'avatar d'un membre sur la PA

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 8 Mar 2015 - 12:40

    Afficher automatiquement l'avatar d'un membre sur la PA



    Hello mes amis codeurs! :hug:
    Pour une fois, c'est moi qui suis du côté des demandeurs ici, parce qu'en fait je ne sais pas du tout comment faire ça. Je pense bien qu'il faut du JavaScript, mais je ne sais pas du tout par où commencer, donc je préfère faire une demande x)


    Schéma(s) et Eléments
    Schémas : Je n'ai aps de schéma, mais je pense que l'explication sera assez claire. Je suis en train de terminer la PA pour mon forum et dans la section staff, il est prévu d'afficher l'avatar de chaque membre du staff comme ceci. Or, il m'est venu à l'idée d'avoir un script qui mettait automatiquement l'avatar du membre du staff concerné.
    Mon seul soucis est évidemment que je ne sais pas par où commencer. Est-ce qu'il suffit d'extraire l'image qui se trouve dans le span .real_avatar sur le profil de l'utilisateur ou est-ce que c'est plus compliqué que ça?
    Bref je nage un peu x)
    Tailles des éléments : Les avatars sont en 200*320. Pas sûre que ce soit très utile pour vous. x)
    Version de votre forum : Invision


    Ressources
    Je suppose qu'il vous faut le code de la PA? Mais confirmez-moi ça, je vous fournirais tout ce dont vous avez besoin x)

    Autres précisions ?
    Nope, rien du tout, si ce n'est un gros merci d'avance! ^w^


    Dernière édition par NyoTheNeko le Mar 24 Mar 2015 - 17:19, édité 1 fois



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 11 Mar 2015 - 11:14

    Toujours d'actualité, bien que je vais bientôt coder le profil des membres :hum:



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 15 Mar 2015 - 11:56

    Toujours d'actu! ^^
    J'ai fini de coder les profils, donc c'est tout bon ^w^ En fait j'ai presque terminé de tout coder x)



    Lunayine
    Lunayine
    FémininAge : 26Messages : 55

    Dim 15 Mar 2015 - 12:31

    Hey, j'ai cherché un peu puisque ton idée m'intéressait et je suis tombé sur ceci. Le dernier JS donné semble correspondre à ce que tu cherches =)
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 15 Mar 2015 - 12:53

    Coucou Nyo (^-^)

    Effectivement tu peux faire comme sur le lien donné, même si le code peut être un peu simplifié (étant donné que tu as codé ta page profil). Si tu ne vois pas comment trop faire ou que tu as la flemme, je peux m'en charger étant donné que j'avais fait ce code. :)

    Une seconde possibilité, pour limiter le nombre de requêtes, peut être de chercher sur la page /memberlist. La page affiche les 30 ou 50 derniers connectés je crois, et il y a les avatars qui s'affichent normalement.
    L'avantage ? Pour 5 membres du staff par exemple, on est obligés de regarder 5 pages de profil différentes... Donc appeler 5 pages différentes, ce qui peut être un peu long parfois.

    Si on appelle la page "Liste des membres", on essaye de récupérer les derniers membres connectés, et donc leur avatar présent dessus.
    Si une personne du staff n'est pas dedans (ne s'est pas connectée récemment ou bien est est en invisible), on va alors regarder sur sa page de profil... Au final, cela limite le nombre d'appels à d'autres pages, c'est plus rapide :)

    Le code est plus complexe est à mettre en place, mais plus il y a aura de membres du staff, plus ça fonctionnera rapidement par rapport à l'autre code.

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 15 Mar 2015 - 14:07

    Alors sachant que je m'attends à avoir pas mal de membre du staff dans un futur proche (ou lointain, selon comment le forum évolue x) ), effectivement, je pense que de réduire le nombre de requêtes serait plus intelligent. Parce que si la page prend cent ans à charger pour les connexions plus lente, c'est pas trop sympas non plus ^^

    Et j'avais testé de commencer à faire un truc (je pense que ça se voit sur le fo x) ) mais vu que je suis un peu dans la dernière ligne droite avec l'ouverture, j'ai beaucoup de choses à faire et je me suis pas encore penchée plus que ça sur le code ^^ Du coup c'est pas que j'ai la flemme, mais je préfère que ce soit fait rapidement et que je puisse me concentrer sur le reste ^^

    Et aussi Nihil, je pense que ça devrait intéresser pas mal de trucs, donc si tu mets ça en Ls ce serait tout bénef pour tout le monde :siffle:



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 15 Mar 2015 - 17:36

    Alors, en attendant, pour peut-être ne pas retarder l'ouverture de ton forum, je te passe tout de suite le code version "je regarde chaque profil" au lieu de "je regarde la page membres puis le profil".

    Tu commences par rajouter un nouveau javascript qui marche sur l'index, et dedans le code à mettre est celui ci :
    Code:
    $(function(){
        /* on commence par chercher tous
        * les liens avec la classe .js-replace-avatar
        * qui sont ceux où l'on souhaite récupérer l'avatar
        * d'une personne */
        $('a.js-replace-avatar').each(function(){
            var $this = $(this);
            var lienProfil = $this.attr('href'); /* récupère le lien du profil*/
     
            /* verifie qu'il s'agit bien d'un lien de profil */
            if (! /^\/u\d+$/.test(lienProfil)) return;
       
            /* On va sur la page de profil */
            $.get(lienProfil, function(a){
                /* on récupère l'image de l'avatar */
                $imgAvatar = $(".real_avatar img", a);
               
                /* s'il y a bien une image, on la met dans le lien */
                if ($imgAvatar.length > 0) {
                    $this.html($imgAvatar);
                }
            });
        });
    });

    Dans ta PA, le HTML à mettre pour afficher quelqu'un est :
    Code:
    <a href="/u1" class="js-replace-avatar">Texte ou image par défaut</a>

    Comment on l'utilise ?
    /u1 on remplace le 1 par l'ID de l'utilisateur :)
    Par exemple pour Single Birds (http://encyclopedia.forumsactifs.com/u12) il faudrait mettre "/u12"

    La partie Texte ou image par défaut est ce que tu veux mettre "par défaut", c'est à dire en attendant que la page charge ou bien s'il ne trouve pas le profil, ou si la personne n'a pas d'avatar.

    Est ce que cela fonctionne bien ? ♥

    Pour le libre service, en fait je suis un train de réadapter un ancien tuto pour apprendre à afficher l'avatar du membre connecté, et je pensais faire ensuite un tuto pour cette technique là. Mais libre à toi de poster le code actuel en libre service ici, cela ne me pose pas de problème :)

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 15 Mar 2015 - 19:26

    Je vais pas mettre en Ls ton code voyons! =P

    Eh bien ça marche très bien! ^^ Donc je te laisse bosser sur la version qui check d'abord la liste des membres tranquillement et ne ferme pas la demande pour l'instant ^^ Sait-on jamais, tu auras peut-être déjà fini avant que j'ouvre le forum x)

    Merci déjà Nihil :hug:



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 19 Mar 2015 - 11:33

    Toujours d'actualité! ^w^



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 23 Mar 2015 - 16:50

    Coucou Nyo :)

    Je suis encore là, je n'ai pas encore commencé le code qui passe par la page "Liste des membres" (^-^), mais je ne t'oublie pas :p !

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Lun 23 Mar 2015 - 17:58

    Super, merci Nihil! :hug:
    Et y'a aps de soucis, tu prends ton temps, on est pas aux pièces! ^w^



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 24 Mar 2015 - 15:58

    Hop, j'ai fait un petit essai rapidement :)

    Il faut juste remplacer le javascript, rien ne change d'autre normalement.
    Le code dépend de ton codage actuel pour la page "Liste des membres", donc si tu modifies ce template, il est possible qu'on ait à modifier ensuite le code JS :)
    Code:
    /*
     * Code pour récupérer les avatars des membres dans la PA
     * On commence par regarder si l'avatar est sur la page "Membre"
     * sinon on va voir sur la page de profil du membre.
     * Modification du template pour la page membre.
     * */
    $(function () {
        /* on va dans la page memberlist */
        $.get("/memberlist", function (d) {

            /* on commence par chercher tous
            * les liens avec la classe .js-replace-avatar
            * qui sont ceux où l'on souhaite récupérer l'avatar
            * d'une personne */
            $('a.js-replace-avatar').each(function () {
                var $this = $(this);
                var lienProfil = $this.attr('href'); /* récupère le lien du profil*/

                var $membre = $("a[href='" + lienProfil + "']", d);
               
                /* on regarde si le membre est sur la page*/
                if ($membre.length > 0) {
                    /* on récupère l'image dans la page de profil */
                    var $imgAvatar = $membre.closest(".ava_et_infos").find(">img");
                    /* s'il y a bien une image, on la met dans le lien */
                    if ($imgAvatar.length > 0) {
                        $this.html($imgAvatar);
                    }
                } else {
                    /* si le membre n'est pas dans la page Membre
                    * on va sur sa page de profil */
                    $.get(lienProfil, function (a) {
                        /* on récupère l'image de l'avatar */
                        $imgAvatar = $(".real_avatar img", a);

                        /* s'il y a bien une image, on la met dans le lien */
                        if ($imgAvatar.length > 0) {
                            $this.html($imgAvatar);
                        }
                    });
                }
            });
        });
    });

    Dis moi si ça fonctionne bien :)

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mar 24 Mar 2015 - 17:17

    Eh bien il me semble que ça marche! ^^ Merci Nihil =D




    Contenu sponsorisé


      La date/heure actuelle est Lun 29 Avr 2024 - 13:08