Une timeline est un très bon moyen pour mettre en lumière et dans un ordre précis, les événements marquants d'une entreprise, vos réussites, etc. Dans ce tutoriel, je vais vous montrer comment créer et afficher une timeline verticale et responsive en n'utilisant que Joomla.
J'avais déjà créé une timeline verticale avec Joomla mais je voulais l'améliorer avec un nouveau design (merci à Ondrej de Bootstrapious) et aussi, vous montrer et vous expliquer en details comment créer ce genre de fonctionnalités avec Joomla en partant de (presque) zéro.
La structure HTML de notre timeline verticale responsive
Basiquement, une timeline n'est rien d'autre qu'une liste d'événements. Donc, nous allons utiliser les balises <ul> et <li> pour créer et afficher les éléments de notre timeline.
Pour chaque élément, nous afficherons:
- Le titre
- La date
- Un texte
Commençons par coder la structure d'un élément.
<li class="p-4">
<!-- titre -->
<h2>Titre de l'item 1</h2>
<!-- Date -->
<span><i class="fa fa-clock-o mr-1"></i>Date de l'item 1</span>
<!-- Texte -->
<p>Texte de l'item 1</p>
</li>Explications
J'ai ajouté la classe Bootstrap p-4 à la balise <li> pour avoir un large padding autour du contenu.
La date est identifiée par une icône Font Awesome. J'ai ajouté ici une classe Bootstrap mr-1 (margin-right) pour avoir un espace entre l'icône et la date.
Cette structure sera utilisée pour chaque élément de notre timeline. timeline verticale responsive
Bon d'accord, le rendu en frontend est pour l'instant vraiment très basique et maintenant, nous allons ajouter quelques classes CSS et Bootstrap pour styliser nos items et notre timeline.
On commence avec le titre.
Classes Bootstrap appliquées à la balise titre: h5 mb-0.
Avec ceci, j'ai réduit la taille du title et supprimé la marge (margin-bottom) qui est appliqué à la balise de titre H2.
Passons maintenant à la date.
Classe Bootstrap appliquée au span date: small.
Classe CSS appliquée au span date: text-gray.
J'ai réduis la taille de la police et créé une nouvelle classe CSS pour changer la couleur de la date et de l'icône.
Stylisons le texte. timeline verticale responsive
Classes Bootstrap appliquées au paragraphe texte: text-small mt-2 font-weight-light.
J'ai réduis la taille de la police, éclairci la couleur et ajouté une marge au dessus du paragraphe.
Terminons avec notre élément liste
Classes Bootstrap appliquées à l'élément <li>: bg-white rounded ml-3 p-4 shadow.
Classe CSS appliquée à l'élément <li>: timeline-item.
Parce que ma timeline sera affichée sur un fond coloré, je l'ai stylisé pour un meilleur rendu final. La seule classe Bootstrap vraiment importante ici est ml-3 qui appliquera une marge à gauche de chaque item. Le contenu de la classe CSS timeline-item sera détaillé et expliqué plus loin.
Voici la structure HTML des items de notre timeline.
<li class="timeline-item bg-white rounded ml-3 p-4 shadow">
<h2 class="h5 mb-0">Titre de l'item 1</h2>
<span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>Date de l'item 1</span>
<p class="text-small mt-2 font-weight-light">texte de l'item 1</p>
</li>Emballons tout cela dans notre élément <ul> et ajoutons nos classes CSS pour créer et mettre en forme notre timeline verticale.
Tout d'abord, nous devons nous assurer que notre élément <ul> n'aura aucun style (suppression des puces). Ensuite, nous le positionnons et nous lui appliquons un padding à gauche.
ul.timeline {
list-style-type: none;
position: relative;
padding-left: 1.5rem;
}Parce que c'est une timeline verticale, nous avons besoin d'afficher une ligne verticale le long de laquelle chaquel élément viendra s'afficher les uns en dessous des autres. Cette ligne verticale est affichée en blanc (#fff) avec une largeur de 4 pixels (4px) et sur une hauteur de 100% (c'est à dire, tant qu'il y aura des éléments dans la timeline, la ligne verticale sera affichée). J'ai aussi ajouté un border-radius pour arondir le haut et le bas de cette ligne verticale.
ul.timeline:before {
content: ' ';
background: #fff;
display: inline-block;
position: absolute;
left: 16px;
width: 4px;
height: 100%;
z-index: 400;
border-radius: 1rem;
}Pour un affichage plus agréable, j'ai ajouté une marge de 20 pixels au dessus et en dessous de chaque item de notre timeline. timeline verticale responsive
li.timeline-item {
margin: 20px 0;
}Maintenant, nous allons ajouter un marqueur en pure CSS sur la ligne verticale en face de chaque item de notre timeline. Ce marqueur sera affiché en gris (#ddd) sous la forme d'un point (border-radius: 50%) avec une bordure blanche de 3 pixels (border: 3px solid #fff;).
li.timeline-item::before {
content: ' ';
background: #ddd;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #fff;
left: 11px;
width: 14px;
height: 14px;
z-index: 400;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}Enfin, il ne reste plus qu'à créer et afficher un carret à gauche de chaque item qui pointe en direction des marqueurs positionnés sur la ligne verticale.
.timeline-carret {
border-top: 0.5rem solid transparent;
border-right: 0.5rem solid #fff;
border-bottom: 0.5rem solid transparent;
display: block;
position: absolute;
left: 2rem;
}Pour afficher ce carret, on ajoute une ligne supplémentaire à la struture de notre item.
<li class="timeline-item bg-white rounded ml-3 p-4 shadow">
<!-- Le carret est ajouté ici-->
<div class="timeline-carret"></div>
<h2 class="h5 mb-0">Titre de l'item 1</h2>
<span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>Date de l'item 1</span>
<p class="text-small mt-2 font-weight-light">Texte de l'item 1</p>
</li>Et voici maintenant la totalité des classes CSS nécessaires pour afficher notre timeline. timeline verticale responsive
/* Vertical timeline */
ul.timeline {
list-style-type: none;
position: relative;
padding-left: 1.5rem;
}
/* Timeline vertical line */
ul.timeline:before {
content: ' ';
background: #fff;
display: inline-block;
position: absolute;
left: 16px;
width: 4px;
height: 100%;
z-index: 400;
border-radius: 1rem;
}
li.timeline-item {
margin: 20px 0;
}
/* Timeline carret */
.timeline-carret {
border-top: 0.5rem solid transparent;
border-right: 0.5rem solid #fff;
border-bottom: 0.5rem solid transparent;
display: block;
position: absolute;
left: 2rem;
}
/* Timeline item grey spot */
li.timeline-item::before {
content: ' ';
background: #ddd;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #fff;
left: 11px;
width: 14px;
height: 14px;
z-index: 400;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}Copiez / collez ces classes CSS dans le fichier custom.css de votre template Joomla.
Le contenu dans Joomla
Pour que cette timeline soit la plus simple possible à gérer, je vous recommande de créer une nouvelle catégorie d'articles (nommez la Timeline, par exemple) et ajoutez-y, les articles qui composeront les éléments de la timeline.
En faisant ainsi, vous pourrez gérer cette partie de votre site en un clin d'oeil.
Donc, chaque article de cette catégorie sera un élément de notre timeline. Dasn ce cas, vous n'avez besoin que d'indiquer le titre et un court texte d'introduction dans vos articles. Cela ne peut pas être plus simple.
Pour la date, vous pouvez utiliser les champs Publication ou Creation dans l'onglet Publication de l'article pour indiquer la date de votre choix.
L'override
Il est l'heure de créer notre override dans Joomla mais pas de panique, c'est vraiment simple.
Résumons. Nous devons afficher des articles d'une catégorie. Notre meilleure options dans ce cas est d'utiliser le module natif de Joomla mod_articles_category et de lui appliquer une override.
Si vous n'avez jamais pratiqué d'overrides jusqu'à aujourd'hui, ce n'est pas grâve mais je vous recommande très fortement de commencer par lire le tutoriel Apprendre à créer des overrides dans Joomla où toutes les étapes de l'override sont clairement expliquées en detail. Croyez-moi, vous gagnerez du temps et vous économiserez vos cheveux ;)
Sinon, voici le code de cette override :
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="row">
<div class="col-lg-7 mx-auto">
<ul class="timeline category-module<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<li class="timeline-item bg-white rounded ml-3 p-4 shadow">
<div class="timeline-carret"></div>
<!-- titre de l'élément de la timeline -->
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><h2 class="h5 mb-0"><?php echo $item->title; ?></h2></a>
<?php else : ?>
<h2 class="h5 mb-0"><?php echo $item->title; ?></h2>
<?php endif; ?>
<!-- Date de l'élément de la timeline -->
<?php if ($item->displayDate) : ?>
<span class="small text-gray mod-articles-category-date">
<i class="fa fa-clock-o mr-1"></i> <?php echo $item->displayDate; ?>
</span>
<?php endif; ?>
<!-- Texte de l'élément de la timeline -->
<?php if ($params->get('show_introtext')) : ?>
<p class="text-small mt-2 font-weight-light mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>Copiez / collez la totalité de ce code dans le nouveau fichier PhP que vous aurez créé dans votre template Joomla et vous aurez terminé cette partie.
Le module
la dernière étape est plutôt simple parce que vous devez juste créer un nouveau module Articles Categorie et de le paramétrer selon vos besoins (assignation à la page, position du template, choisir la bonne catégorie, définir l'ordre d'affichage des éléments, etc. J'imagine que vous n'avez pas besoin d'explications de ma part ici.
Le seul point important ici est de veiller à bien appliquer l'override que vous avez créé en la choisissant dans le paramètre Type de mise en page dans l'onglet Paramètres avancés. Et c'est tout !
L'affichage en live
Conclusion
Naturellement, vous pouvez recopier intégralement ces lignes de code si vous voulez afficher la même timeline verticale responsive mais vous pouvez aussi modifier la structure et les CSS si vous le désirez.
N'hésitez pas à commenter ci-dessous si vous avez des remarques et des questions et à partager ce tutoriel à vos ami.es sur vos réseaux sociaux. Merci par avance.
