Montrer l'avatar des meilleurs posteurs du mois/de la semaine

[Lauranna]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://moun.forumactif.com/

Description du problème

Bonjour!

J'ai découvert un truc magique, les widgets. J'ai notamment découvert le widget "meilleurs posteurs du mois/de la semaine. Bon, j'ai réussi à enlever la barre, qui ne m'intéresse pas. J'aimerai pouvoir le modifier pour remplacer le simple nom des membres par leur avatar. Je sais qu'il y a des codes avec JS, mais il me semble que ça donne l'avatar de la personne qui regarde. Et je suis NULLISSIME en JS ^^"

Du coup serait-il possible de me dire s'il est possible (et si oui COMMENT) d'appeler automatiquement l'avatar du membre? MERCI

[Invité]

Hello Lauranna,
ce sera possible mais que pour les membres connectés (ce qui va de soit ) .
Ensuite , as tu activé le profil avancé? :
Utilisateurs et groupes/Profil/Options générales/Options générales du profil

Activer le profil avancé :

a++

[Lauranna]

Maintenant, oui!

Tu veux dire que seuls les membres connectés verront le widget meilleurs posteurs avec l'avatar des meilleurs posteurs en question?

J'ai réussi à trouver un script JS qui a l'air de faire ce que je veux, ici, par @nihil, mais il parle d'avoir un lien. Or, dans mon cas, le lien est contenu dans le [poster name] et je sais pas le récupérer. Ai-je dit ne pas aimer le JS? ^^"

[Invité]

Re,

Tu veux dire que seuls les membres connectés verront le widget meilleurs posteurs avec l'avatar des meilleurs posteurs en question?

Oui effectivement car les invités ne peuvent pas voir les profils par défaut.

J'ai déjà un JS .


a++

[Lauranna]

*rattrape par le col*

Tatata, pars pas comme ça, j'ai pas compris! J'fais comment pour remplacer les noms de mes meilleurs posteurs par leurs avatars dans le widget?

Edit: *se rappelle que c'est pas poli d'attraper les gens par le col* siteplé Ogranmaitredujavscript? *fais des yex de petitchiotbattusouslapluie*

[Invité]

Re,
pardon !!


Faut pas être pressé comme cela!!

Les invités verront le visuel de base et les membres .
On va donc se baser sur le profil activé et prendre le lien des avatars ayant un alt correspondant contrairement au script que tu mentionnes ou ce fameux alt n'était pas encore présent sur les serveurs de Forumactif.

On va modifier le template concerné:

Dans le template mod_top_post_users_week:
Affichage/Templates/Portail/mod_top_post_users_week

Remplaces ces deux lignes:

Code:

<td class="{POSTER.ROW_CLASS} genmed" width="30%">{POSTER.NAME}</td>
               <td class="{POSTER.ROW_CLASS}" nowrap="nowrap" title="{POSTER.NB_POSTS}">{POSTER.BARRE}</td>

Par:

Code:

<td class="{POSTER.ROW_CLASS} genmed M14_get_avatar" width="30%">{POSTER.NAME}</td>
               <td class="{POSTER.ROW_CLASS} M14_get_barre" nowrap="nowrap" title="{POSTER.NB_POSTS}">{POSTER.BARRE}</td>

Penses a enregistrer puis à valider en cliquant respectivement sur puis

La première ligne a cette class:

Code:

M14_get_avatar

La deuxième:

Code:

M14_get_barre

Elles serviront dans le script.


En parlant de script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Mets un titre explicite.
Coches sur toutes les pages.




Déposes ceci:

Code:


$(function(){
if(!_userdata["session_logged_in"])return;
$('td.M14_get_avatar').find('a[href^="/u"]').each(function(){
var $this=$(this);
var title=$(this).text();
var link=$(this).attr('href');
$.get(link , function(data){
var h= $(data).find('img[alt="'+title+'"]').attr('src');
$this.closest('tr').find('.M14_get_barre').text('%');
$this.find('span').remove();
$this.prepend('<center><img src="'+h+'" title="'+title+'"/></center>');
});
});});


Penses a cliquer sur le bouton VALIDER

Tu auras cet affichage:



Tu peux changer le "%" dans le script ici:

Code:

$this.closest('tr').find('.M14_get_barre').text('%');

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


td.M14_get_avatar img{max-width:36px;}
td.M14_get_barre{text-align:center;font-size:12px;}


Penses à cliquer sur le bouton


Et voilou.
a++

[Lauranna]

Pardon. C'est juste que je voulais pas aller me coucher sans avoir la réponse sinon je vais cauchemarder en JS toute la nuit, et que je me fais disputer pour aller au lit! J'essaie ça de suite!

[Invité]

Re,

C'est juste que je voulais pas aller me coucher sans avoir la réponse

Dans ce cas, faut venir le matin vers 5h00 .

Je verrais tout cela désormais demain matin de mon côté .

Bonne soirée.
a++

