Affichage d'une liste de catégories en 2 colonnes

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Suggestion] Affichage d'une liste de catégories en 2 colonnes

    Bonjour,

    je viens vers vous pour vous faire partager une mise en page qui marche sur mon site et qui peut intéresser certains, c'est à dire afficher une liste de catégories en 2 colonnes.

    Je me suis basée sur cette info donnée pour joomla 2.5 ainsi qu'une autre info dont j'ai perdu le lien mais qui n'ont pas fonctionné pour moi car le code et le chemin (components/com_content/views/categories/tmpl/default_items.php) n'étaient pas bons.

    Je suis sous Joomla 3.4.8 récemment migré en 3.5.1 avec un Template T3_Blank.

    Donc, voici ce que j'ai fait :

    1) dans components/com_content/views/categories/tmpl/, copier les fichiers default.php et default_items.php

    2) dans templates/t3_blank/html/ créer un dossier com_content/categories et y coller les fichiers default.php et default_items.php
    On a maintenant les chemins templates/t3_blank/html/com_content/categories/default.php et templates/t3_blank/html/com_content/categories/default_items.php

    3) le fichier default.php ne change pas

    4) effacer le contenu de default_item.php et y coller celui-ci

    Code HTML:
    <?php
    /**
     * @package     Joomla.Site
     * @subpackage  com_content
     *
     * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
     * @license     GNU General Public License version 2 or later; see LICENSE.txt
     */
    
    defined('_JEXEC') or die;
    
    JHtml::_('bootstrap.tooltip');
    
    $class = ' class="first"';
    $lang  = JFactory::getLanguage();
    
    $compteur = 0;
    if (count($this->items[$this->parent->id]) > 0 && $this->maxLevelcat != 0) :
    ?>
        <table class="deuxcol">
            <tr class="unecolonne">
            <?php foreach($this->items[$this->parent->id] as $id => $item) : ?>
                <?php
                    if ($this->params->get('show_empty_categories_cat') || $item->numitems || count($item->getChildren())) :
                    if (!isset($this->items[$this->parent->id][$id + 1]))
                    {
                    $class = ' class="last"';
                    }
                    {
                    $compteur++;
                    }
                    ?>
                        <td class="deuxcolonne">
                        <?php $class = ''; ?>
                                    <h3 class="page-header item-title">
                                        <a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
                                        <?php echo $this->escape($item->title); ?></a>
                                    </h3>
                                    <?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
                                    <img src="<?php echo $item->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($item->getParams()->get('image_alt')); ?>" />
                                    <?php endif; ?>
                                    <?php if ($this->params->get('show_subcat_desc_cat') == 1) :?>
                                        <?php if ($item->description) : ?>
                                            <div class="category-desc">
                                            <?php echo JHtml::_('content.prepare', $item->description, '', 'com_content.categories'); ?>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                        </td>    
                        <?php if($compteur%2 == 0) echo " </tr><tr>"; ?>
                        <?php endif; ?>
            <?php endforeach; ?>
            </tr>
        </table>
    <?php endif; ?>
    5) Comme vous pouvez le lire, j'ai créé de nouvelles classes que j'ai ensuite paramétré dans mon custom.css (templates/t3_blank/css/custom.css)

    Code:
    /* liste de catégories en 2 colonnes */
    
    table.deuxcol {
    width: 900px;
    height: auto;
    margin-top: 50px;
    }
    
    tr.unecolonne {
    width: 900px;
    height: auto;
    margin-bottom: 20px;
    }
    
    td.deuxcolonne {
    width: 450px;
    height: auto;
    }
    Et ça fonctionne

    Cliquez sur l'image pour l'afficher en taille normale

Nom : 2cols1.jpg 
Affichages : 1 
Taille : 10,9 Ko 
ID : 1824160

    Cliquez sur l'image pour l'afficher en taille normale

Nom : 2cols2.jpg 
Affichages : 1 
Taille : 40,1 Ko 
ID : 1824161

    Cliquez sur l'image pour l'afficher en taille normale

