Lista de imagens baseada em número de posts

Olá meus caros...
Não sei se há como fazer isso, mas não custa tirar a prova...
É o seguinte, no meu fórum, estou criando rankings para os grupos normais: Administrador, Moderador, Membro, e assim por diante.
No entanto, eu gostaria de adicionar um perfil de lista de imagem, que mudasse a imagem conforme o player postasse, assim como age um ranking. Por exemplo, se o player postasse 50 mensagens, a imagem no perfil iria mudar automaticamente.
Por que isso? Para que a imagem também estivesse no perfil de grupos como Administradores, moderadores, grupos da equipe em geral, e não restrito só aos membros. Seria muito fácil fazer imagens de ranking "Membro Avançado", "Membro Veterano" de acordo com os posts, mas a equipe não ganharia titulos como este.
Um exemplo claro, é dos fóruns vBulletin, como o One Piece Bay. Se perceber, o ranking do usuário aparece acima do avatar, e os rankings de posts aparecem abaixo.

E não, este efeito não foi visto em nenhum fórum da plataforma da Forumeiros por mim, é claro.
Talvez deve se assemelhar quanto à reputação de alguns fóruns PunBB, que dão o ranking de acordo com a quantidade de avaliações positivas ou negativas, por isso acho que talvez se trate de uma ajuda relacionada a códigos JS.
E não precisa necessáriamente ser uma lista de imagens, desde que a imagem fique abaixo das informações nos perfis de postagem.

Por favor, me deem uma luz! ^_^

Olá.

Esta função existe na plataforma Forumeiros. Para mais informações, leia por favor:
https://ajuda.forumeiros.com/t9077-faq-administracao-dos-ranks

Atenciosamente.

Peço encarecidamente que o senhor leia novamente a minha questão para que entenda melhor.

Mas enquanto isso, espero por novas soluções.
Agradeço...

Bom dia!

se o player postasse 50 mensagens, a imagem no perfil iria mudar automaticamente.

Isso só é possível com Ranks mesmo. Com a lista de imagens até podemos fazer algo com Javascript, mas, não sei bem se dará o resultado que deseja, porque o Javascript não consegue identificar sozinho que o membro atingiu 50 mensagens e mudar a imagem, de forma individual. Ou seja, como o JS saberá que ao atingir 50 mensagens a imagem da lista deve ser alterada para um membro específico, se há vários? Aliás, como ele saberá que quais opções que vão mudar de acordo com as mensagens? Se usarmos-ei a função IF e ELSE talvez dê certo, mas, a mudança não seria tão efetiva.

Entendo...
Mas não teria uma forma de mudar automaticamente?
Sabe, como aquelas reputações de alguns fóruns PunBB, que diz "neutro", e etc?
Exemplo: https://ajuda.forumeiros.com/t91959-pontos-e-reputacao-em-css

Ele é uma combinação de CSS com JS, e pelo que eu vejo em alguns fóruns, a mudança delas acontecem automaticamente...
Como disse, não precisa ser necessariamente uma lista de imagens, mas com a condição de que uma imagem fique abaixo do perfil e informações do usuário nas postagens.

Então, é possível?! Na versão PHPBB2?
Se eu estiver cometendo um equivoco, desculpe a minha ignorância. Tenho pouco conhecimento em relação aos códigos.

Só para entender melhor amigo, o membro iria ganhar mais uma imagem? Ou a imagem será substituída a cada número de postagem atingida?


Até!

O ranking normal seria Membro, Administrador, Moderador, etc...
Ele iria ganhar mais uma imagem abaixo das informações no perfil como número de mensagens, reputação e etc, com um titulo especial de cada número de postagem.
O especial disso, é que administradores podem ter o ranking deles e o ranking de postagem..

Por exemplo, o nome do ranking de posts para quem faz 50 postagens é "Usuário Avançado".
Um membro e um administrador com o mesmo número de mensagens (nesse caso 50), teriam rankings normais diferentes, mas rankings de postagem iguais. Ambos seriam 'Usuário Avançado'.

Certo?

Veja aqui amigo:

Código:

