Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2312

Avatar par défaut en fonction du genre Empty Avatar par défaut en fonction du genre

le Ven 10 Mai - 10:13

Toutes versions

Avatar par défaut en fonction du genre


Bonjour bonjour Smile

Dans ce tutoriel, nous allons voir comment modifier l'avatar par défaut en fonction du genre du membre.

Idea Pré-requis :
• avoir l'url de l'avatar par défaut ;
• le champ "genre" doit être affiché dans les messages et les profils ;
• avoir accès aux templates.

Arrow Ce tutoriel fonctionne pour toutes les versions.

Idea Je considére que les templates utilisées sont ceux par défaut de la version.

Modification de template


Dans un premier temps, on va modifier le template "viewtopic_body".

1) On va entourer l'avatar du membre par une balise pour le cibler facilement. Pour cela, on va remplacer ça :
Code:
{postrow.displayed.POSTER_AVATAR}
par ça :
Code:
<figure class="posteur-avatar">{postrow.displayed.POSTER_AVATAR}</figure>

2) Ensuite, on va entourer toutes les infos concernant le membre par une balise avec un nom pour la retrouver facilement en js. Pour ça, on va remplacer ça :
Code:
<!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
par ça :
Code:
<span class="infos-posteur">
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 </span>

On sauvegarde et on publie.

Du javascript

Ensuite, on va créer un javascript qu'on va afficher sur toutes les pages du forum. Le voici (j'ai mis les commentaires directement dedans).
Code:
$(function(){

 /* ---- Infos à remplir ---- */
var texteGenreProfil = "Sexe",
 imgAvatarDefaut = "https://7img.net/users/3012/23/80/22/avatars/gallery/1_nvmy10.jpg",
 imgAvatarFeminin = "https://illiweb.com/fa/i/avatars/gallery/Cinema_f/Cinema_f_19.jpg",
 imgAvatarMasculin = "https://illiweb.com/fa/i/avatars/gallery/Cinema_h/Cinema_h_19.jpg";


 // On définit nos cibles dans les messages
   var cibleMsgAvatar = '.posteur-avatar img',
 cibleMsgChamps = '.infos-posteur > img';

   // on indique la version du forum
   // attention de bien respecter les écritures ci-dessous
   // invision, phpbb2, phpbb3, punbb, modernbb, awesomeBBB
   var versionForum = 'awesomeBBB';

  switch (versionForum) {
    case 'phpbb3':
 isProfil = '#profile-advanced-layout';
 cibleProfilAvatar = '#profile-advanced-right .inner';
 cibleProfilChamps = '.ucp-main #profile-tab-field-profil dl';
       break;

    case 'punbb':
 isProfil = '#profile-advanced-layout';
 cibleProfilAvatar = '#profile-advanced-right .main-content ';
 cibleProfilChamps = '#profile-advanced-details .main-content .middleline dl';
       break;

    case 'invision':
 isProfil = '#profile-advanced-layout';
 cibleProfilAvatar = '#profile-advanced-right .box-content.profile ';
 cibleProfilChamps = '#profile-advanced-details .box-content.profile .middleline dl';
       break;

    case 'modernbb':
 isProfil = '#profile-advanced-layout';
 cibleProfilAvatar = '#profile-advanced-right .mod-login-avatar ';
 cibleProfilChamps = '.ucp-main #profile-tab-field-profil dl';
       break;

   case 'awesomeBBB':
   cibleMsgChamps = '.infos-posteur > dd > img';
 isProfil = '.mod-login-avatar';
 cibleProfilAvatar = '.cp-sidebar .mod-login-avatar';
 cibleProfilChamps = '#profile-tab-field-profil .profile-advanced-stats';
       break;
    
    /* phpbb2 */
    default:
 isProfil = '.profile-title';
 cibleProfilAvatar = '.row1.gensmall';
 cibleProfilChamps = '#profile-advanced-details dl';
       break;
  }

 // On remplace les images
 function remplacerImg( infoGenre ){
 var nouvAvatar;

 // On regarde l'image du genre du membre, et on présélectionne l'avatar à afficher
 switch (infoGenre) {
 // Image "sexe féminin" dans les infos du profil
 case 'Féminin':
  // L'avatar qu'on veut attribuer par défaut aux membres féminin
  nouvAvatar = imgAvatarFeminin;
  break;

 // Image "sexe masculin" dans les infos du profil
 case 'Masculin':
 // L'avatar qu'on veut attribuer par défaut aux membres masculin
  nouvAvatar = imgAvatarMasculin;
  break;

 // Le sexe n'est pas renseigné
 default:
  nouvAvatar = false;
  break;
 }

   return nouvAvatar ;
 };


  // Au chargement de la page
  $(function(){

   var nouvAvatar;

   // On vérifie si on est dans un message
   if( $(cibleMsgAvatar).length){
   // on récupère l'url de l'avatar du membre
   var avatarActuel = $(cibleMsgAvatar).attr('src');

   // Si c'est l'avatar par défaut
   if(avatarActuel == imgAvatarDefaut){
   // On récupére le genre du membre
   var infoGenre = $(cibleMsgChamps).attr('alt');

   // On enregistre le nouvel avatar à mettre
 nouvAvatar = remplacerImg(infoGenre);

 // On remplace l'avatar du membre par celui correspondant à son genre
 $(cibleMsgAvatar).attr('src', nouvAvatar);
   }

   }
   // ou si on est sur le profil d'un membre
   else if( $(isProfil).length){
   // on récupère l'url de l'avatar du membre
   var avatarActuel = $(cibleProfilAvatar).find('img').attr('src');

   // Si c'est l'avatar par défaut
   if(avatarActuel == imgAvatarDefaut){
   // On récupére le genre du membre
   $(cibleProfilChamps).each( function(){
 var $elt = $(this),
 htmlChamp = $(this)[0].innerHTML;

 if(htmlChamp.indexOf(texteGenreProfil) > -1){
 var infoGenre = $elt.find('.field_uneditable img').attr('alt');
 // On enregistre le nouvel avatar à mettre
 nouvAvatar = remplacerImg(infoGenre);
 }
 });

 // On remplace l'avatar du membre par celui correspondant à son genre
 $(cibleProfilAvatar).find('img').attr('src', nouvAvatar);
   }

  
   }

  });
  
});

