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.
    Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
    ---
    UP, un plugin "couteau suisse" à 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>
        Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
        ---
        UP, un plugin "couteau suisse" à 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
            Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
            ---
            UP, un plugin "couteau suisse" à 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.
              C'est en forgeant qu'on devient forgeron. Mais c'est pas en coupant du bois que Léonard de Vinci...” (extrait du "Da Vinci Code de l'artisanat")
              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
                  http://lomart.fr/trucs-et-astuces/63...des-categories

                  Encore merci d'avoir lancer le sujet
                  Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                  ---
                  UP, un plugin "couteau suisse" à 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
                    1 sur 2 < >

                    C'est [Réglé] et on n'en parle plus ?

                    A quoi ça sert ?
                    La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                    Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                    Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                    Comment ajouter la mention [Réglé] à votre discussion ?
                    1 - Aller sur votre discussion et éditer votre premier message :


                    2 - Cliquer sur la liste déroulante Préfixe.

                    3 - Choisir le préfixe [Réglé].


                    4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                    2 sur 2 < >

                    Assistance au forum - Outil de publication d'infos de votre site

                    Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                    Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                    Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                    UTILISER À VOS PROPRES RISQUES :
                    L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                    Problèmes connus :
                    FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                    Installation :

                    1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                    Archive zip : https://github.com/AFUJ/FPA/zipball/master

                    2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                    3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                    4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                    5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                    6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                    et remplacer www. votresite .com par votre nom de domaine


                    Exemples:
                    Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/
                    Pour executer le script: http://www..com/fpa-fr.php

                    Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                    Télécharger le script fpa-fr.php dans: /public_html/cms/
                    Pour executer le script: http://www..com/cms/fpa-fr.php

                    En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                    Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                    Voir plus
                    Voir moins

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X