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

[Coucoux]

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 !

[lomart]

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-surcharge-liste-des-categories

Encore merci d'avoir lancer le sujet

[Coucoux]

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

[dolmenhir]

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.

[lomart]

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.

<?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]) > 0 && $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

[Coucoux]

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.

[lomart]

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

Bonjour,

Si tu fais une règle pour tes div du genre :

    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

<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>

[Coucoux]

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...

[lomart]

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.

[Coucoux]

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

<?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)

/* 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







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