Widget top postadores com avatar redondo

Detalhes da questão

Endereço do fórum: http://familiawarning.forumeiros.com
Versão do fórum: PunBB

Descrição

Procurei em diversos locais e não encontrei, poderiam me ajudar?

Eu gostaria deste sistema, aparecer a Foto, Nick e Quantidade de posts do usuário. A foto redondinha desta forma.


Fórum em que vi tal sistema:
http://www.brasilplayshox.com.br/

O widget vai estar neste menu da direita.

Acredito que seja esse widget que procura.

o/

Resultou, sabe se tem como criar um com a mesma função só que para:

- Os mais ativos da semana
- Os mais ativos do mês

O código fornecido pelo ajudero do tópico que você enviou

Código:

<script>
jQuery(document).ready(function() {
 var members_top_posters = sessionStorage.getItem('members_top_posters');
 if(members_top_posters) {
  jQuery('#members_top_posters').html(members_top_posters);
 } else {
 jQuery.get('/memberlist?mode=posts&order=DESC&submit=Ok&username', function(d) {
  var members = jQuery('.table a[href^="/u"]:lt(5)', d);
  jQuery('#members_top_posters').html(members);
  jQuery('#members_top_posters').find('a[href^="/u"]').each(function() {
  jQuery(this).wrap('<div class="m_b"></div>');
  var post = jQuery(this).attr('href');
    jQuery(this).after('<span class="posts"></span>');
    jQuery(this).next().load(post+' .main #field_id-6 dd div', function() {
    jQuery(this).text(jQuery(this).text());
    sessionStorage.setItem('members_top_posters', jQuery('#members_top_posters').html());
    });
  });
 });
 }
});
</script>
<div id="members_top_posters">
</div><style>
#members_top_posters .m_b {
margin: 4px 0;
}
#members_top_posters .m_b:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#members_top_posters a span {text-decoration: none;}
#members_top_posters .m_b img {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
background: #fff;
border: 1px solid #D5D5D5!important;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
float: left;
height: 32px;
margin: 0 3px;
padding: 1px;
width: 32px;
}
#members_top_posters .m_b img:hover {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
border-color: #666;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}
#members_top_posters .posts {
display: block;
margin-top: 5px;
margin-left: 45px;
font: 11px helvetica, arial, sans-serif;
color: #777777;
}
#members_top_posters .posts:after {
content: ' posts';
}
</style>

Não, pois o plugin em questão puxa as informações da página de busca de membros, e a listagem para os membros da semana/mês não existe lá.

---

Tive que produzir novos:

Adicione a um novo Javascript com investimento em No índice:

Membros da semana:

Código:

(function($) {
   'use strict';

   if (!window.sessionStorage || !window.JSON) {
      return;
   }

   var config = {
      title: 'Os membros mais ativos da semana',
      storage_id: 'fa.top-posters.week',
      avatar_selector: '#profile-advanced-right > .module:first-child img[alt="avatar"]',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
   };

   var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
         .closest(config.module_content_selector);

      var list = [];

      $.each(data, function(index, member) {
         list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
         ].join('\n'));
      });

      $content.html([
         '<ul class="fa-top-poster">',
         '  ' + list.join('\n'),
         '</ul>',
      ].join('\n'));
   };

   $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);

      if (stored) {
         render(JSON.parse(stored));
         return;
      }

      var $table = $('table[summary="' + config.title + '"]');

      if (!$table.length) {
         return;
      }

      var posters = [];

      $table.find('a').each(function(index, elem) {
         var $elem = $(elem);

         posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
         });
      });

      $table.find('table').each(function(index, elem) {
         var $elem = $(elem);
         var data = $elem.attr('title').split(' ');

         posters[index].post_count = data.shift();
         posters[index].post_percentage = data.pop();
      });

      var promises = [];

      $.each(posters, function(index, poster) {
         var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
         });

         promises.push(promise);
      });

      $.when.apply(null, promises).done(function() {
         window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
         render(posters);
      });
   });
}(jQuery));

Membros do mês:

Código:

(function($) {
   'use strict';

   if (!window.sessionStorage || !window.JSON) {
      return;
   }

   var config = {
      title: 'Os membros mais ativos do mês',
      storage_id: 'fa.top-posters.month',
      avatar_selector: '#profile-advanced-right > .module:first-child img[alt="avatar"]',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
   };

   var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
         .closest(config.module_content_selector);

      var list = [];

      $.each(data, function(index, member) {
         list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
         ].join('\n'));
      });

      $content.html([
         '<ul class="fa-top-poster">',
         '  ' + list.join('\n'),
         '</ul>',
      ].join('\n'));
   };

   $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);

      if (stored) {
         render(JSON.parse(stored));
         return;
      }

      var $table = $('table[summary="' + config.title + '"]');

      if (!$table.length) {
         return;
      }

      var posters = [];

      $table.find('a').each(function(index, elem) {
         var $elem = $(elem);

         posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
         });
      });

      $table.find('table').each(function(index, elem) {
         var $elem = $(elem);
         var data = $elem.attr('title').split(' ');

         posters[index].post_count = data.shift();
         posters[index].post_percentage = data.pop();
      });

      var promises = [];

      $.each(posters, function(index, poster) {
         var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
         });

         promises.push(promise);
      });

      $.when.apply(null, promises).done(function() {
         window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
         render(posters);
      });
   });
}(jQuery));