Nom : 2cols3.jpg 
Affichages : 1 
Taille : 64,1 Ko 
ID : 1824162

    Les photos et les textes sous le nom de chaque catégories sont des contenus de description de la catégorie. Pour les afficher, lorsque je paramètre le menu en liste de catégories, je sélectionne "afficher" la description de la catégorie.

    Voilà

    Bonne journée à tous

  • #2
    Re : Affichage d'une liste de catégories en 2 colonnes

    Bonsoir,

    Merci pour ton partage.
    Une suggestion, pour être responsive, mettre des div plutôt qu'un tableau.
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Re : Affichage d'une liste de catégories en 2 colonnes

      Bonjour,

      j'ai essayé de mettre des div plutôt qu'un tableau mais ça ne fonctionne pas. Les catégories s'affichent toujours les unes en dessous des autres.

      Je ne maîtrise pas suffisamment le html pour trouver la solution. Je pense que ça coince au niveau de <?php if($compteur%2 == 0) echo " </tr><tr>"; ?> lorsqu'on le remplace par des div.

      Si quelqu'un a une suggestion, je suis preneuse...

      Commentaire


      • #4
        Re : Affichage d'une liste de catégories en 2 colonnes

        Bonjour,

        Si tu fais une règle pour tes div du genre :
        Code:
            div.col2 > div {
                border:green 1px solid;
                width:49%;  /* a ajuster en fonction des margin et padding */
                float:left;
            }
            @media (max-width:600px) {
                div.col2 > div {width:auto;}
            }
        Ensuite, tu n'as même plus à gérer de compteur.
        Le fait de mettre la classe au conteneur parent fait que si tu veux 3 colonnes ailleurs, il suffit de changer la classe une seule fois
        Exemple non testé : tu mets une classe pour la page dans le menu du genre : cols2, cols3, col4
        tu peux sans modifier le code de l'overlay créer des classes .cols2 div.colX > div
        La structure HTML serait
        Code:
        <div class="col2">  <!-- le bloc de la page -->
          <div class="colX">
                   <div> cat 1 </div>
                   <div> cat x </div>
                   <div> cat n </div>
             </div>
        </div>
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Re : Affichage d'une liste de catégories en 2 colonnes

          Bonjour,

          désolée de répondre si tard, je m'active pour mettre mon site en ligne.

          Je vais travailler sur ta suggestion. Je ne comprends pas tout pour l'instant mais je vais creuser le sujet dès que j'ai un peu plus de temps.

          Merci.

          Commentaire


          • #6
            Re : Affichage d'une liste de catégories en 2 colonnes

            Bonjour,

            Je viens d'adapter ton code avec ma suggestion.
            Je récupère le paramètre "nombre de colonnes" dans l'onglet "affichage du blog" des paramètres du menu pour changer le nombre de colonnes.

            Code PHP:
            <?php
            /**
             * @package     Joomla.Site
             * @subpackage  com_content
             *
             * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
             * @license     GNU General Public License version 2 or later; see LICENSE.txt
             */

            defined('_JEXEC') or die;

            JHtml::_('bootstrap.tooltip');

            $class ' class="first"';
            $lang  JFactory::getLanguage();

            /**** Pour les tests - a mettre ensuite dans les CSS */
            $doc JFactory::getDocument();
            $doc->addStyleDeclaration('
            [class^="catcol-"] > div {
                border:green 1px solid;
                float:left;
            }
            .catcol-1 > div { width:99%; }
            .catcol-2 > div { width:49%; }
            .catcol-3 > div { width:32%; }
            .catcol-4 > div { width:24%; }

            @media (max-width:600px) {
                div.[class^="catcol-"] > div {width:100%;}
            }
            '
            );
            /**** fin css ***************/

            if (count($this->items[$this->parent->id]) > && $this->maxLevelcat != 0) :
            ?>
                <div id="mansonry" class="catcol-<?php echo $this->params['num_columns']; ?>">
                    <?php foreach($this->items[$this->parent->id] as $id => $item) : ?>
                        <div class="onecat">
                            <h3 class="page-header item-title">
                                <a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
                                <?php echo $this->escape($item->title); ?></a>
                            </h3>
                            <?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
                            <img src="<?php echo $item->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($item->getParams()->get('image_alt')); ?>" />
                            <?php endif; ?>
                            <?php if ($this->params->get('show_subcat_desc_cat') == 1) :?>
                                <?php if ($item->description) : ?>
                                    <div class="category-desc">
                                    <?php echo JHtml::_('content.prepare'$item->description'''com_content.categories'); ?>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>    
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
            J'ai ajouté id="mansonry" au bloc conteneur si tu veux utiliser mon plugin Mansonry (http://lomart.fr/extensions/lm-masonry) pour imbriquer des blocs de hauteurs variables. La classe enfant étant .onecat

            Bonne journée
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


            • #7
              Re : Affichage d'une liste de catégories en 2 colonnes

              Slt,

              En se servant des CSS de bootstrap (T3 utilise bootstrap 3), il suffit de donner la class "col-md-6" aux div pour qu'elles occupent 50% de la largeur disponible... et donc passage systématique à la ligne suivante toutes les 3 div...

              Dol.
              Je préfère éclairer que briller.” - “J'ai peut-être l'air froid, mais je suis pas givré.- "ça dépend ça dépasse"
              Ne m'envoyez pas de message privé pour résoudre vos problèmes sans y avoir été invité.
              Dolmenhir : tailleur de site web depuis 1997. Spécialiste Joomla depuis 2005. https://www.dolmenhir.fr

              Commentaire


              • #8
                Re : Affichage d'une liste de catégories en 2 colonnes

                Merci pour toutes ces suggestions. Je me penche dessus dès que j'aurais un peu plus de temps.

                Bonne journée

                Commentaire


                • #9
                  Re : Affichage d'une liste de catégories en 2 colonnes

                  @ Coucoux

                  J'ai fait une synthèse des surcharges possibles pour obtenir la liste des catégories sur plusieurs colonnes en responsive
                  Pour avoir des listes de catégories plus jolies, une simple surcharge (override) de Joomla suffit


                  Encore merci d'avoir lancer le sujet
                  UP, le plugin universel à découvrir sur https//up.lomart.fr
                  bgMax
                  , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                  Commentaire


                  • #10
                    Re : Affichage d'une liste de catégories en 2 colonnes

                    Bonsoir !

                    Je viens d'appliquer ton code (le premier) sur mon site et ça marche nickel !

                    Bon, avis aux futures utilisateurs, j'ai dû aller dans chaque menu (j'ai des menus en listes de catégories dans des menus en listes de catégories) pour spécifier à chaque fois si je voulais 2 colonnes ou si je laissais vide pour afficher sur toute la largeur de la page, car, vu que j'ai des menus en listes de catégories dans des menus en listes de catégories, l'application du changement de colonnes au menu supérieur n'affecte pas les menus inférieurs (j'espère que vous me suivez dans tous ces menus !.

                    Sinon, je trouve ton code vraiment très pratique !

                    Merci beaucoup !!!

                    C'est vraiment génial d'avoir des échanges aussi constructifs !

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X