Idea 4 élements sont à changer :
• Le texte du champ qui correspond au genre du membre (par défaut : "Sexe") :
Code:
texteGenreProfil = "Sexe"
• L'url de ton avatar par défaut :
Code:
imgAvatarDefaut = "https://7img.net/users/3012/23/80/22/avatars/gallery/1_nvmy10.jpg"
• Les images des avatars par défaut que tu veux donner
Code:
imgAvatarFeminin = "https://illiweb.com/fa/i/avatars/gallery/Cinema_f/Cinema_f_19.jpg",
 imgAvatarMasculin = "https://illiweb.com/fa/i/avatars/gallery/Cinema_h/Cinema_h_19.jpg";
• La version de ton forum : les valeurs possibles sont : phpbb2, phpbb3, punbb, invision, modernbb, awesomeBBB
Code:
var version = 'phpbb2';




C'est terminé ^^

Surtout, si tu as le moindre souci, n'hésite pas à nous en parler Wink


Ayael
Ayael
Messages : 80

Avatar par défaut en fonction du genre Empty Re: Avatar par défaut en fonction du genre

le Ven 10 Mai - 12:34
Comme toujours formidable tutoriel (qui montre bien pourquoi la formation javascript est si utile /SBAF/), ceci dit, j'aimerais souligner que le genre n'est qu'un exemple. A priori ce code fonctionne avec tous les champs du même type dans le profil de base (à condition de sélectionner le bon nom de champ) donc ça ouvre beaucoup les possibilités !

Aprèèès, j'avoue je suis assez dubitative sur le fait de faire une distinction genré, ça peut très vite donné dans le bleu viril et le rose à paillette et virer au sexisme... Soyez prudent ! Angel
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2312

Avatar par défaut en fonction du genre Empty Re: Avatar par défaut en fonction du genre

le Ven 10 Mai - 14:10
Oh ça ne m'a meme pas traversé l'idée pour le rose/bleu. Pour moi c'est utile pour les avatars qui ont un texte du genre : "Soyez indulgent, je suis nouvelle" ou "Soyez indulgent, je suis nouveau" =)

Mais effectivement, on peut faire ça sur pas mal de chose. Par exemple, si tu as un forum Harry Potter, tu peux attribuer un avatar par défaut en fonction de la maison du membre Smile ou sur un forum RPG avec des races, un avatar par défaut en fonction de la race du perso Smile
(bon y aura peut etre des adaptations à faire, mais on est là pour ça Razz)

_________________
Contenu sponsorisé

Avatar par défaut en fonction du genre Empty Re: Avatar par défaut en fonction du genre

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses