Hoe maak je een tijdlijn met artikelen in Joomla?
Hoe maak je een tijdlijn in Joomla
Is het mogelijk om een tijdlijn te maken met alleen de Joomla-kern? Je weet waarschijnlijk het antwoord al: ja, met een kleine override en een paar regels CSS ;-).
In dit artikel leg ik uit hoe je dit kunt doen met de Artikelenmodule in Joomla. Zie het resultaat hier: Joomla Milestones 2005–2025.
Wat heb je nodig?
-
Een categorie, bijvoorbeeld Ons Verhaal
-
Artikelen voor de mijlpalen
Voor het voorbeeldbedrijf heb ik een categorie gemaakt met vijf artikelen. De titel van de artikelen is het jaartal gevolgd door de mijlpaal, bijvoorbeeld: 2015 – Bedrijf opgericht.
Module-override
Ik maak de tijdlijn met behulp van een Artikelenmodule. Om het heel eenvoudig te houden, heb ik een alternatief layout-bestand gemaakt met heel weinig code. Zoals eerder uitgelegd in andere artikelen: een alternatief layout is een kopie van een Joomla-kernbestand (in dit geval een kopie van de bestanden van de artikelenmodule) met een andere naam (timeline.php in plaats van default.php).
Deze kopie wordt in je template geplaatst en stelt je in staat om aanpassingen te doen die alleen gelden voor de module die dit nieuwe layout gebruikt, zonder dat alle andere modules worden beïnvloed.
Een override / alternatief layout kun je maken door een bestand op je computer te creëren en dit via FTP naar je website te uploaden, of door het direct in de backend aan te maken.
De artikelenmodule bestaat uit drie bestanden: , en . Voor de tijdlijn heb ik slechts één bestand toegevoegd: (het bestand wordt opgeslagen in ).
Voor de tijdlijn tonen we de titel, de introtekst en een afbeelding.
We maken de module aan en stellen de parameters juist in: kies de categorie en hoeveel artikelen getoond moeten worden, zet Introtekst op Weergeven en Introtekstlimiet op 0. Je kunt kiezen of je de Intro-afbeelding, de Volledige tekst-afbeelding of helemaal geen afbeelding wilt tonen. In de geavanceerde instellingen selecteer je het layout “timeline”. Je kunt de module tonen in een template-positie of hem inladen binnen een artikel dat is gekoppeld aan een menu-item.
CSS
Zonder CSS ziet de module er niet uit zoals we willen, dus voegen we enkele regels CSS toe in ons user.css-bestand (als je Cassiopeia niet gebruikt, moet je de CSS mogelijk in een ander bestand plaatsen).
/* Timeline */
#timeline {
position: relative;
width: 100%;
padding-inline: .5rem;
margin: 30px auto;
}
#timeline:before {
position: absolute;
top: 0;
left: 50%;
width: 3px;
height: 100%;
content: "";
background-color: #3D8F75;
}
#timeline:after {
display: table;
width: 100%;
clear: both;
content: "";
}
.timeline-item:after,
.timeline-item:before {
display: block;
width: 100%;
clear: both;
content: "";
}
.timeline-item {
position: relative;
margin-bottom: 50px;
}
.timeline-item .timeline-icon {
position: absolute;
top: 0;
left: 50%;
width: 26px;
height: 26px;
margin-left: -23px;
overflow: hidden;
background-color: #3D8F75;
border-radius: 50%;
border: 12px solid #fff;
padding: 12px;
}
.timeline-item .timeline-content {
width: 45%;
padding: .5rem;
background: #f4f4f4;
border-radius: var(--border-radius);
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}
.timeline-item .timeline-content h2 {
padding: .5rem;
margin: -.5rem -.5rem .5rem -.5rem;
font-size: 1.5rem;
color: #fff;
background-color: #3D8F75;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.timeline-item .timeline-content p {
margin-top: 1rem;
}
.timeline-item .timeline-content:before {
position: absolute;
top: 20px;
left: 45%;
width: 0;
height: 0;
content: "";
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #3D8F75;
}
.timeline-item:nth-child(even) .timeline-content {
float: right;
}
.timeline-item:nth-child(even) .timeline-content:before {
right: 45%;
left: inherit;
content: "";
border-right: 7px solid #3D8F75;
border-left: 0;
}
@media (max-width: 768px) {
#timeline {
width: 90%;
padding: 0;
margin: 30px;
}
#timeline:before {
left: 0;
}
.timeline-item .timeline-content {
float: right;
width: 90%;
}
.timeline-item .timeline-content:before,
.timeline-item:nth-child(even) .timeline-content:before {
left: 10%;
margin-left: -6px;
border-right: 7px solid #3D8F75;
border-left: 0;
}
.timeline-item .timeline-icon {
left: 0;
}
}Het resultaat is een stijlvolle tijdlijn met mijlpalen die afwisselend links en rechts van de middellijn verschijnen.
Nog een versie van de tijdlijn
Jaren geleden maakte ik een heel eenvoudige tijdlijn voor een klant. De titel van de artikelen bestond alleen uit het jaartal, dat vervolgens werd gebruikt als marker in de tijdlijn.
De tijdlijnen die ik in dit artikel heb laten zien, kunnen ook worden gemaakt met een categorieblog-layout.
Er bestaan veel inspirerende tijdlijnen, en de meeste daarvan kunnen eenvoudig in Joomla gemaakt worden – zonder dat je een extensie nodig hebt.
Veel plezier met het maken van je eigen tijdlijn!