[Lauranna]

Je voulais finir avant d'aller me coucher pour pas cauchemarder que je suis encerclée de JS! :p

Et là ça marche! Bon, j'ai remanié un peu, et je sais pas ce que ça donnera transposé au "vrai" forum. Mais j'suis fière!

M.E.R.C.I

[Invité]

Hello Lauranna,

Et là ça marche! Bon, j'ai remanié un peu,

Ah, cela aurait judicieux de donner tes modifications pour la suite des évènements .


Il faut aussi penser qu'en début de semaine , le widget doit être vide,
j'ai donc revu le template et donné un id à la table  forumline.

Code:

M14_post_users_week

Code:

<table id="M14_post_users_week"class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catLeft" height="25"><span class="genmed module-title">{L_TOP_POST_USERS_WEEK}</span></td>
 </tr>
 <tr>
 <td>
 <table summary="{L_TOP_POST_USERS_WEEK}" width="100%">
 <!-- BEGIN POSTER -->
 <tr>
 <td class="{POSTER.ROW_CLASS} genmed M14_get_avatar" width="30%">{POSTER.NAME}</td>
 <td class="{POSTER.ROW_CLASS} M14_get_barre" nowrap="nowrap" title="{POSTER.NB_POSTS}">{POSTER.BARRE}</td>
 </tr>
 <!-- END POSTER -->
 </table>
 </td>
 </tr>
</table>

Puis le script qui supprimera le widget en cas ou il n'y a aucun membre:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
var test=$('td.M14_get_avatar').find('a[href^="/u"]').length;
$('td.M14_get_avatar').find('a[href^="/u"]').each(function(){
var $this=$(this);
var title=$(this).text();
var link=$(this).attr('href');
if(test>=1)
{
$.get(link , function(data){
var h= $(data).find('img[alt="'+title+'"]').attr('src');
$this.closest('tr').find('.M14_get_barre').text('%');
$this.find('span').remove();
$this.prepend('<center><img src="'+h+'" title="'+title+'"/></center>');
 
});}});

if(test==0){$('#M14_post_users_week').remove();}

});


Ensuite pour les utilisateurs les plus actifs du mois:

Le template modifié:

Dans le template mod_top_post_users_month:
Affichage/Templates/Portail/mod_top_post_users_month


Remplaces tout le contenu par:

Code:

<table id="M14_post_users_month"class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catLeft" height="25"><span class="genmed module-title">{L_TOP_POST_USERS_MONTH}</span></td>
 </tr>
 <tr>
 <td>
 <table summary="{L_TOP_POST_USERS_MONTH}" width="100%">
 <!-- BEGIN POSTER -->
 <tr>
 <td class="{POSTER.ROW_CLASS} genmed M14_get_avatar_month" width="30%">{POSTER.NAME}</td>
 <td class="{POSTER.ROW_CLASS} M14_get_barre_month" nowrap="nowrap" title="{POSTER.NB_POSTS}">{POSTER.BARRE}</td>
 </tr>
 <!-- END POSTER -->
 </table>
 </td>
 </tr>
</table>


La css compilée:

Code:


td.M14_get_avatar img,td.M14_get_avatar_month img{max-width:36px;}
td.M14_get_barre,td.M14_get_barre_month{text-align:center;font-size:12px;}


Le J.S qui peut être placé avec l'autre:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
var test=$('td.M14_get_avatar_month').find('a[href^="/u"]').length;
$('td.M14_get_avatar_month').find('a[href^="/u"]').each(function(){
var $this=$(this);
var title=$(this).text();
var link=$(this).attr('href');
if(test>=1)
{
$.get(link , function(data){
var h= $(data).find('img[alt="'+title+'"]').attr('src');
$this.closest('tr').find('.M14_get_barre_month').text('%');
$this.find('span').remove();
$this.prepend('<center><img src="'+h+'" title="'+title+'"/></center>');

});}});

if(test==0){$('#M14_post_users_month').remove();}

});

a++

[Lauranna]

Pour le mois c'est pareil que pour la semaine, non? Juste l'id qui change?

Et pardon, je te montre les remaniement ^^"

Code:

<div class="forumline" width="100%" border="0" id="M14_post_users_week">
   <h1>
         <label>Meilleurs posteurs cette semaine</label>      
   </h1>
   <div alt="{L_TOP_POST_USERS_WEEK}" width="100%" style="text-align: center;">
      <!-- BEGIN POSTER -->
                    <div class="{POSTER.ROW_CLASS} genmed M14_get_avatar">{POSTER.NAME}</div>
      <!-- END POSTER -->
  </div>
</div>

Je voulais pas d'un tableau, donc j'ai mis les images dans la même cellule, et supprimé le truc de %. Aussi, je voulais que e titre corresponde aux autres widgets, donc j'y ai donné la même classe.

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
$('div.M14_get_avatar').find('a[href^="/u"]').each(function(){
var $this=$(this);
var title=$(this).text();
var link=$(this).attr('href');
$.get(link , function(data){
var h= $(data).find('img[alt="'+title+'"]').attr('src');
$this.find('span').remove();
  $this.prepend('<div style="background-image:url('+h+');" title="'+title+'"></div>');
});
});});

et le JS, j'ai enlevé la barre comme tu m'as dit, et modifié le code html en bas pour que ce soit des div avec BG, comme ça c'est des carrés propres. Pour le CSS, j'ai mis en forme les images et je sais pas jusqu'à cb je peux avoir de posteurs indiqués, mais si c'est + que 3, je pense faire un "display: none" sur tous sauf les nth-of type 1, 2 et 3.  Pour le code, si j'ai bien compris, tu regarde s'il y a des posteurs du mois, et tu supprime le widget si non? Mais du coup si je veux par exemple mettre un message "allez poster bande de gens pour remplir le forum", il faut que je fasse ça?

Code:

if(test==0){$this.prepend('Allez poster bande de gens!')}

Edit: Ah nan, trouvé!

J'ai rajouté une div sous la boucle d'affichage des posteurs en dessous nommée "siyarien". Et j'ai mis ce code, sorti d'un code JS que j'avais appris pour changer la date d'un élément!

Code:

if(test==0){document.getElementById("siyarien").innerHTML="Allez poster bande de gens";}

[Invité]

Re,
alors je ne comprends pas ceci:

Code:

  $this.prepend('<div style="background-image:url('+h+');" title="'+title+'">

J'ai donc repris ta configuration sur les deux templates et ajouté une class ( M14_conteneur ) pour la div receveuse:
Car tu alignes les avatars,il faut donc supprimer cet alignement et
donner un minimum d'instructions pour cette div.

Exemple avec celui de la semaine:

Code:

    <div id="M14_post_users_week"class="forumline" width="100%" border="0" id="M14_post_users_week">
      <h1>
            <label>Meilleurs posteurs cette semaine</label>     
      </h1>
      <div class="M14_conteneur"alt="{L_TOP_POST_USERS_WEEK}" width="100%" >
          <!-- BEGIN POSTER -->
                        <div class="genmed M14_get_avatar">{POSTER.NAME}</div>
          <!-- END POSTER -->
      </div>
    </div>

Puis la c.s.s:

Code:


.M14_get_avatar img,.M14_get_avatar_month img{max-width:36px;}
.M14_conteneur
{
width:100%;
 min-height:90px;
  height:auto;
  overflow-y:auto;
}
.M14_get_avatar,
.M14_get_avatar_month
{
display: inline-block;
margin: 4px;
}



Pour le code, si j'ai bien compris, tu regarde s'il y a des posteurs du mois, et tu supprime le widget si non? Mais du coup si je veux par exemple mettre un message "allez poster bande de gens pour remplir le forum", il faut que je fasse ça?

Plutôt ceci:

Code:

if(test==0){$('#M14_post_users_week').text('Allez poster bande de gens!');}

Le script complet:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
var test=$('.M14_get_avatar').find('a[href^="/u"]').length;
$('.M14_get_avatar').find('a[href^="/u"]').each(function(){
var $this=$(this);
var title=$(this).text();
var link=$(this).attr('href');
if(test>=1)
{
$.get(link , function(data){
var h= $(data).find('img[alt="'+title+'"]').attr('src');
$this.html('<img src="'+h+'" title="'+title+'"/>');
  //$this.prepend('<div style="background-image:url('+h+');" title="'+title+'">
 
});}});

if(test==0){$('#M14_post_users_week').text('Allez poster bande de gens!');}

});

Le code html pour le mois (il faut changer l'id et la class):

Code:

<div id="M14_post_users_month"class="forumline" width="100%" border="0">
      <h1>
            <label>Meilleurs posteurs du mois</label>     
      </h1>
      <div class="M14_conteneur"alt="{L_TOP_POST_USERS_MONTH}" width="100%">
          <!-- BEGIN POSTER -->
                        <div class="genmed M14_get_avatar_month">{POSTER.NAME}</div>
          <!-- END POSTER -->
      </div>
    </div>

Le script:

Code:

$(function(){
if(!_userdata["session_logged_in"])return;
var test=$('.M14_get_avatar_month').find('a[href^="/u"]').length;
$('.M14_get_avatar_month').find('a[href^="/u"]').each(function(){
var $this=$(this);
var title=$(this).text();
var link=$(this).attr('href');
if(test>=1)
{ 
$.get(link , function(data){
var h= $(data).find('img[alt="'+title+'"]').attr('src');
$this.html('<img src="'+h+'" title="'+title+'"/>');

});}});

if(test==0){$('#M14_post_users_month').text('Allez poster bande de gens!');}

});

a++

[Lauranna]

Ca marche, merci beaucoup!

[Chacha]

Ca marche, merci beaucoup!

Bonjour, Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton