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

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Feu Ardent Sam 4 Aoû 2018 - 16:22

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

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Lun 6 Aoû 2018 - 23:22

Un petit up Angel
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Mer 8 Aoû 2018 - 21:01

Petit up I love you
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Ven 10 Aoû 2018 - 19:48

Petit up Angel
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Dim 12 Aoû 2018 - 2:18

Petit up s'il vous plait Angel
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Walt Dim 12 Aoû 2018 - 15:16

Bonjour,

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

Cordialement,
Walt
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Dim 12 Aoû 2018 - 20:14

@"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
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Walt Dim 12 Aoû 2018 - 20:37

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

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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Dim 12 Aoû 2018 - 22:58

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
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Walt Dim 12 Aoû 2018 - 23:30

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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Lun 13 Aoû 2018 - 0:31

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 Mr. Green ),

FA
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Walt Lun 13 Aoû 2018 - 12:51

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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Lun 13 Aoû 2018 - 18:30

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

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Jeu 16 Aoû 2018 - 15:30

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

Merci d'avance,

FA
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Lun 20 Aoû 2018 - 4:19

@"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
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Beylin Mer 22 Aoû 2018 - 18:06

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 I love you
Beylin

Beylin
Nouveau membre

Messages : 23
Inscrit(e) le : 31/01/2010

http://gameofshadows.org
Beylin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Dim 26 Aoû 2018 - 4:13

Bonjour,

Toujours pas de nouvelles ? :/
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Kaiji Mar 28 Aoû 2018 - 23:20

Bonjour ! Smile 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 Smile
Kaiji

Kaiji
****

Féminin
Messages : 273
Inscrit(e) le : 06/06/2010

http://www.disjointedsocieties.com
Kaiji a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Walt Dim 2 Sep 2018 - 12:26

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


Dernière édition par Walt le Mar 4 Sep 2018 - 22:35, édité 1 fois
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Dim 2 Sep 2018 - 14:57

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

Cordialement (et merci encore pour toute votre aide),

FA
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Walt Dim 2 Sep 2018 - 16:18

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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatars des utilisateurs connectés dans le qui est en ligne ?

Message par Feu Ardent Dim 2 Sep 2018 - 17:11

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 Very Happy
Feu Ardent

Feu Ardent
***

Masculin
Messages : 151
Inscrit(e) le : 29/08/2010

Feu Ardent a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum