[PHPBB2] Afficher la liste des sujets en mode Grid

Salut à toutes et à tous,
voici une astuce permettant d'afficher la liste des sujets traditionnelle en mode Grid:

https://forum.forumactif.com/t410438-affichage-des-sujets-en-grid#3417470

---

L'astuce est optimisée avec l'affichage des avatars et de la participation au sujet,
Activer l'affichage des avatars:
Afficher les avatars dans la colonne "Derniers messages :
Affichage/Page d'acceuil/ Structure et hiérarchie/Hiérarchie


Afficher les avatars dans la colonne "Derniers messages" : Cocher = Oui


Gestion des images:

Affichage/Images et couleurs/Gestion des images/Mode avançé

Mini icônes

Recherchez cette ligne et assurez d'avoir une image à l'extéme droite:
Mini sujet - Participation :

---

Le script va rechercher si le sujet est une annonce ou une note et afficher ce ou cette dernière dans la deuxième cellule de la liste des sujets.
Ensuite, si il ne trouve rien il affichera simplement le texte "Sujet" comme le montre cette capture:



Si vous désirez modifier ce texte, il faudra trouver cette ligne dans le script et modifier le texte entre les doubles guillemets:

Code:

if(icon<1){icon="Sujet";}  

Les aperçus imagés:

La flèche vous montre l'endroit ou vous devrez cliquer pour afficher la liste des sujets:



Au clic sur cette ligne, vous aurez cet affichage et le mode Grid sera masqué




Vous pourrez personnaliser la css présente en haut du template pour l'affichage des titres des sujets, le reste devrait fonctionner les ami(e)s.


Allez, on se lance dans l'aventure ?


Dans le template topics_grid_box :
Affichage/Templates/
Général/topics_grid_box


Supprimez tout le contenu et remplacez par celui-ci:

Code:

 <style>
.M14_tr_none   a.topictitle
{
text-transform: uppercase;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
max-width:90%;
display:inline-block;
}
</style>

<table class="forumline M14_forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="7" align="center"><span class="M14_click">Afficher la liste des sujets</span><span class="M14_click_hide"style="display:none;">Masquer la liste des sujets</span></th>
</tr>
</table>
<table class="forumline M14_forumline_recept" width="100%" border="0" cellspacing="1" cellpadding="0"style="display:none;">
  <tr class="M14_hide_list">
    <th align="center" nowrap="nowrap"width="60%"> Sujets </th>
    <th align="center" nowrap="nowrap" width="6%"> Réponses </th>
    <th align="center" nowrap="nowrap" width="8%"> Auteur </th>
    <th align="center" nowrap="nowrap" width="6%"> Vues </th>
    <th align="center" nowrap="nowrap" width="20%"> Derniers Messages </th>
    
</tr>
</table>
<table class="test forumline"width="100%" border="0" cellspacing="1" cellpadding="0"style="display:none;"><tbody></tbody></table>
<!-- BEGIN topics_grid_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->

