Créer une liste de catégories Joomla avec images + titre

Un créateur de site a demandé récemment sur un groupe d’entraide Joomla :

Une petite question bête.
Soit une liste de catégories d'articles, ayant chacune des articles ou non.

 

Qui saurait lister les sous catégories d'une rubrique, de manière automatique (qu'elle se rajoute si je rajoute une rubrique dans la longue hiérarchie), mais en les affichant sous la forme d'images avec le nom de la rubrique affichée ? (<div style="float:left;"><img src="/...">NOM DE LA CATEGORIE</div>) En effet, il n'y a pas de module permettant de le faire (ou n'ai-je rien vu ? pourtant j'ai cherché...)

 


Et il nous donne un exemple :
exemple facebook
Nous allons tenter de relever ce défi avec juste l’outil dont on dispose : Joomla !

Première étape : créer les catégories avec images


Il nous faut minimum :
• Une catégorie parente
• 6 sous-catégories enfants publiées avec une image
On assigne la sous-catégorie à la catégorie parente

cat parente
On lui attribue une image

image categorie

Et il faut répéter l’opération 6 fois pour des raisons d’exemples … et les publier.
Nous obtenons ceci :

catagories
étape 2 : créer un lien de menu et le paramêtrer


Il nous faut créer un nouveau lien de menu de type « liste de toutes les catégories » qui affichera les catégories enfants de la catégorie parente :
cat parente
Pour le paramétrage il nous faut :
• Afficher les catégories même vides
• Ne pas afficher le nombre d’articlesparams categories


Afficher les images des catégories si ce n’est pas déjà fait dans les options de joomla

params categorie

 


Nous obtenons la liste de catégories avec les images :

affichage sanscss

Il ne nous reste plus qu’à mettre en forme.

Etape 3 : mettre en forme grâce aux css

Pour cette partie on peut appliquer les css à l’ensemble du site pour un uniformisation, ou alors uniquement au lien de menu en utilisant une classe css de page pour cibler ce contenu.
L’idée est de modifier l’ordre des éléments en utilisant la propriété order qui fonctionne en mode grid

 

.categories-list div {
    width: 30%; /*chaque bloc prend 30%*/
    float: left;/*chaque bloc se positionne à gauche là ou il peut*/
    padding: 5px;
    margin: 5px;
    box-sizing: border-box;
    border: grey 1px solid;
    border-radius: 5px;
    display: grid;/*propriété grid de manière à utiliser order*/
}
/*on dit à l'image de se positionner en premier*/
.categories-list img {
    order: 1; 
}
/*on dit au titre h3 de se positionner en second*/
.categories-list h3 {
    order: 2;
    text-align: center;
    margin: 5px;
}

 

 

Et voici le nouvel affichage :

categorie aveccss

Evidemment, tout cela se peaufine, en utilisant soit des mediaqueries, soit des classes bootstrap pour le responsive :

mais l’idée est là : Créer, Afficher les éléments, les Mettre en Page.

Personnalisation selon template ou version : 

Maintenant que vous avez saisi la phylosophie de l'opération, vous avez peut être essayé sur votre site (de test, bien sûr) et constaté que cela ne fonctionne pas comme sur l'exemple.
Chaque template surcharge un peu le composant com_content, et la structure n'est pas forcément la même.
Étudiez le code, observez le bien pour comprendre quel est l'élément à cibler avec vos propritétés CSS et adaptez!

Ainsi, pour Cassiopéa dans Joomla4, le code CSS sera celui ci : 

 

.categories-list div div {
width: 30%;
float: left;
padding: 5px;
margin: 5px;
box-sizing: border-box;
border: grey 1px solid;
border-radius: 5px;
display: grid;
}

.categories-list img {
order: 1;
}

.categories-list h3 {
order: 2;
text-align: center;
margin: 5px;
}

categorie joomla4