Avatars des utilisateurs connectés dans le qui est en ligne ?

[Feu Ardent]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour ! Ma question va peut être sembler un peu étrange, mais je tente quand même ma chance. Après être tombé sur ce script-ci :

https://forum.forumactif.com/t379011-avatar-du-dernier-membre-inscrit-dans-le-qui-est-en-ligne

Je me demandais s'il y avait un moyen de l'appliquer à tous les membres connectés, de sorte à ce que leur avatar apparaisse lorsqu'ils sont connectés (et lorsqu'ils se sont connectés dans les dernières 24 heures) ? Je me dis qu'il doit bien y avoir une façon pour que le script soit remodulé pour permettre cela mais ne m'y connaissant pas très bien en javascript je préfère me remettre aux avis des personnes plus douées en JS.

Merci d'avance de prendre le temps de réfléchir à ma question et bonne journée,

FA

[Feu Ardent]

Un petit up

[Feu Ardent]

Petit up

[Feu Ardent]

Petit up

[Feu Ardent]

Petit up s'il vous plait

[Walt]

Bonjour,

A quoi voudriez-vous que cela ressemble ? L'avatar à la place du pseudo ?

Cordialement,
Walt

[Feu Ardent]

@"Walt" > Bonjour !

Oui, exactement ! Peut être avec une option de mettre le pseudo en infobulle au survol (ou d'avoir l'infobulle du @mention qui s'ajoute ?) mais si c'est impossible déjà le simple fait de remplacer le pseudo par l'avatar serait génial.

Savez-vous si cela est possible avec forumactif?

Merci d'avance,

FA

[Walt]

Il est permis d'essayer, en tout cas...

Panneau d'administration  Affichage  Templates - Général

Commencez par éditer le template index_body et situez cet extrait (lignes 43-44 dans le template par défaut) :

Code:

<!-- BEGIN disable_viewonline -->
   <div class="block">

Remplacez-le par :

Code:

<!-- BEGIN disable_viewonline -->
   <div class="block" id="qeel">

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Avatars dans le QEEL" et pour placement "Toutes les pages".

Insérez-y le code suivant :

Code:

$(function() {
    $('div#qeel a[href^="/u"]').each(function() {
      $(this).attr('title', $(this).text()).html( '<div class="qeel_avatar" style="background-image: url(\'' + $(this).attr('href') + '.jpg\');"></div>' );
    });
});

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Insérez ce code dans votre feuille de style personnalisé :

Code:

.qeel_avatar {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: 130%;
    border-radius: 50%;
    box-shadow: 1px 1px 3px #777;
    vertical-align: middle;
    margin-right: 7px;
}

Cordialement,
Walt

[Feu Ardent]

Merci de la réponse rapide !

J'ai testé et le code affiche bien un avatar dans le qeel ! Le soucis cependant est que l'avatar qui s'affiche est d'une qualité très basse, est incliné et possède une bordure : http://ploucdessables.forumactif.com/u1.jpg

De plus, l'avatar ne semble pas s'actualiser lorsque le membre le remplace par une nouvelle image. Je me demandais donc s'il y avait un moyen de récupérer une version de meilleure qualité de l'avatar (un peu comme lorsque il apparaît dans les catégories ?) et de s'assurer qu'il se met à jour lorsque l'avatar est changé ?

Merci en tous les cas pour le code fourni, c'est vraiment très gentil de votre part.

FA

[Walt]

J'ai volontairement fait le choix de recourir à cette version de l'image car elle permet un script très peu gourmand. Aller chercher l'avatar de chaque membre nécessiterait de faire autant de requête que de membres connectés (s'il y en a un, ça va, s'il y en a 20, ça commence à être problématique). Et si on veut que l'image s'actualise lorsque l'avatar est changé, on ne peut même pas mettre le résultat ces requêtes en mémoire...

L'avantage de cette image - certes inclinée - c'est qu'elle est chargée directement à partir de l'URL du profil, et qu'à la taille à laquelle je l'ai affichée (40 par 40) ça ne me semblait pas poser de difficulté. Peut-être pouvez-vous contourner le problème de la bordure en jouant avec les propriétés background-position et background-size ?

Cordialement,
Walt

[Feu Ardent]

Je comprends mieux. N'y a-t-il aucun moyen de mettre les lignes du qeel dans des div id et de leur dire "if" il y a un a href dans cette div, aller chercher la photo, else ne rien faire ? Et lui dire de répéter ça tant qu'il y a des liens dans la div ? Car j'aurais bien aimé pouvoir afficher les avatars en carré à une dimension de 50 ou de 100 pixels donc j'avoue que l'image fournie limite beaucoup cette possibilité. À la rigueur actualiser l'image est moins problématique si au moins il y avait un moyen de les afficher en plus grand, mais je comprends également que coder un script pour ça risque d'être compliqué donc si ce n'est pas possible je suis déjà content d'avoir la version que tu as proposé plus haut.

Merci encore pour votre précieuse aide (comme à chaque fois que je poste un sujet il me semble, d'ailleurs ),

FA

[Walt]

Bonjour,

Il est possible bien entendu d'aller chercher l'avatar uniquement des membres en ligne, mais ce qui sera un script anodin lorsqu'il y aura 3 utilisateurs en ligne ne le sera plus lorsqu'ils seront 20 ou 30. D'autant plus si vous affichez également sous cette forme les connectés durant les X dernières heures.

C'est techniquement possible, mais déconseillé car le chargement de l'index avec 25 profils à charger pour récupérer les avatars équivaudrait à charger 26 pages. Une solution serait de charger une fois les avatars et de les mettre en mémoire du navigateur pour ne plus avoir à charger ces pages, mais : 1. si l'utilisateur change son avatar, le changement ne sera pas immédiat dans le QEEL, 2. avant qu'ils soient en mémoire, il faudra toujours un premier chargement qui allongera potentiellement le temps de chargement du forum.

Cordialement,
Walt

[Feu Ardent]

Bonjour, et merci pour les clarifications, je comprends mieux la situation.

Une solution serait de charger une fois les avatars et de les mettre en mémoire du navigateur pour ne plus avoir à charger ces pages, mais : 1. si l'utilisateur change son avatar, le changement ne sera pas immédiat dans le QEEL, 2. avant qu'ils soient en mémoire, il faudra toujours un premier chargement qui allongera potentiellement le temps de chargement du forum.

Le premier chargement n'allongera le temps de chargement qu'à la première visite sur le forum, du coup, non ? (Ou en cas de suppression de cache/cookies) ? Parce que si c'est bel et bien le cas cette option me semble plutôt prometteuse dans la mesure où le forum aurait un rythme de chargement normal pour toutes les autres connexions (et tant pis pour le changement d'avatar, ce serait déjà bien de pouvoir obtenir les images en meilleure qualité).

Du coup si vous avez des idées sur comment réaliser ceci je suis preneur !

Merci d'avance,

FA

[Feu Ardent]

@"Walt" > Bonjour, je me demandais s'il y avait du nouveau sur le sujet ?

Merci d'avance,

FA

[Feu Ardent]

@"Walt" >

Hello, j'espère que tout va bien. Je voulais savoir si c'était donc possible de faire comme vous avez recommandé ou non ?

Merci d'avance,

FA

[Beylin]

Je m'incruste ici car je trouve que c'est une super idée et j'aimerais bien savoir comment l'implémenter sur mon fo

[Feu Ardent]

Bonjour,

Toujours pas de nouvelles ? :/

[Kaiji]

Bonjour ! L'idée me plaît beaucoup aussi, je vais suivre le sujet, en espérant que quelqu'un ait une réponse ! Merci Walt pour celle déjà apportée

[Walt]

Bonjour,

Dans le template index_body, remplacez :

Code:

          {LOGGED_IN_USER_LIST}

par :

Code:

          <div id="qeel_list">{LOGGED_IN_USER_LIST}</div>

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Avatars QEEL" et pour placement "Index / page d'accueil".

Insérez-y le code suivant :

Code:

$(function() {
 
  if( my_getcookie('avatars_list') )  {
  var avatars = JSON.parse(my_getcookie('avatars_list')),
      avatars_id = Object.keys(avatars);
 
  $('#qeel_list a').each(function() {
    var th = $(this),
        userid = $(this).attr('href').replace('/u', ''),
        userme = $(this).text();
   
    if(avatars_id.includes( userid )) {
      th.html('<img src="'+ avatars[userid] +'" class="avatar_qeel" alt="'+ userme +'" title="'+ userme +'" />');
    } else {
      $.get( $(this).attr('href'), function(data) {
        var url = $('.mod-login-avatar img', data).attr('src');
        avatars[userid] = url;
 
        th.html('<img src="'+ url +'" class="avatar_qeel" alt="'+ userme +'" title="'+ userme +'" />');
 
        my_setcookie('avatars_list', JSON.stringify(avatars),0,0);
      });
    }
  });
 
  } else {
  avatars_list = {};
  var count = $('#qeel_list a').length;
 
  $('#qeel_list a').each(function() {
    var th = $(this),
        userid = $(this).attr('href').replace('/u', ''),
        userme = $(this).text();
 
      $.get( $(this).attr('href'), function(data) {
        var url = $('.mod-login-avatar img', data).attr('src');
        avatars_list[userid] = url;
       
        th.html('<img src="'+ url +'" class="avatar_qeel" alt="'+ userme +'" title="'+ userme +'" />');
       
        my_setcookie('avatars_list', JSON.stringify(avatars_list),0,0);
      });
    });
  }
});

Pour faire simple : au premier chargement, tous les profils connectés sont chargés, on récupère les avatars et on enregistre le tout dans un cookie. Au prochain chargement de la page, les avatars sont récupérés dans le cookie, ce qui évite de charger à nouveau les profils. Si au prochain chargement de la page, un nouvel utilisateur s'est connecté, on ne charge que son profil, et on ajoute son avatar au cookie.

Donc je le répète : les avatars qui sont modifiés par l'utilisateur ne le seront pas instantanément dans le QEEL. Le cookie est destiné à durer autant que la session, donc il s'actualisera plus tardivement.

Cordialement,
Walt

[Feu Ardent]

Bonjour @"Walt", merci beaucoup pour le code. Je viens de tester sur mon forum et étrangement cela n'affiche pas d'image, en inspectant l'élément avec les outils de développer j'ai vu qu'il y a marqué

Code:

<img src="undefined"

au lieu d'avoir le lien vers une image. Je ne comprends pas vraiment d'où pourrait venir le problème, j'ai même désactivé toutes les autres pages javascript pour voir si elles crééaient des interférences avec le script que tu m'as fourni mais cela ne semble pas être le cas. Du coup je ne sais pas trop pourquoi cela ne fonctionne pas, si jamais vous avez des idées n'hésitez pas à m'en faire part.

Cordialement (et merci encore pour toute votre aide),

FA

[Walt]

J'ai prévu le script pour un forum ModernBB utilisant le profil en mode avancé, ce qui n'est pas le cas de votre forum, qui est en profil simple.

Voici le script qui devrait fonctionner :

Code:

$(function() {
 
  if( my_getcookie('avatars_list') )  {
  var avatars = JSON.parse(my_getcookie('avatars_list')),
      avatars_id = Object.keys(avatars);
 
  $('#qeel_list a').each(function() {
    var th = $(this),
        userid = $(this).attr('href').replace('/u', ''),
        userme = $(this).text();
   
    if(avatars_id.includes( userid )) {
      th.html('<img src="'+ avatars[userid] +'" class="avatar_qeel" alt="'+ userme +'" title="'+ userme +'" />');
    } else {
      $.get( $(this).attr('href'), function(data) {
        var url = $('.left-box img[alt="avatar"]', data).attr('src');
        avatars[userid] = url;
 
        th.html('<img src="'+ url +'" class="avatar_qeel" alt="'+ userme +'" title="'+ userme +'" />');
 
        my_setcookie('avatars_list', JSON.stringify(avatars),0,0);
      });
    }
  });
 
  } else {
  avatars_list = {};
  var count = $('#qeel_list a').length;
 
  $('#qeel_list a').each(function() {
    var th = $(this),
        userid = $(this).attr('href').replace('/u', ''),
        userme = $(this).text();
 
      $.get( $(this).attr('href'), function(data) {
        var url = $('.left-box img[alt="avatar"]', data).attr('src');
        avatars_list[userid] = url;
       
        th.html('<img src="'+ url +'" class="avatar_qeel" alt="'+ userme +'" title="'+ userme +'" />');
       
        my_setcookie('avatars_list', JSON.stringify(avatars_list),0,0);
      });
    });
  }
});

Cordialement,
Walt

[Feu Ardent]

Tout s'explique ! Désolé du coup pour le travail en plus. Merci beaucoup en tous les cas, ça fonctionne parfaitement à présent ! Merci merci merci mille fois