Liste de catégories sexy

J'ai répondu sur le forum.joomla.fr à plusieurs messages qui évoquaient la mise en page des listes de catégories du Joomla! de base afin de la rendre plus sexy.

Ces discussions m'ont incité à refaire la liste des catégories d'extensions de ce site.

Dans cet article, je vais expliquer et proposer plusieurs surcharges du fichier components/com_content/views/categories/tmpl/default_items.php pour s'adapter aux différents cas.

  1. utilisable directement dans Joomla. Il suffit d'indiquer dans les paramètres du menu le nombre de colonnes désirées
  2. une variante pour les cas de conflit lors de l'utilisation du paramètre nombre de colonnes. Il faut indiquer un suffixe de classe dans le menu : catcol-1, catcol-2, catcol3, catcol-4
  3. La version mise en œuvre sur ce site qui utilise le module LM-Masonry. Comme vous pouvez le constater, elle permet d'avoir des blocs de différentes hauteurs qui s'imbriquent les uns dans les autres et en cas de redimensionnement de la fenêtre, ils se replacent avec grâce.
Comparaison bootstrap2 bootstrap3

Pour être responsive, il est impossible d'utiliser une structure qui affiche les blocs dans des lignes. Il est impératif que les blocs enfants passent à la ligne lorsque la largeur d'affichage est réduite. Cela doit être fait du côté client, donc c'est un boulot pour CSS ou JS.

Les 2 premières solutions utilisent un CSS spécifique car Bootstrap 2 ne permet d'avoir des blocs spanX qui se placent "logiquement' à la ligne. Un léger mieux pour Bootstrap 3, mais ce n'est pas encore ça.

Le montage de copies d'écran montre le même code HTML dans les 3 cas

❶ - Nombre de colonnes selon paramètre "Nombre de colonnes"

Installation

Télécharger le fichier ci-dessous, puis dézipper son contenu dans le dossier html de votre template. La structure des sous-dossiers sera créée si nécessaire.

Configuration

parametre nombre de colonnes

Créer un menu Articles / Liste de catégories.

En dehors des habituels réglages, vous devez définir le nombre de colonnes à l'aide du paramètre "nombre de colonnes" de l'onglet "affichage du blog" des paramètres du menu.

Personnalisation

Pour faciliter l'installation, j'ai programmé la création des règles CSS en inline dans le head de la page. Il peut être judicieux de les déplacer dans votre fichier CSS habituel.

Les réglages CSS que vous pourriez être amené à réaliser sont :

  • largeur de rupture dans les règles @media. Indiquer des valeurs en accord avec votre template.
    Pour la vue smartphone, les blocs font 100% de la largeur.
    Pour la vue intermédiaire, une vue en 3 ou 4 colonnes passera en 2 colonnes et une vue 2 colonnes en 1 seule.
  • .catitem-inner est la règle idéale pour régler l'espacement entre les blocs, ajouter une bordure, …

Attention

Le paramètre nombre de colonnes est également utilisé lorsque vous cliquez sur l'un des liens de la catégorie de la première page ou des suivantes. Cela veut dire qu'il y aura un nombre de colonnes identiques dans les 2 cas.

❷ - Nombre de colonnes selon paramètre "Classe de page"

La seule différence avec la version précédente est le mode de réglage du nombre de colonnes.

Ce mode permet d'avoir un nombre de colonnes différent entre la liste de catégories et les pages suivantes.

Installation

Télécharger le fichier ci-dessous, puis dézipper son contenu dans le dossier html de votre template. La structure des sous-dossiers sera créée si nécessaire.

Configuration

parametre classe

Créer un menu Articles / Liste de catégories.

En dehors des habituels réglages, vous devez définir le nombre de colonnes à l'aide du paramètre "Classe de page" de l'onglet "Paramètres d'affichage de la page" des paramètres du menu.

❸ - Nombre de colonnes et déplacement par "LM-Masonry"

Cette méthode utilise le module LM-Masonry qui permet :

  • une imbrication des blocs catégories pour éviter les espaces verticaux
  • une modification du nombre de colonnes selon la largeur du site
  • un déplacement "très visuel" des blocs

Le meilleur moyen de se rendre est de le tester en situation sur ce site

Installation

Télécharger le fichier ci-dessous, puis dézipper son contenu dans le dossier html de votre template. La structure des sous-dossiers sera créée si nécessaire.

Télécharger le module LM-Masonry sur cette page. L'installation est faite de façon classique sous Joomla!

Configuration

Créer un menu Articles / Liste de catégories. En dehors de la catégorie parente, aucun réglage n'est nécessaire.

Dans la liste des modules, sélectionnez ou créez un module LM-Masonry.

configuration LM-Masonry - partie 1
configuration LM-Masonry - partie 2
  • Publiez-le en position debug. Toute position en fin de template peut convenir.
  • Assigner le module à tous les menus ou uniquement aux menus concernés
  • Conserver les noms #masonry et .item pour les blocs
  • Ajouter un padding bloc enfant de 5 ou plus selon vos goûts
  • L'attente pour chargement images sur OUI, si vous avez des images
  • Indiquer la largeur du conteneur parent sur grand écran
  • Configurer les points de rupture pour le responsive selon les indications fournies
  • Ajouter des règles CSS pour personnaliser le rendu si besoin.
    La classe item-inner se prête bien à l'ajout d'une bordure, un réglage de padding

 

  ci-contre, les réglages utilisés sur ce site


J'en ai fini avec les différentes façons de rendre la présentation des catégories plus attirantes.

Si vous avez des commentaires, des suggestions ou des critiques, j'ai ouvert une section "Surcharges Joomla" sur mon forum.

Merci à Coucoux dont le post sur le forum Joomla! a été le déclencheur et à Casper17 et son post qui a relancé le sujet et fournit le titre mon article.

Print Friendly and PDF