<table class="forumline grid-forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 
   <tr class="grid_forumheader">
      <th align="center" nowrap="nowrap"> {topics_grid_box.row.L_TITLE}</th>
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->

   <tr><td class="row2">
         <div class="grid-section">

            <!-- END header_table -->

            <!-- BEGIN header_row -->
            <tr class="grid_forumheader">
               <td class="row3 grid_gensmall_title"><span class="gensmall"> <strong>{topics_grid_box.row.L_TITLE}</strong></span></td>
            </tr>
            <!-- END header_row -->

            <!-- BEGIN topic -->
            <!-- BEGIN line_sticky -->
            <tr><td class="row3 sticky-separator"></td></tr>
               <tr><td class="row2">
               <div class="grid-section">
            <!-- END line_sticky -->
                     <!-- BEGIN table_sticky -->
                     <tr><th align="center" nowrap="nowrap">&nbsp;{topics_grid_box.row.topic.table_sticky.L_TITLE}</th></tr>
                     <tr><td class="row2">
                           <div class="grid-section">
                              <!-- END table_sticky -->
                              <div class="topic-card {topics_grid_box.row.ROW_ALT_CLASS}">
                                 <a href="{topics_grid_box.row.U_VIEW_TOPIC}">
                                    <div class="cover-image" style="--cover-image: url('{topics_grid_box.row.U_FB_IMAGE}');">
                                       <div class="posts-icon {topics_grid_box.row.FOLDER_CLASSNAME} {topics_grid_box.row.TOPIC_READ_STATUS}" style="background-image:url('{topics_grid_box.row.TOPIC_FOLDER_IMG}');" title="{topics_grid_box.row.L_TOPIC_FOLDER_ALT}"></div>
                                       <div class="stats">
                                        <span title="{L_VIEWS}" data-tooltip="{L_VIEWS}">
                                          <img src="{ILLIWEB_URL}icon-eye.svg"/> {topics_grid_box.row.VIEWS}
                              </span>
                                          <span title="{L_REPLIES}" data-tooltip="{L_REPLIES}">
                                                                                                                  <img src="{ILLIWEB_URL}icon-bubble.svg"/> {topics_grid_box.row.REPLIES}
                                    </span>
                        </div>
                        <div class="topic-type {topics_grid_box.row.FOLDER_CLASSNAME}">{topics_grid_box.row.TOPIC_TYPE}</div>
                        <div class="author-avatar" title="{topics_grid_box.row.L_CREATED_ON_BY}"> {topics_grid_box.row.TOPIC_AUTHOR_AVATAR} </div>
                     </div>
                  </a>
                  <div class="card-content">
                     <div class="M14_one">
                        <span class="participate-check">{topics_grid_box.row.PARTICIPATE_POST_IMG}</span>
                        <div class="topic-title-container">
                           <!-- BEGIN single_selection -->
                           <input type="radio" name="{topics_grid_box.FIELDNAME}" value="{topics_grid_box.row.FID}" {topics_grid_box.row.L_SELECT} />
                           <!-- END single_selection -->
                           <h2 class="topic-title hierarchy">
                              <a href="{topics_grid_box.row.U_VIEW_TOPIC}" class="topictitle"> {topics_grid_box.row.TOPIC_TITLE} </a>
                           </h2>
                        </div>
                     </div>
                     <div class="description"> {topics_grid_box.row.FIRST_POST_TEXT_110} </div>
                     <div class="card-footer">
                        <div class="avatar-footer">
                           <!-- BEGIN avatar -->
                           <span class="lastpost-avatar">{topics_grid_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                                                                  <!-- END avatar --> <span class="M14_grid_last_author">{topics_grid_box.row.LAST_POST_AUTHOR}</span> {topics_grid_box.row.NEWEST_POST_IMG}
                        </div>
                        <div class="time" title="{L_LASTPOST}">
                                                                  <i class="ion-android-time"></i>
                                                                  <span class="M14_grid_last_date">{topics_grid_box.row.LAST_POST_TIME}</span>
                                                                  <span class="M14_grid_last_img"> {topics_grid_box.row.LAST_POST_IMG}</span>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END topic -->
               <!-- BEGIN no_topics -->
               <tr>
                  <td>
                     <div class="posts-section posts-empty row1">
                        <strong>{topics_grid_box.row.L_NO_TOPICS}</strong>
                     </div>
                  </td>
               </tr>
               <!-- END no_topics -->



               <!-- BEGIN bottom -->
            </div></td></tr>
      <!-- END bottom -->

      <!-- BEGIN footer_table -->
</table>
<!-- END footer_table -->

<!-- BEGIN spacer -->
<br />
<!-- END spacer -->

<!-- END row -->
<!-- END topics_grid_box -->


Pensez a enregistrer puis à valider en cliquant respectivement sur puis

Voir cette page pour être certain d'avoir validé votre template:

https://www.milouze14.net/h2-diverses-aides



Ensuite le script qui fera le nécessaire pour l'importation:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript Créer un nouveau javascript
Mettre un titre explicite.

Cochez: Sur les sous-forums



Déposez ceci:

Code:


$(function(){
var grid=$('.forumline.grid-forumline').length;
if(!grid)return;
var open=$('.forumline.M14_forumline_recept,.test');
var recept=$('.test');
var grid=$('.forumline.grid-forumline');
$('.topic-card').each(function(){
var folder=$(this).find('.posts-icon').css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
var icon=$(this).find('.topic-type').text();
var link=$(this).find('.M14_one a[href^="/t"]').attr('href');  
var texte=$(this).find('.M14_one a[href^="/t"]').text();
var author=$(this).find('.author-avatar').attr('title');
var mots = author.split("par");
var result= mots[1];  
var vue=$(this).find('.stats span:eq(0)').text();
var reponse=$(this).find('.stats span:eq(1)').text();
var lastavatar=$(this).find('.card-footer .lastpost-avatar img').attr('src');
var lastdate=$(this).find('.card-footer .M14_grid_last_date').text();
var lastauthor=$(this).find('.card-footer .M14_grid_last_author').html();  
var lastimg=$(this).find('.card-footer .M14_grid_last_img').html();
var particip=$(this).find('.participate-check').html();
if(icon<1){icon="Sujet";}  
$('.test tbody').append('<tr class="M14_tr_none">
<td class="row1" align="center" valign="middle" width="3%"><img src="'+folder+'"/></td>
<td class="row2" align="center" valign="middle" width="3%"><span class="gensmall"><b>'+icon+'</b></span></td>
<td class="row2" width="54%"><div class="topictitle">'+particip+'<h2 class="topic-title"><a href="'+link+'"class="topictitle"title="'+texte+'">'+texte+'</a></h2></div></td>
<td class="row2" width="6%"align="center" valign="middle"><span class="postdetails">'+reponse+'</span></td>
<td class="row3" width="8%"align="center" valign="middle"><span class="name">'+result+'</span></td>
<td class="row2 " width="6%"align="center" valign="middle"><span class="postdetails">'+vue+'</span></td>
<td class="row3Right"width="20%"align="center" valign="middle" nowrap="nowrap"><div style="width: 200px;"></div><span class="lastpost-avatar"><img src="'+lastavatar+'"/></span><span class="postdetails">'+lastdate+'<br>'+lastauthor+''+lastimg+'</span></td>
</tr>');
            
              $('.M14_click').click(function(){
    $(this).hide();
    $('.M14_tr_none,.test').show();
    grid.hide();
    $(this).next().show();
    open.show();
  });
  $('.M14_click_hide').click(function(){
    $(this).hide();
       $('.M14_tr_none,.test').hide();
    grid.show();
    $(this).prev().show();
    open.hide();});
              

});
  
  
  
});


Penses à cliquer sur le bouton Valider








Et voilou les ami(e)s  

hello

merci Phil pour cette astuce 

Merci Phil 
j'aimerais comprendre un peu plus , pour 2025 
j'aimerais que le forum est un autre rendu . 
donc je cherche 
pourrais tu m'aider 
merci

@Chéryl ,
dans les forums ou sont présents des tutoriels ,
je n'apporte pas d'aide Cheryl car ce n'est pas le but .

Par contre comme ta demande est assez vague , tu peux poster ici:

https://www.milouze14.net/f21-aides-bugs-suggestions-donations#A

@fred9545,
Fred ,

je viens de modifier le script afin d'ajouter la participation et un texte en remplacement si le sujet n'est pas une annonce ou une note  

https://www.milouze14.net/t33247-phpbb2-afficher-la-liste-des-sujets-en-mode-grid#634529