Kan dat ook met Joomla?
Dit artikel gaat over hoe ik een Joomla-functie (her)ontdekte, nadat ik inspiratie kreeg van een website die ik tegenkwam.
Onlangs kwam ik een mooie website tegen over carrièremogelijkheden na school (ik deed wat onderzoek voor mijn kinderen).
Eén sectie toonde verschillende "teaserartikelen" (zoals kaarten/cards) met een icoon, een titel, een introtekst en — wat ik erg gaaf vond — telkens een knop met een individuele tekst, dus niet het saaie “lees meer”. Meteen dacht ik: “Hoe kan ik dit maken op een Joomla-website?”
Optie 1: Een eigen module ontwikkelen?
Mogelijk, maar omslachtig.
Optie 2: Aangepaste modules maken, elk met een link naar een artikel?
Mogelijk, maar onnodig ingewikkeld.
Optie 3: De Artikelenmodule gebruiken met een saaie “lees meer”-knop…
Wacht eens, er is een “verborgen” optie in artikelen die we hiervoor kunnen gebruiken om onze teasers aantrekkelijker te maken! Het is niet echt verborgen en bestaat al jaren, maar ik kan me niet herinneren dat ik deze functie ooit heb gebruikt. Dit is precies wat we nodig hebben. Laten we het stap voor stap bekijken.
Dit is wat we willen maken:
Schermafbeelding van drie artikelen als teasers
Herinner je je de demo-website uit mijn vorige artikel nog? “The Cake Factory” krijgt een nieuwe sectie met informatie over de mensen, banen en hoe je contact kunt opnemen.
Ik heb drie artikelen gemaakt en een Artikelenmodule om ze onderaan de pagina weer te geven. Je kunt alle drie de artikelen in één categorie plaatsen of ze individueel selecteren in de module:
Schermafbeelding van de module-opties
Een klein beetje CSS en ta-da!
Schermafbeelding van de artikelen met "saaie" lees-meer-knop
Saaie “lees meer”-knoppen…
Nu gaan we terug naar het artikel, naar het tabblad “Opties”:
Schermafbeelding van het tabblad Opties in artikelen
Schermafbeelding van de artikelopties, in het bijzonder de parameter Lees meer-tekst
En daar staat onze parameter: “Lees meer-tekst”. Je kunt voor elk artikel een individuele lees-meer-tekst invoeren!
Nu is onze teasersectie perfect!
Schermafbeelding van drie artikelen als teasers
De CSS die ik gebruikte (de module heeft de klasse “teaser” en ik gebruik Cassiopeia Extended als template):
/* Teaser section */
.container-bottom-a:has(.teaser) {
grid-column: full-start/full-end;
padding: 4rem 1em;
background-color: #8b6560;
color: var(--body-bg);
margin-block-start: 3rem;
& .bottom-a {
max-width: 1320px;
margin-inline: auto;
}
}
/* Articles Module */
.teaser {
h2 {
color: currentColor;
margin-block-end: 5rem;
}
.mod-articles-item {
height: 100%;
}
.mod-articles-item-content {
color: currentColor;
padding: 2.5rem 1.5rem 1.5rem;
border: .125rem solid var(--body-bg);
border-radius: .5rem;
display: flex;
flex-direction: column;
position: relative;
height: 100%;
&::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 3.5rem;
color: currentColor;
background-color: #8b6560;
display: flex;
justify-content: center;
align-items: center;
width: 6rem;
aspect-ratio: 1/1;
position: absolute;
top: -3.5rem;
left: 10%;
z-index: 2;
}
.readmore {
margin-block-start: auto;
margin-block-end: 0;
a {
display: block;
text-align: center;
font-weight: 600;
margin-block-start: 2rem;
}
span {
display: none;
}
}
.btn-secondary {
--btn-color: #8b6560;
--btn-bg: var(--body-bg);
--btn-border-color: var(--btn-bg);
background-color: var(--btn-bg);
&:hover {
--btn-hover-color: #fff8f0;
--btn-bg: var(--headerbg);
--btn-hover-border-color: var(--btn-bg);
}
}
}
.mod-articles-items {
li:nth-child(1) .mod-articles-item-content::before {
content: "\f5b8";
}
li:nth-child(2) .mod-articles-item-content::before {
content: "\e51a";
}
li:nth-child(3) .mod-articles-item-content::before {
content: "\f4ad";
}
}
}
In een echt project zou ik waarschijnlijk het afbeeldingsveld van het artikel gebruiken om het icoon toe te voegen. Of een aangepast veld en een override. Of een andere slimme combinatie. Maar voor deze demo (en omdat er maar drie teasers zijn) besloot ik alleen CSS te gebruiken. En het werkt erg goed ;-)
Laat jij je ook inspireren door andere websites en vraag je je af of het mogelijk is om hetzelfde met Joomla te doen?
Je zou het moeten proberen en hier met ons delen!