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

   

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 */
}

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-useravatar 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-useravatar, je fais donc

Code:

$('.js-useravatar');

- 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://2img.net/i/fa/invision/pp-blank-thumb.png" alt="" />

- Une fois que j'ai ces 2 informations... Comment je fais pour rajouter mon avatar à l'intérieur de .js-useravatar ?
On va utiliser une petite méthode de jQuery qui permet de remplacer le contenu d'un élément. Par exemple :

Code:

$('.js-useravatar').html("coucou");

Ce code là permet de remplacer le html de .js-useravatar 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:

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.

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 !

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:

Coucou Nini, et merci pour ce petit tuto!

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. 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! ♥

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.

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://2img.net/i/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à ♥

Sublime! ♥
Je classe!

Super tutoriel, comme toujours avec Nihil

ç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

Merci

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

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

Spoiler:

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

Merci pour le tutoriel, dit donc, Ninou

Merci beaucoup pour ce tutoriel super détaillé

Super merci Nihil !
Encore un code bien utile !