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

[foxies]

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

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

[Ea]

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.

[foxies]

Bonjour !

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