[TUTORIAL] Avatar do membro no widget

Através deste tutorial você aprenderá como colocar o avatar do usuário conectado em um widget (porém o código funciona em qualquer outra parte do fórum que aceite códigos HTML). Ela baseia-se em javascript e localiza na página de edição dos avatares o avatar atual do usuário.

--> Tutoriais, dicas e astúcias <--
Avatar do membro no widget

1º - Os códigos que serão usados para cada versão:

phpBB3

Código:

<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.panel dl:first img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>

phpBB2

Código:

<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('#register .forumline td.row1 img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>

PunBB

Código:

<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.frm dl dd img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>

Invision

Código:

<script>
jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.box-content dl dd img', data).attr('src');
      if(link){
        jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
</script><div id="avatar"><center>Carregando avatar...</center></div>

2º - Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis:
Para criar o widget teremos de aceder à:
Painel de controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
E carregar em:




3º - Agora vamos configura o nosso widget personalizado

Nome do widget - Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle. Ex.: Membro

Utilizar um table type - Escolhe a opção "Sim", para que o widget, apresente uma estrutura.

Título do widget - Neste campo, deve colocar, um título.

Fonte do widget - Aqui deve por o código acima refere-te a seu versão.

Salvar - Por fim, após colocar o código, terá de "salvar" o seu widget personalizado. E mantenha-se na mesma página.

Exemplo

Código

Código: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script> jQuery(document).ready(function(){  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {  link = jQuery('.panel dl:first img', data).attr('src');       if(link){         jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>');       }else{         jQuery('#avatar').html('');       }  }); }); </script> <span  id="avatar"><center>Carregando Avatar...</center></span><span style="font-size: 1.2em;"  id="avatar"><br><font size="4"><span id="un">{USERLINK}</span></font><br><b>Mensagens:</b> {USERCOUNTPOST}<br></span><h3 style="border-color: #1675BC;"></h3>

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Avatar do membro no widget