Élément récupéré du profil dans liste des membres

2 participants

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

Résolu Élément récupéré du profil dans liste des membres

Message par foxies Mer 10 Oct 2018 - 14:50

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
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 Smile

Je suis actuellement en train de personnaliser le template memberlist_body de mon forum et je recherche le moyen d'afficher pour chaque membre de cette liste une image récupérée de son profil. J'ai déjà eu recours à "cette technique" directement dans la page du profil, grâce à ce script mais je ne sais pas comment l'adapter à cette page de liste des membres.

Voici à quoi ressemble le template :
Code:
<div class="memberlist-wrapper">
  <!-- BEGIN memberrow -->
 <a href="{memberrow.U_VIEWPROFILE}"><div class="member">
   <div class="member-header"></div>
   <div class="member-avatar">{memberrow.AVATAR_IMG}</div>
   <div class="member-name">{memberrow.USERNAME}</div>
 </div></a>
<!-- END memberrow -->
<script>
</script>
  </div>

J'ai laissé une place pour un éventuel script. L'image récupérée du profil grâce à son id (#field_id1), serait affichée à ce niveau :

Code:
<div class="member-header"></div>

Merci d'avance pour votre aide I love you


Dernière édition par foxies le Ven 12 Oct 2018 - 7:46, édité 1 fois
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Élément récupéré du profil dans liste des membres

Message par Ea Jeu 11 Oct 2018 - 22:01

Bonjour,


En passant par les administrateurs pour changer l'image d'un membre, ça pourrait être fait assez simplement avec un CSS comme ceci par exemple pour l'utilisateur 1:

Code:
a[href="/u1"] .member-header {
  background: url("https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
};

Si l'image doit être tirée du profil de l'utilisateur, c'est plus compliqué.

On peut par exemple mettre ce script sur toutes les pages:

Code:
$(function () {

// refresh the image in given number of days
var refresh_in_days = 2;

var now = +(new Date()/864E5 - 17815).toFixed(2), get = function (page) {
  profile_elements[this] = [$('.profile-avatar img', page).prop('src') || 0, now];
};

// on memberlist show image by getting it from profile or cache
if (location.pathname == '/memberlist') {
  var members = $('.memberlist-wrapper > a[href^="/u"]');
  if (!members.length) return;
  var profile_elements = JSON.parse(localStorage.profile_elements || '{}');
  $.when.apply($, members.map(function () {
    var uid = $(this).attr('href').replace(/^.*([0-9]+).*$/, '$1');
    return (profile_elements[uid] && profile_elements[uid][1] + refresh_in_days > now ? $.when() : $.get($(this).attr('href')).then(get.bind(uid))).then(function () {
      profile_elements[uid][0] && $('.member-header', this).css({'background-image': 'url('+profile_elements[uid][0]+')'});
    }.bind(this));
  })).always(function () {
    localStorage.profile_elements = JSON.stringify(profile_elements);
  });
}

// on profile save and update image
if (location.pathname.slice(0, 2) == '/u') {
  var uid = location.pathname.replace(/^.*([0-9]+).*$/, '$1');
  var profile_elements = JSON.parse(localStorage.profile_elements || '{}');
  get.bind(uid)();
  localStorage.profile_elements = JSON.stringify(profile_elements);
};

});

Dans le script il faut changer ".profile-avatar img" par le sélecteur CSS qui sélectionne l'image sur le profil.

Pour cette exemple, ".profile-avatar img" signifie: un tag html <img /> se trouvant dans un tag html contenant la classe "profile-avatar" (par exemple <div class="profile-avatar"/>).

Et on peut changer le chiffre dans cette partie:

Code:
var refresh_in_days = 2;

Le 2 signifie qu'on sauvegarde l'image 2 jours dans le navigateur, cela permet qui l'image soit chargée vite et que le script ne soit pas trop lourd (en chargeant 20 pages juste pour afficher la liste des membres à chaque fois).

Pendant les tests, ça peut être mis à 0 afin que les images soient mise à jour à chaque ouverture de la page, mais une fois que c'est testé il vaut mieux le remettre à un chiffre plus haut.

Une partie du script met l'image sauvegardée à jour à chaque fois qu'on passe sur le profil du membre.

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Élément récupéré du profil dans liste des membres

Message par foxies Ven 12 Oct 2018 - 7:43

Bonjour !

Le script marche à merveille, merci pour votre aide et ces explications Smile
foxies

foxies
*****

Féminin
Messages : 607
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies 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