*RESOLU* [PHPBB3] Badge dans le profile

Voir le sujet précédent Voir le sujet suivant Aller en bas

*RESOLU* [PHPBB3] Badge dans le profile

Sujet résolu le Dim 4 Juin 2017 - 11:04
Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
Salut,

Je cherche depuis plusieurs jours à faire un genre de système de badge, sans succès je cherche donc sur le net comment je pourrais faire ça..
Je voudrais faire un badge de 60x60px ou 50x50px peu importe, en PNG. Puis le mettre aux membres manuellement via la gestion des champs profile, mais là aussi, quand je modifie dans le CSS les champs "messages, localisation ect.." ça touche aussi les images hors, je voudrais avoir mes champs "message, localisation, points ect..." comme je veux et en dessous les PNG des badges sans que le style des badges soit touché par celui des autres champs quand je les édits.



Dernière édition par Tawny le Mar 6 Juin 2017 - 23:15, édité 1 fois
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Pierrick,

on doit pouvoir faire cela, pas contre il me faudrait connaitre la procédure via le P.A gestion profil, comment as tu procédé pour ajouter des images stp.
C'est bien pour la version pbpbb3 ?

Le template concerné et la c.s.s associée clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
Salut Philippe!

Alors le screen en question est un exemple de ce que je voudrais faire avec les badges, il n'y a pour l'instant aucune image. Je suis bien en PHPBB3.

Voici le template en question
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Bon sans c.s.s , je verrais pas grand chose,
je te fie une astuce Pierrick,
il faut créer pour ces quatre images , quatre nouveaux champs en liste d'image comme le montre la capture suivante.


Premier champ créé
il faudra mentionner
Nom :Badge1
ainsi que pour le texte alternatif de l'image

Deuxième champ créé
il faudra mentionner
Nom :Badge2
ainsi que pour le texte alternatif de l'image

troisième champ créé
il faudra mentionner
Nom :Badge3
ainsi que pour le texte alternatif de l'image

Qutrième champ créé
il faudra mentionner
Nom :Badge4
ainsi que pour le texte alternatif de l'image


Une fois effectué, il faudra ajouter ce script qui va supprimer le texte précédent l'image dans le profil des messages et englober toutes les images créées dans une div





Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur les sujets.


Déposes ceci:
Code:

$(function(){
$('.postprofile').each(function(){
$(this).find('img[alt="Badge1"]').prev().remove();
$(this).find('img[alt="Badge2"]').prev().remove();
$(this).find('img[alt="Badge3"]').prev().remove();
$(this).find('img[alt="Badge4"]').prev().remove();
$(this).find('img[alt^="Badge"]').wrapAll('<div class="M14_Img_Profil"></div>');
});});



Penses a cliquer sur le bouton Valider

Puis le style ensuite.


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

Ajoutes ceci:
Code:

/* Le conteneur d images*/
.M14_Img_Profil
{
text-align:center;
width: auto;
height: auto;
}

.M14_Img_Profil img
{
width:48px;
height:48px;
margin-right: 5px;
}


Penses à valider les modifications en cliquant sur le bouton Valider




-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
Merci Philippe,

J'ai toujours l'image pris dans les modifications des champs du profile "messages, localisation, points ect...". Une div est bien crée pour l'image d'un badge en question, mais après celui des champs, ce qui comme donne quelque chose comme ça.


Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
ben n'ayant pas toutes les cartes en main , je ne peux vraiment rien faire Pierrick!!!!



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
J'ai simplement ajouté ceci dans le template

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Pierrick,
j'aurais besoin d'avoir un visuel avec les 4 images ajoutées comme l'astuce mentionnée plus haut:

https://www.milouze14.com/t30683-phpbb3-badge-dans-le-profile#584337

Hum dans le template, il faut corriger ici:

Code:

<dd class="avatar-label1">
     <!-- BEGIN profile_field -->
                                              <div class="avatar-label">&nbsp;{postrow.displayed.profile_field.LABEL}<br />{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}{postrow.displayed.contact_field.CONTENT}</div>
                                               <!-- END profile_field -->
     {postrow.displayed.POSTER_RPG}
 </dd>

Par :
Code:

<dd class="avatar-label1">
<div class="avatar-label">
<!-- BEGIN profile_field -->
  <div>
  {postrow.displayed.profile_field.LABEL}<br />{postrow.displayed.profile_field.CONTENT}
  </div>
<!-- END profile_field -->
  </div>{postrow.displayed.contact_field.CONTENT}
{postrow.displayed.POSTER_RPG}
</dd>

Car il y a une répétition du conteneur:
Code:
<dd class="avatar-label1">

au lieu de celui-ci:
Code:
<div class="avatar-label">

Puis on entoure le titre et son contenu par un div et on supprimer la variable qui gère les retours à la ligne etc vu que
tu déposes un saut de ligne entre ces deux variables.


Pour les 4 images il faudrait pour bien faire et avoir quelque chose de correcte, les placer en bas dans ton P.A option du profil.
Les quatre lignes doivent être placées en dernière position comme le montre cette capture:




Puis la c.s.s modifiée:
Code:
 
 dd.avatar-label1 {
        padding: 5px 0;
    }
    .avatar-label div{
        background: #fff;
        color: #333;
        display: inline-block;
        font-size: 17px;
        height: 40px;
        line-height: 1.2;
        margin: 5px;
        width: 80px;
    }
/* Le conteneur d images*/
.M14_Img_Profil
{
    height: auto !important;
    text-align: center;
    width: 250px !important;
    background: transparent !important;
    margin-top: 40px !important;

}

.M14_Img_Profil img
{
width:48px;
height:48px;
margin-right: 5px;
}

Et enfin le script:

Code:

$(function(){
$('.postprofile').each(function(){
$(this).find('img[alt^="Badge"]').closest('div').find('br').remove();
$(this).find('img[alt^="Badge"]').unwrap();
$(this).find('img[alt="Badge1"]').prev().remove();
$(this).find('img[alt="Badge2"]').prev().remove();
$(this).find('img[alt="Badge3"]').prev().remove();
$(this).find('img[alt="Badge4"]').prev().remove();
$(this).find('img[alt^="Badge"]').wrapAll('<div class="M14_Img_Profil"></div>');
});});


On modifiera si besoin l'apparence des autres champs si cela pose problème Pierrick,
mais cette partie de ton template doit être corrigée  clin oeil .

impeccable



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
Salut Philippe, merci beaucoup une énième fois..

Voici le résultat obtenu, c'est exactement ce que je souhaitais.

Quand j'ajoute 5 à 6 badges, les badges changent de ligne, c'est normal je pense. Il y aurait-il une astuce pour mettre un genre iframe ? Ou encore mieux, comme sur le forum d'ange tuteur avec un lien en dessous menant vers une page forum (ou j'expliquerais au préalable a quoi correspondent les badges)
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hum, je n'arrive pas a comprendre pourquoi la div ne respecte pas un
Code:
overflow-x

Bref, ne penses tu pas qu'il faudrait mettre trois Badge et en dessous l'identique?
Je ne connais pas la pratique d'Ange Tuteur Pierrick.
Ensuite, on peut ajouter un lien pour chaque image si tu veux, ce sera plus précis.

Peux tu me filer les liens de tes images stp afin que j'ai l'identique clin oeil




-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
Je compte créer des badges a chaque événements et qui seront remis aux utilisateurs présent. Sur le fil du temps ça ferait donc un bon paquets de badges a afficher dans le profil, j'avais donc pensé a un iframe (je sais même pas si c'est vraiment un iframe) ou l'utilisateur pourrait scroll tout les badges sur un profil. Voici un exemple en image:


Ensuite les images utilisés sont tous les mêmes, j'ai mis des images identiques pour tester, les voici:
https://i.servimg.com/u/f58/19/60/94/77/55510.png
https://i.servimg.com/u/f58/19/60/94/77/444410.png
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Pierrick,
pour les iframes , il ne faut même pas y penser mon ami,
je regarde ce que je peux faire car le résultat n'est pas concluant actuellement..
Hum petite question,est-ce que ces badges seront pour tous les membres ? Dans ce cas, c'est bien plus simple a mettre en oeuvre



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
Salut Philippe hinhin

Non ça ne serait pas pour tout les membres, uniquement pour les membres ayant participé a certain événements et a certaine étape de notre communauté.

EDIT: Finalement, comme ça, ça ne dérange pas vraiment, c'était ce que je voulais faire le reste était simplement un petit plus.
Cependant, est-il possible d'afficher une infobulle sur chaque badge lui donnant ainsi une description au passage de la souris?
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Alors me revoilou et je n'ai pas réussi a faire mieux Pierrick,

Il faut impérativement éditer tous les champs dans le P.A du profil et mettre le séparateur à aucun.

Ensuite dans le viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Recherches ceci:
Code:
<!--<dd>
     {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT}
     </dd>-->
     </dl>

Dépose juste après ceci:
Code:
<div class="M14contBadge"></div>



Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer  puis  Ajout



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


Ajoutes ceci:

Code:
.postprofile .avatar-label .M14_hide{display:none;}

/* Le conteneur d images*/

.M14contBadge
{
height: 50px;
width:250px;
background: transparent !important;
margin-top: 40px;
text-align: center;
overflow-y: auto;

}
.M14contBadge img{width:50px;height:50px;float:left;}


Penses à valider les modifications en cliquant sur le bouton Valider


Puis le script:

Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur les sujets.

Déposes ceci:

Code:

$(function(){
$('.postprofile').each(function(){
var test=$(this).find('img[alt^="Badge"]').length;
$(this).find('img[alt^="Badge"]').closest('div').addClass('M14_hide').find('.label').remove();
$(this).find('img[alt^="Badge"]').removeAttr('title');
$(this).find('img[alt^="Badge"]').wrapAll('<p class="M14_conT_hide"></p>');
var test1=$('p.M14_conT_hide').html();


if(test)
{
  $(this).find('.M14contBadge').after('<div style="text-align:center;"> Actuellement '+test+' Badge(s)</div>');
$(this).find('.M14contBadge').append(''+test1+'');
}
$('img[alt="Badge1"]').wrap('<a href="lien du sujet badge 1"title="Voir les informations du badge 1"></a>');
$('img[alt="Badge2"]').wrap('<a href="lien du sujet badge 2"title="Voir les informations du badge 2"></a>');
$('img[alt="Badge3"]').wrap('<a href="lien du sujet badge 3"title="Voir les informations du badge 3"></a>');
$('img[alt="Badge4"]').wrap('<a href="lien du sujet badge 4"title="Voir les informations du badge 4"></a>');
$('img[alt="Badge5"]').wrap('<a href="lien du sujet badge 5"title="Voir les informations du badge 5"></a>');
$('img[alt="Badge6"]').wrap('<a href="lien du sujet badge 6"title="Voir les informations du badge 6"></a>');

});});



Penses a cliquer sur le bouton Valider



Aperçu imagé:



En dessous du conteneur tu auras aussi un texte indiquant pour chaque membre le nombre de badge qui lui est attribué:



Malheureusement le scroll se fera verticalement et non l'inverse Pierrick clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Tawny
avatar
Modérateur

MessageTawny

  • 16px
  • 24px
  • Zoom
Chapeau et un immense merci Philippe... hinhin super Je comptais simplement sur une astuce sur les descriptions des badges car le reste me paraissais complexe et surtout long et chiant. Je te remercie amplement pour cette aide précieuse.
Jackymi
avatar
Modérateur

MessageJackymi

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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