Connexion

Récupérer mon mot de passe

Derniers sujets*
» [PHPBB3] Afficher le nombre LIKES dans la liste des sujets
par photoclic Hier à 23:18

» [TOUTES VERSIONS]Afficher les scripts disponibles et désactivés dans un widget (ADMIN)
par photoclic Jeu 14 Oct 2021 - 10:06

» [PHPBB2]Personnaliser les annonces, notes etc
par Constellation Mer 13 Oct 2021 - 1:23

» [PHPBB2] Afficher la partie profil au dessus du message
par Milouze14 Mar 12 Oct 2021 - 11:24

» [PHPBB2] Cacher tous les sujets des invités
par Angelface Jeu 30 Sep 2021 - 18:31

» [PHPBB2] Afficher le nombre de message privé non lus sur la toolbar etc
par Angelface Jeu 30 Sep 2021 - 18:07

» Ajout d'ami rapide
par Milouze14 Jeu 30 Sep 2021 - 6:54

» [PHPBB2] Afficher les membres en ligne (version graphique) sur l'index et dans la liste des sujets
par Angelface Mer 29 Sep 2021 - 2:01

» [TOUTES VERSIONS] Masquer le bouton j'aime pas ou j'aime a un membre
par soleda Mar 28 Sep 2021 - 8:14

» [PHPBB3]Personnaliser les annonces, notes etc
par Milouze14 Mer 8 Sep 2021 - 8:09

» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum (Version Française)
par Myrddin Ven 3 Sep 2021 - 22:34

» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
par Ella Lun 30 Aoû 2021 - 18:13

» [PHPBB2]Afficher des commentaires sous forme de vignettes
par soleda Ven 6 Aoû 2021 - 9:38

» [AWESOMEBB]Supprimer le mot invité
par Milouze14 Lun 19 Juil 2021 - 19:03

» [MODERNBB]Supprimer le mot invité
par Milouze14 Lun 19 Juil 2021 - 18:53

» [AWESOMEBB]Modifier les icônes de la réponse rapide
par Milouze14 Sam 17 Juil 2021 - 19:37

» [MODERNBB]Afficher des commentaires sous forme de vignettes
par Milouze14 Lun 12 Juil 2021 - 8:37

» [AWESOMEBB]Afficher des commentaires sous forme de vignettes
par Milouze14 Mer 7 Juil 2021 - 19:25

» [PHPBB3]Afficher des commentaires sous forme de vignettes
par photoclic Jeu 1 Juil 2021 - 23:28

» [PHPBB2] Afficher l'id/ami et brouillon dans le Welcome de la toolbar
par Ptite_Perle Jeu 24 Juin 2021 - 18:29

Les statistiques du forum
Nous avons 484 membres enregistrés

L'utilisateur enregistré le plus récent est saya

Nos membres ont posté un total de 27725 messages dans 1414 sujets

[PHPBB3]Afficher des commentaires sous forme de vignettes

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

2 participants
Message n°10
Milouze14
Milouze14
Fondateur

https://www.milouze14.com

MessageMilouze14 Mer 30 Juin 2021 - 19:56

Hello les ami(e)s,

voici une astuce (template non modifié) bien sympa.

Astuce incompatible avec les doubles post:
https://forum.forumactif.com/t405404-fusionner-agreger-les-multi-messages-double-post#3380145

Le code html devra être déposé dans un sujet ou tous les membres peuvent répondre via la réponse rapide.

La réponse rapide étant désactivée pour les invités, ces derniers ne pourront donc pas en profiter.

Si cette dernière est absente le formulaire ne s'affichera pas.



On aura un contenu qui sera envoyé seulement si le membre aura tapé X caractères (défini dans le script) .

Pour l'exemple j'ai défini 15 caractères.
Code:

//Le nombre minimum de caracteres
var num=15;

Le zéro (0) correspond au nombre de caractères tapés et à coté le nombre restant.
Une fois les 15 caractères atteint, ces deux parties laisseront la place à un texte
mentionnant que le membre peut envoyer son commentaire (modifiable dans le script):

Code:
//LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
var textinfo="Vous pouvez envoyer votre commentaire";

Le membre aura le choix de poster en anonyme et
dans ce cas il cochera la case et un avatar par défaut lui sera attribué.



Cet avatar est modifiable dans le script:
Code:
//LE LIEN DE L AVATAR PAR DEFAUT
var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";
Dans le cas ou le membre ne coche pas cette case, son avatar sera donc affiché.

Pour les membres du staff, il pourront soit éditer ou supprimer la vignettes,
les membres verront juste les vignettes.

Toutes les vignettes auront l'id du message, c'est à dire qu'à la publication du message on pointera vers ce dernier.

Pour que cette astuce fonctionne, il est impératif d'activer le premier message:

Le nombre de vignettes sera comptabilisées par page.

Général/Messages et Emails/Configuration/Messages

Toujours afficher le 1er message dans les sujets:
Cocher Oui
Et que la réponse rapide soit activée:
Général/Messages et Emails/Configuration/Messages


Autoriser les Réponses rapides : cocher oui




Les aperçus imagés :
[PHPBB3]Afficher des commentaires sous forme de vignettes 129

[PHPBB3]Afficher des commentaires sous forme de vignettes 218

Pour le staff on reprend les images du bouton "Editer" et "Supprimer"

[PHPBB3]Afficher des commentaires sous forme de vignettes 132

Le script est optimisé pour le tag du membre:

[PHPBB3]Afficher des commentaires sous forme de vignettes 219



Allez hop le script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher  Sur les sujets


Déposer ceci:

Code:

$(function(){
  
//Si sujet verrouille
var verrou=$('img[alt^="Ce sujet est verrouillé"]').length;
//Si reponse rapide presente
var quick=$('form[id="quick_reply"]').length;
var log=_userdata["session_logged_in"];
//SI VERROUILLE ALORS ON CACHE LE FORMULAIRE
if((verrou)||(log==0)||(quick==0)){$('.M14_formulaire').hide();}
//SI DECONNECTE ON REMPLACE LE CONTENU DES VIGNETTES PAR UN LOGIN/REGISTER
if(log==0){$('.M14_vignette_topic').addClass('InvitE').html('<span class="M14_vignette_reg_log">Vous devez être <a href="/register" class="link">inscrit</a> et <a href="/login"class="link">connecté</a> pour voir ce commentaire</span>');  }
    var user=_userdata["username"];
    //le texte affiché dans le conteneur
    var texta="votre commentaire doit contenir au moins";
    //Le nombre minimum de caracteres
    var num=15;
    var btn=$('#M14_formulaire_Go');
    $('.M14_formulaire_caractere_info').text('Reste:'+num+'');
    $('#M14_formulaire_Comment').attr('placeholder','Bonjour '+user+',\n'+texta+' '+num+' caractéres.');  
    $('#M14_formulaire_Comment').keyup(function(){
    var a=$(this).val().length;
    var result=num-a;
    //LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
    var textinfo="Vous pouvez envoyer votre commentaire";
    $('.M14_formulaire_caractere_info').text('Reste:'+result+'');
    if(a>=num)
    {
    $('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','0');
    $('input[id="M14_formulaire_Go"]').slideDown();
       $('.M14_formulaire_caractere').attr('title','Envoyer votre commentaire').text(textinfo);
    }
    if(a<num)
    {
    $('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','1');
      $('input[id="M14_formulaire_Go"]').slideUp();
       $('.M14_formulaire_caractere').attr('title','Nombre de caractéres').text(a);
    }
    });
    
    $(btn).click(function(){
    var avatar=_userdata["avatar"];
    var pseudo='@"'+_userdata["username"]+'"';
    var commentaire=$('#M14_formulaire_Comment').val();
      //Si pseudo non renseigne
    if($('input[name="M14_formulaire_Anonyme"]').is(':checked')){
    var b=$('input[id="M14_formulaire_Anonyme_hide"]').val();
    //LE LIEN DE L AVATAR PAR DEFAUT
    var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";
    var avatar='<img src="'+img+'">';
    var pseudo=$('input#M14_formulaire_Anonyme_hide').val();
        }
        var aujourdhui=new Date();
        var annee=aujourdhui.getFullYear();
        var mois=aujourdhui.getMonth();
        var jour=aujourdhui.getDate();
        var joursemaine=aujourdhui.getDay();
        var tab_mois=new Array("janv.","fév.","mars.","avril.","mai","juin","juil.","aout","sept.","oct.","nov.","déc.");
        var heure=aujourdhui.getHours();
    if (heure<10) {heure = "0" + heure}
        var minutes=aujourdhui.getMinutes();
    if (minutes<10) {minutes = "0" + minutes}
        var fullHeure=heure+' h '+minutes;
        var fullDate='a publié ce commentaire le '+jour+' '+tab_mois[mois]+' '+annee+' à '+fullHeure;
        $editor = $('.sceditor-container');
    if ($editor.hasClass('wysiwygMode')) $editor.removeClass('wysiwygMode').addClass('sourceMode') ;
    $('#quick_reply textarea ').val('<div class="M14_vignette_topic"><div class="M14_vignette_ancre"style="position: relative;top: -30px; width: 1px;"></div><div class="M14_vignette_topic_comment"><div class="M14_vignette_topic_Img">'+avatar+'</div><div class="M14_vignette_topic_Haut"><span class="M14_vignette_topic_Titre">'+pseudo+'</span><span class="M14_vignette_topic_Date">'+fullDate+'</span></div><div class="M14_vignette_topic_Commentaire">'+commentaire+'</div></div>\n</div>');
        $("#quick_reply input[name='post'][value='Envoyer']").click()})
    });

    $(function(){    
    $('.M14_vignette_topic_Titre').each(function(){var $this=$(this);
    var not=$(this).find('a[href^="/u"]').length;
    if(!not){$this.addClass('no_pseudo');}});
    var staff=$('a[href^="/modcp?mode=delete"]').length;
    var a=$(this).find('.M14_vignette_topic').length;
    $(this).find('.M14_vignette_topic').each(function(){
    $(this).closest('div[class*="post--"]').addClass('M14_post_none');
    var link=$(this).closest('div[class*="post--"]').find('div[style]').attr('id');
    $(this).find('.M14_vignette_ancre').attr('id',link);  
    var d=$(this);
    if(staff)
    {
    var b=$(this).closest('div[class*="post--"]').find('a[href$="mode=editpost"]').closest('li').html();
    var c=$(this).closest('div[class*="post--"]').find('a[href$="mode=delete"]').closest('li').html();
    $('.M14_recept_comment').append(d);d.before(''+b+'  '+c+'');}
    $('.M14_recept_comment').append(d);});
    var w=$('div[class*="post--"]:first').find('.M14_vignette_topic').length;
    if(w==0){$('.M14_formulaire_affiche').attr('title','Aucun commentaire').html('( 0 )');  }
    if(w==1){$('.M14_formulaire_affiche').attr('title','1 commentaire').html('( '+w+' )');  }
    if(w>1){$('.M14_formulaire_affiche').attr('title',''+w+' commentaires').html('( '+w+' )');  }
    });

Penser a cliquer sur le bouton Valid

La css a été optimisée afin d'avoir un affichage concret.


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

Ajouter ceci:

Code:

/*LE CONTENEUR DES VIGNETTES*/
.M14_recept_comment
{
width:100%;
position: relative;
}
/********DEBUT DES VIGNETTES********/
/*LA VIGNETTE*/
.M14_vignette_topic
{
margin-top:5px;
margin-bottom: 3px;
border:1px solid #666;
padding: 2px;
height: 100px;
width: 90%;
}

/*LA DATE*/
.M14_vignette_topic_Date
{font-size:11px; margin-left:10px;color:#666!important;}
/*LA PARTIE COMMENTAIRE*/
.M14_vignette_topic_Commentaire
{
  color:#666!important;
  font-size:11px!important;
  padding: 2px;
  white-space: pre-wrap;
  height:50px;
  width:85%;
  overflow-y:auto;
  border:1px dotted #666;
}

/*LE CONTENEUR DE L AVATAR*/
.M14_vignette_topic_Img{position: absolute;margin-top:13px;}
/* L AVATAR*/
.M14_vignette_topic_Img img{width:60px!important;height:60px!important;border-radius:100%;}
/*ON DECALE DE 70 PX LES BLOCS DE DROITE EN FONCTION DE L AVATAR*/
.M14_vignette_topic_Haut,.M14_vignette_topic_Commentaire{margin-left:70px;}
/*LE PSEUDO*/
.M14_vignette_topic_Titre:not(.no_pseudo) a[href^="/u"]{color:#666;font-size:11px; }
/*SI ANONYME*/
.M14_vignette_topic_Titre.no_pseudo{color:red;font-style:italic;font-size:11px;}
/*ON CENTRE LA VIGNETTE POUR LES INVITES*/
.M14_vignette_topic.InvitE{text-align: center;}
/*COULEUR ET APPARENCE DU TEXTE/LIEN DANS LA VIGNETTE POUR LES INVITES*/
.M14_vignette_reg_log{color:red!important;line-height: 100px;}
.M14_vignette_reg_log a.link{color:red!important;text-decoration:none!important;}
/********FIN DES VIGNETTES********/
/*ON MASQUE LES MESSAGES*/
.M14_post_none{display:none!important;}
/*LE FORMULAIRE*/
.M14_formulaire
{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px 20px;
}
/*LE COMPTEUR DE CARACTERES*/
.M14_formulaire_caractere
{
position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
}
.M14_formulaire_caractere_info
{
  position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
  margin-left:25px;
}
/*LE TITRE DU FORMULAIRE*/
.M14_formulaire_Titre
{
color:#666!important;
font-size:11px!important;
font-family: Muli;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
/*LE NOMBRE DE VIGNETTES A COTE DU TITRE*/
span.M14_formulaire_affiche
{
margin-left:5px;
font-size: 11px;
color:#666!important;
cursor:pointer;
}
/*LE CONTENU */
#M14_formulaire_Comment
{
color:#000!important;
font-weight:bold;
font-size:11px!important;
border: 1px solid #eee;
height: 100px;
margin: 5px 0;
padding: 10px;
width: 95%;
}
 
/*LE BOUTON ENVOYER*/
#M14_formulaire_Go{display:none;float:right;}
/*LA LIGNE DES BOUTONS*/
.M14_formulaire_btn
{
width:80%;
color: #666;;
font-size:11px;
font-weight: 700;
letter-spacing: 2px;
padding: 3px;
text-transform: uppercase;
}
.M14_formulaire_btn input[type="checkbox"]
{
height: 20px;
padding: 3px;

}

Penser a cliquer sur le bouton [PHPBB3]Afficher des commentaires sous forme de vignettes Sans_t10


Vous pouvez personnaliser les boutons "Editer" "Supprimer" avec ce style:
Code:

/*LES BOUTONS DU STAFF*/
.M14_recept_comment  img.i_icon_edit,
.M14_recept_comment  img.i_icon_delete
{
VOTRE CSS
}


Il manque l'essentiel le code html que vous allez déposer dans votre premier message (formulaire) :

Code:

<div class="M14_formulaire">
<span class="M14_formulaire_caractere">0</span><span class="M14_formulaire_caractere_info"></span>
<div class="M14_formulaire_Titre"> Laisser un commentaire <span class="M14_formulaire_affiche"></span></div><br />
<textarea id="M14_formulaire_Comment"></textarea><br>
<span class="M14_formulaire_btn"><input type="checkbox" name="M14_formulaire_Anonyme"> Poster en anonyme<input type="button" class="button2" id="M14_formulaire_Go" value="Envoyer" title="Envoyer le commentaire"></span><br />
<input type="hidden" id="M14_formulaire_Anonyme_hide" value="Anonyme"></div>
<div class="M14_recept_comment"></div>




Voila, c'est tout pour le moment  clin oeil .
Un soucis direction l'entraide hinhin
https://www.milouze14.com/f14-entraide-forumactif


Dernière édition par Milouze14 le Dim 15 Aoû 2021 - 11:40, édité 13 fois

photoclic aime ce message

Message n°20
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Jeu 1 Juil 2021 - 23:28

Bonjour,
Merci pour ce partage.

Milouze14 aime ce message

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

Sujets similaires internes ( 0 )
Aucun sujet

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à Milouzien ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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