E adicione ao CSS:

Código:

/**
 * BEGIN FA.Members.TopPosters
 */

.fa-top-poster {
    list-style: none;
    padding: 0 !important;
    margin: 0;
}

.fa-top-poster li {
    overflow: hidden;
    padding-bottom: 5px;
}

.fa-top-poster-avatar {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #D5D5D5;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    height: 32px;
    margin-right: 5px;
    padding: 1px;
    width: 32px;
}

.fa-top-poster-avatar img {
    width: 100%;
    height: 100%;
}

.fa-top-poster-count {
    display: block;
    font-size: 11px;
    color: #777777;
    margin-top: 5px;
}

/**
 * END FA.Members.TopPosters
 */


---

Ambos os Widgets não atualizam em tempo real. Eles armazenam a listagem enquanto a sessão do navegador durar (enquanto você tiver com a aba do fórum aberta). Faço isso para não sobrecarregar o fórum, dado ao alto número de requisições para carregar os avatares.

o/

Ficou meio bugadinho assim, sabe o que pode ser?

Erro meu. Para convidados fica assim:



Troque os códigos por esse:

Código:

(function($) {
  'use strict';
 
  if (!window.sessionStorage || !window.JSON) {
      return;
  }
 
  var config = {
      title: 'Os membros mais ativos da semana',
      storage_id: 'fa.top-posters.week',
      avatar_selector: '#profile-advanced-right img[alt="avatar"]:first',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
  };
 
  var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
        .closest(config.module_content_selector);
 
      var list = [];
 
      $.each(data, function(index, member) {
        list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
        ].join('\n'));
      });
 
      $content.html([
        '<ul class="fa-top-poster">',
        '  ' + list.join('\n'),
        '</ul>',
      ].join('\n'));
  };
 
  $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);
 
      if (stored) {
        render(JSON.parse(stored));
        return;
      }
 
      var $table = $('table[summary="' + config.title + '"]');
 
      if (!$table.length) {
        return;
      }
 
      var posters = [];
 
      $table.find('a').each(function(index, elem) {
        var $elem = $(elem);
 
        posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
        });
      });
 
      $table.find('table').each(function(index, elem) {
        var $elem = $(elem);
        var data = $elem.attr('title').split(' ');
 
        posters[index].post_count = data.shift();
        posters[index].post_percentage = data.pop();
      });
 
      var promises = [];
 
      $.each(posters, function(index, poster) {
        var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
        });
 
        promises.push(promise);
      });
 
      $.when.apply(null, promises).done(function() {
        window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
        render(posters);
      });
  });
}(jQuery));

Código:

(function($) {
  'use strict';
 
  if (!window.sessionStorage || !window.JSON) {
      return;
  }
 
  var config = {
      title: 'Os membros mais ativos do mês',
      storage_id: 'fa.top-posters.month',
      avatar_selector: '#profile-advanced-right img[alt="avatar"]:first',
      module_content_selector: '.main-content',
      i18n_posts: 'posts',
  };
 
  var render = function(data) {
      var $content = $('table[summary="' + config.title + '"]')
        .closest(config.module_content_selector);
 
      var list = [];
 
      $.each(data, function(index, member) {
        list.push([
            '<li>',
            '  <a href="' + member.profile_url + '" class="fa-top-poster-avatar">',
            '    <img src="' + member.avatar_url + '" alt="' + member.username + '" />',
            '  </a>',
            '  ' + member.username_html,
            '  <span class="fa-top-poster-count">' + member.post_count + ' ' + config.i18n_posts,
            '</li>',
        ].join('\n'));
      });
 
      $content.html([
        '<ul class="fa-top-poster">',
        '  ' + list.join('\n'),
        '</ul>',
      ].join('\n'));
  };
 
  $(function() {
      var stored = window.sessionStorage.getItem(config.storage_id);
 
      if (stored) {
        render(JSON.parse(stored));
        return;
      }
 
      var $table = $('table[summary="' + config.title + '"]');
 
      if (!$table.length) {
        return;
      }
 
      var posters = [];
 
      $table.find('a').each(function(index, elem) {
        var $elem = $(elem);
 
        posters.push({
            profile_url: $elem.attr('href'),
            username: $elem.attr('title'),
            username_html: $elem.prop('outerHTML'),
        });
      });
 
      $table.find('table').each(function(index, elem) {
        var $elem = $(elem);
        var data = $elem.attr('title').split(' ');
 
        posters[index].post_count = data.shift();
        posters[index].post_percentage = data.pop();
      });
 
      var promises = [];
 
      $.each(posters, function(index, poster) {
        var promise = $.get(poster.profile_url, function(data) {
            posters[index].avatar_url = $(config.avatar_selector, data).attr('src');
        });
 
        promises.push(promise);
      });
 
      $.when.apply(null, promises).done(function() {
        window.sessionStorage.setItem(config.storage_id, window.JSON.stringify(posters));
        render(posters);
      });
  });
}(jQuery));

Lembre-se que terá que fechar as abas do seu fórum e reabrí-las. o/

Obrigado Kyo, você é uma lenda desse FDF.

Se poder me ajudar no outro pedido:
https://ajuda.forumeiros.com/t108273-tabela-de-novidades-do-forum

Resultou, TMJ !

Uma hora eu chego lá. o/

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".