$(document).ready(function() {
  $('head').append(
  '<style type="text/css">' +
      '.newrank {' +
      'background-color: #fefefe;' +
      'text-align: center;' +
      '}' +
      '.newrank p {' +
      'background-color: #212121;' +
      'font-size: 14px;' +
      'color: white;' +
      'padding: 5px;' +
      '}' +
      '.newrank .my-newrank {' +
      'padding: 5px;' +
      '}' +
  '</style>'
  );
  $('.post > td > .postdetails').each(function() {
  $(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="postfield"><span class="label'));
  $(this).append(
      '<div class="newrank">' +
        '<p>Título</p>' +
        '<div class="my-newrank"></div>'  +
      '</div>'
  );

  var rank1 = 'http://www.onepiecebay.net/forums/images/post/6.png',
        rank2 = 'http://www.onepiecebay.net/forums/images/fight/swordsman.png',
        rank3 = 'http://www.onepiecebay.net/forums/images/skill/chef.png';

    $('.postfield:contains("Mensagens")').each(function() {
            var post_number = $(this).text().match(/\d+/g);
            if(post_number >= 0 && post_number < 15) {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank1+'">'
              );
            } else if(post_number >= 15 && post_number < 30) {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank2+'">'
              );
            } else if(post_number >= 30) {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank3+'">'
              );
            }
    });
  });
});

Veja o resultado:


Veja esta parte do código:

Código:

if(post_number >= 0 && post_number < 15) {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank1+'">'
              );
            } else if(post_number >= 15 && post_number < 30) {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank2+'">'
              );
            } else if(post_number >= 30) {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank3+'">'
              );
            }

Irei traduzir em português para que você entenda e possa editá-lo.

Código:

se o número de posts for maior ou igual a 0 e menor do que 15, dentro do elemento será adicionado o rank1 {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank1+'">'//Adicionando imagem rank1
              );
            } se não, se o número de posts for maior ou igual a 15 e menor do que 30, dentro do elemento será adicionado o rank2 {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank2+'">'//Adicionando imagem rank2
              );
            } se não, se o número de posts for maior ou igual a 30, dentro do elemento será adicionado o rank3 {
              $(this).parents('.postdetails').find('.my-newrank').html(
                '<img src="'+rank3+'">'//Adicionando imagem rank3
              );
            }

Até mais!

Olá Daemon!
Perfeito código, no entanto não está funcionando em meu fórum de testes (cujo tema e funções são basicamente idêntico ao meu).
Como pode ver: http://onepiecephantasytest.forumeiros.com/t4-teste-ranking-de-postagem#4
Após não ter sucesso, testei em meu fórum original, e nada também, mesmo com todos os outros códigos desativados.

O código está ativo, e a opção de aceitar códigos JS também está, mas nada aparece. Não há outros códigos JS ativos.
Como o número de postagens da conta é 4, então deveria aparecer esta imagem: http://www.onepiecebay.net/forums/images/post/6.png
Certo?

Falta ativar mais alguma coisa? Ou está dando interferência com algum outro código?
Agradeço muito pela competência...

Abraços...

Tente este:

Código:

$(document).ready(function() {
  $('head').append(
  '<style type="text/css">' +
      '.newrank {' +
      'background-color: #fefefe;' +
      'text-align: center;' +
      '}' +
      '.newrank p {' +
      'background-color: #212121;' +
      'font-size: 14px;' +
      'color: white;' +
      'padding: 5px;' +
      '}' +
      '.newrank .my-newrank {' +
      'padding: 5px;' +
      '}' +
  '</style>'
  );
  $('.post > td > .profile_infos').each(function() {
  $(this).html($(this).html().replace(/<span class="label/g,'<dd><div class="postfield"><span class="label'));
  $(this).append(
      '<div class="newrank">' +
        '<p>Título</p>' +
        '<div class="my-newrank"></div>'  +
      '</div>'
  );

  var rank1 = 'http://www.onepiecebay.net/forums/images/post/6.png',
        rank2 = 'http://www.onepiecebay.net/forums/images/fight/swordsman.png',
        rank3 = 'http://www.onepiecebay.net/forums/images/skill/chef.png';

    $('.postfield:contains("Mensagens")').each(function() {
            var post_number = $(this).text().match(/\d+/g);
            if(post_number >= 0 && post_number < 15) {
              $(this).parents('.profile_infos').find('.my-newrank').html(
                '<img src="'+rank1+'">'
              );
            } else if(post_number >= 15 && post_number < 30) {
              $(this).parents('.profile_infos').find('.my-newrank').html(
                '<img src="'+rank2+'">'
              );
            } else if(post_number >= 30) {
              $(this).parents('.profile_infos').find('.my-newrank').html(
                '<img src="'+rank3+'">'
              );
            }
    });
  });
});

Até mais!

Perfeito amigão!
Parabéns pela sua grande competência e habilidade!

Estou imensamente satisfeito com o resultado.
Muito obrigado pela ajuda, e desculpe o incômodo.

Abraços,
OPPhantasy

De nada amigo, estamos aqui pra isso mesmo.
Da próxima vez lembre-se de utilizar o formulário para facilitar o entendimento de sua questão. E mais fácil ainda seria se seu fórum tivesse o acesso liberado no momento do suporte para que antes de passarmos o código, a gente possa testá-lo pelo console.


Até!