AccueilFAQRechercherMembresGroupesS'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.


    Rajouter l'avatar de l'utilisateur

    Partagez
    Nihil Scar Winspeare
    Messages : 3941

    le Sam 27 Juin 2015 - 15:30

    Rajouter sur la page l'avatar du membre connecté



    Ce code permet d'ajouter l'avatar du membre où on le souhaite sur une page du forum.
    Exemple d'utilisation :
    - Ajouter l'avatar du membre à côté de la réponse rapide

    Note : il y a des tas de manière de faire, ce tutoriel n'est qu'un exemple Wink
    Pour faciliter le tutoriel, j'utilise jQuery qui est mis par défaut sur les forumactifs et qui va nous faciliter le code.

    Utilisation



    Partout où vous voulez mettre l'avatar de l'utilisateur, il suffit de rajouter la classe ".js-useravatar" à votre conteneur. La balise image avec l'avatar sera rajoutée ensuite en javascript à l'intérieur de votre élément.

    Je dois donc par exemple mettre le code :
    Code:
    <div class="js-useravatar"></div>

    Et le contenu de la div sera remplacé par l'image à l'intérieur de ma div.

       
    Je peux aussi utiliser une balise span, une balise p, etc... Il faut juste que cela ne soit pas une balise orpheline (une balise auto-fermante, comme par exemple br, img, input etc).


    Il est possible de mettre un contenu par défaut, qui sera ensuite remplacé par l'image de l'avatar, ou qui s'affichera si le javascript ne fonctionne pas. Par exemple :
    Code:
    <div class="js-useravatar">Contenu temporaire</div>

    Styliser



    Comment styliser l'image de l'avatar ?
    Je vous conseille de rajouter une classe supplémentaire à votre balise.
    Ainsi par exemple si mon avatar se trouvera dans un panneau coulissant sur le côté, je peux mettre une seconde classe comme ceci :
    Code:
    <div class="js-useravatar panneau_avatar"></div>

    Et ensuite je met mon CSS comme ceci :
    Code:
    .panneau_avatar {
        /* style du bloc autour de l.image*/
    }

    .panneau_avatar img {
        /* style de l.image */
    }

    Pourquoi mettre une seconde classe, et ne pas styliser directement .js-useravatar ?
    → A priori, vous allez peut-être utiliser cet ajout de l'avatar à plusieurs endroits sur le forum. Si vous stylisez directement .js-useravatar, vous risquez de vous retrouver avec le même style à plusieurs endroits.
    En rajoutant une seconde classe, vous êtes sûrs de bien séparer d'un côté le style (avec la classe supplémentaire ajoutée) et le javascript qui ajoute l'avatar (avec la classe .js-useravatar).


    Javascript



    Le JS, on le met dans PA > Modules > Gestion des codes Javascript.
    Ensuite, on rajoute un nouveau script qu'on peut appeler par exemple "Ajouter avatar du membre", qu'on active sur les pages où on en a besoin :)

    Code :
    Code:
    /* On attend le chargement */
    $(function(){
        /* on récupère les endroits où on doit ajouter l'avatar */
        var $loadAvatar = $('.js-useravatar');
        
        /* s'il y a des endroits où on doit ajouter l'avatar */
        if ($loadAvatar.length > 0) {
            
            /* on remplace le contenu de .js-avatar en mettant l'avatar */
            $loadAvatar.html(_userdata.avatar);
            
        }
    });

    Fonctionnement


    Avant d'écrire le javascript, on va d'abord se demander "qu'est ce que je veux faire" ? On ne se jette pas d'un coup sur le code sans réfléchir :)

    Je veux remplacer l'avatar de l'utilisateur à l'intérieur des éléments avec la classe js-useravatar.

    A partir de cela, je vais me poser quelques questions :

    - Comment sélectionner les éléments avec la class js-useravatar ?
    En jQuery, on va mettre ceci, à l'intérieur de $(' '), je met mon sélecteur, ça fonctionne comme le CSS.
    En CSS mon sélecteur est .js-avatar, je fais donc
    Code:
    $('.js-avatar');

    - Comment je fais pour obtenir l'avatar de l'utilisateur  ?
    Forumactif nous met gentiment à disposition une liste d'informations ♥. Il s'agit d'un objet javascript _userdata, qui contient diverses informations sur l'utilisateur sur le site. A ma connaissance, il n'y a pas de sujet officiel de ForumActif qui les recense. Pour en savoir plus, vous pouvez lire ce sujet
    Celle qui nous intéresse est celle de l'avatar. Pour y accéder, il nous suffit d'écrire _userdata.avatar. Elle contient un code HTML avec l'image du membre.

    Exemple du HTML qu'elle peut contenir :
    Code:
    <img src="http://r26.imgfast.net/users/2613/44/65/70/avatars/1-23.jpg" alt="" />

    Si l'utilisateur est déconnecté ou bien qu'il n'a pas d'avatar, la valeur par défaut sera :
    Code:
    <img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" alt="" />

    Vous pouvez personnaliser ces avatars par défaut via le panneau d'administration.
    PA > Affichage > Avatars > Gestion des avatars > Administration de vos avatars
    On peut ainsi définir un avatar par défaut ainsi qu'un avatar pour les invités.

    Si le membre est déconnecté et que vous n'avez pas défini d'avatar pour les invités, c'est l'avatar par défaut qui d'affichera. Sinon, cela sera l’avatar pour les invités :)


    - Une fois que j'ai ces 2 informations... Comment je fais pour rajouter mon avatar à l'intérieur de .js-avatar :toto: ?
    On va utiliser une petite méthode de jQuery qui permet de remplacer le contenu d'un élément. Par exemple :
    Code:
    $('.js-avatar').html("coucou");
    Ce code là permet de remplacer le html de .js-avatar par coucou :)


    Code Javascript, un peu plus en détail


    On peut voir que tout le contenu de notre code se trouve à l'intérieur de ceci :
    Code:
    $(function(){
        /* code à l'intérieur */
    });
    On ne peut pas manipuler de manière sûre une page tant que la page n'est pas "prête". Si vous tentez de sélectionner quelque chose sur une page qui n'est pas chargée, l'élément ne sera pas trouvable, et vous allez vous retrouver avec rien qui ne se passe ou de jolies erreurs :)

    Avec ce code, on attend que le DOM (la structure de la page) soit chargé, comme ça on peut faire nos modifications, nos sélections, sans problème.

    Précision:
    Il s'agit d'un équivalent de ce code là que vous verrez aussi parfois.
    Code:
    $(document).ready(function() {
        /* code à l'intérieur */
    });
    Cette version là est juste un peu plus longue.

    Code:
    var $loadAvatar = $('.js-useravatar');
    Cette ligne permet de sélectionner les éléments avec la classe "js-useravatar", et on va les stocker dans une variable nommée $loadAvatar.

    Code:
    if ($loadAvatar.length > 0) {
        /* code à l'intérieur */
    }
    Cette partie là n'est pas obligatoire, mais elle permet d'être sûrs qu'on a bien un avatar à ajouter sur la page.
    $loadAvatar.length va me donner le nombre d'éléments sélectionnés. Je regarde donc s'il y a plus de 0 (donc au minimum 1) élément sélectionné.
    Cela signifie "s'il y a un élément dans $loadAvatar, fait ..."

    Et enfin, la dernière ligne :
    Code:
    $loadAvatar.html(_userdata.avatar);
    Elle dit → remplace le html de $loadAvatar par _userdata.avatar
    Tout le contenu à l'intérieur de chaque $loadAvatar sera remplacé par notre image de profil.

    En cas de problème, n'hésitez pas à poster dans la section Problème avec mon code.


    Dernière édition par Nihil Scar Winspeare le Dim 29 Nov 2015 - 0:10, édité 4 fois




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Nihil Scar Winspeare
    Messages : 3941

    le Sam 14 Nov 2015 - 23:09

    Hello :)

    Petit double post pour annoncer que j'ai enfin pris le temps de relire le tuto et qu'il me semble bon maintenant ♥

    Bonne journée et merci d'avance à la personne qui prendra le temps de le relire ! :hug:

    J'ai hésité à rajouter une section / une partie du code pour n'afficher l'avatar que si le membre est connecté. A votre avis, ça serait mieux ou pas besoin ? o:




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Sam 28 Nov 2015 - 10:55

    Coucou Nini, et merci pour ce petit tuto! :hug:

    En le lisant, j'avais une petite question sur ceci:
    Forumactif nous met gentiment à disposition une liste d'informations ♥.
    Où est cette liste d'informations? Parce que j'ai trouvé une liste de variables qui peuvent être utilisés sur le forum par les utilisateurs, mais pas une liste d'informations disponibles. :hum: Je cherche peut-être aussi du mauvais endroit, mais si tu pouvais, quelque part dans cette phrase, lier vers cette liste (ou juste indiquer où elle se trouve) ça pourrait être intéressant! ^^

    Pour ta propre question, est-ce qu'il ne suffirait pas de rien mettre dans le div de .js_avatar pour que rien ne s'affiche sir le membre n'est pas connecté? D'ailleurs, du coup, qu'arrive-t-il au _userdata.avatar lorsque le membre n'est pas connecté? Est-ce que ça fait une erreur dans le script, ou alors simplement, on a un objet vide qui est retourné et donc rien ne s'affiche?
    Et sinon, il y a certains endroits où de toute façon ça ne s'affiche d'une façon que si le membre est connecté (comme par exemple le "Connecté en tant que Blabla" sur Invision).

    Sinon j'ai vraiment rien à dire, c'est très clair et complet! ^^ Du coup dès que tu as répondu à ces petites questions je classe! ♥



    Nihil Scar Winspeare
    Messages : 3941

    le Dim 29 Nov 2015 - 0:21

    Merci pour ton temps Nyo <3

    Alors, comme tu l'as vu j'ai commencé un topic supplémentaire dans la partie Proposition de tuto. J'ai rajouté son lien dans le tuto aussi. Enfin bon, il ne faut pas se leurrer, ce tuto va mettre des mois à être prêt vu que j'ai jamais le courage de continuer. Rolling Eyes

    J'ai également rajouté une petite information pour l'affichage de l'avatar si le membre est connecté ou non :
    Moi, plus grand génie de la planète a écrit:Si l'utilisateur est déconnecté ou bien qu'il n'a pas d'avatar, la valeur par défaut sera :

    Code:
    <img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" alt="" />

    Vous pouvez personnaliser ces avatars par défaut via le panneau d'administration.
    PA > Affichage > Avatars > Gestion des avatars > Administration de vos avatars
    On peut ainsi définir un avatar par défaut ainsi qu'un avatar pour les invités.

    Si le membre est déconnecté et que vous n'avez pas défini d'avatar pour les invités, c'est l'avatar par défaut qui d'affichera. Sinon, cela sera l’avatar pour les invités :)

    Voilà voilà ♥




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Dim 29 Nov 2015 - 0:43

    Sublime! ♥
    Je classe!



    Shaneliae
    FémininAge : 20Messages : 667

    le Lun 11 Avr 2016 - 15:45

    Super tutoriel, comme toujours avec Nihil Very Happy

    ça va être bien utile ! Juste j'ai noté une petite faute :

    @Nihil a écrit:On peut voir que tout le contenu de notre se trouve à l'intérieur de ceci

    Notre quoi ? Je crois qu'il manque un mot Wink



    Nihil Scar Winspeare
    Messages : 3941

    le Lun 18 Avr 2016 - 14:19

    Merci :lovebomb:

    Je voulais surement écrire :
    "On peut voir que tout le contenu de notre code se trouve à l'intérieur de ceci"




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Alumine
    FémininAge : 19Messages : 486

    le Lun 18 Juil 2016 - 23:17

    Ca marche !! cheers Merci beaucoup, c'est super de trouver des tutos un peu alternatifs comme ça, et c'est pile ce que je cherchais !

    Spoiler:
    J'ai juste trouvé un truc bizarre :
    @Nihil Scar Winspeare a écrit:
    - Comment sélectionner les éléments avec la class js-useravatar ?
    En jQuery, on va mettre ceci, à l'intérieur de $(' '), je met mon sélecteur, ça fonctionne comme le CSS.
    En CSS mon sélecteur est .js-avatar, je fais donc
    Code:
    $('.js-avatar');

    C'est juste que tu n'utilises pas la même class dans l'exemple, du coup c'est confondant ! Voilà :cow:




    Before...:

    mon ange gardien ♥
    Nihil Scar Winspeare
    Messages : 3941

    le Mar 19 Juil 2016 - 22:30

    Haaan, j'avais pas fait gaffe, j'ai repris l'un de mes anciens tutos et j'ai oublié de changer partou :faint:
    Quand j'aurai le courage j'enverrai la version modifiée à un bibliothécaire codage, merci Alumine ♥︎




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Cheshire Cat
    FémininAge : 19Messages : 646

    le Lun 15 Aoû 2016 - 16:59

    Merci pour le tutoriel, dit donc, Ninou :toto:



    Contenu sponsorisé

    Aujourd'hui à 22:47


      La date/heure actuelle est Mar 6 Déc 2016 - 22:47