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

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

  • 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

  • Coucoux
    a répondu
    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 !

    Laisser un commentaire:


  • lomart
    a répondu
    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

    Laisser un commentaire:


  • Coucoux
    a répondu
    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

    Laisser un commentaire:


  • dolmenhir
    a répondu
    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.

    Laisser un commentaire:


  • lomart
    a répondu
    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

    Laisser un commentaire:


  • Coucoux
    a répondu
    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.

    Laisser un commentaire:


  • lomart
    a répondu
    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>

    Laisser un commentaire:


  • Coucoux
    a répondu
    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...

    Laisser un commentaire:


  • lomart
    a répondu
    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.

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