Positionering van afbeeldingen in artikelen
Joomla 4 heeft de float-opties voor afbeeldingen gewijzigd: er is geen selectievak meer met "right", "left" of "none", maar een veld om een css-klasse in te voegen. Cassiopeia biedt de klassen "float-start" voor het plaatsen van de volledige afbeelding aan de linkerkant (aan de rechterkant voor rtl-talen), "float-end" voor het plaatsen van de volledige afbeelding aan de rechterkant (aan de linkerkant voor rtl-talen) en "float -none" voor niet zwevend.
Natuurlijk is het ook mogelijk om de positie van de afbeelding te wijzigen met behulp van eigen css-klassen.
Voorbeeld "float-center" (eigen css-definitie in het user.css-bestand)
.float-center.item-image {
text-align: center;
}
Voorbeelden van een blog weergave
U kunt de klassen globaal gebruiken voor alle artikelen, ga naar Inhoud -> Opties -> Lay-out bewerken en voer de gewenste klasse in het veld "Class van de afbeelding" in.
Categorieblog
De opties kunnen globaal (Inhoud -> Opties) of in het menu-item worden geconfigureerd.
Wat je misschien weet van Joomla 3
Aantal hoofdartikelen
Aantal introductieartikelen
Aantal columns
Multi Column Direction -> Down creëert een mansory-lay-out, Across een column-lay-out
Aantal koppelingen
Wat is er nieuw in Joomla 4
Toonaangevende artikelklasse
Artikel Klasse
Gelinkte introafbeelding
Cassiopeia heeft al enkele nuttige modificatieklassen voor categorieblog:
- boxed
- image-right
- image-left
- image-alternate (in combinatie met image-right of image-left)
- image-bottom
- boxed image-left
- boxed masonry-3 image-bottom
- Blog Class (3 intro items): columns-3
Blog Class: boxed image-left image-alternate
Hieronder een paar voorbeelden van verschillende lay-outs
Image-left
boxed image-left (zie de donker blauwe lijn)
boxed image-left image-alternate
Een intro afbeelding met class image-left
de andere met alleen de class boxed en drie kolommen ingevuld.
Bootstrap componenten invoegen (optie 1)
Joomla 4 introduceert een modulaire benadering voor interactieve componenten
Wat is een modulaire aanpak?
De functionaliteit is onderverdeeld in afzonderlijke componenten die worden ondersteund door afzonderlijke bestanden. Er is geen benadering met één bestand zoals het was met Bootstrap in Joomla 3. De modulaire benadering is efficiënter en biedt prestatieverbeteringen (stuur alleen de code die nodig is in plaats van alles af te leveren voor het geval een pagina een onderdeel nodig heeft).
In Joomla 4 is zeer weinig java script aan de template Cassiopeia toegevoegd.
De rest staat geparkeerd in de map media/vendor /bootstrap/js
In dit voorbeeld gaan we een carousel invoegen.
- maak een nieuwe module aan van het type Aangepaste
- geef die een title en selecteer voor positie: banner
- bij menu toewijzing zoek je een menu-item uit waar je de carousel wilt laten verschijnen, deze wordt nu over de volle breedte getoond
- open de code editor in Tinymce
- kopieer de code van docs.joomla.org
- plak de code in editor (code)
- klik op opslaan
- vervang eventueel je eigen afbeeldingen maar laat deze nu eerst maar staan
- sla het nu op en bekijk die nu in de browser
- wat nu opvalt dat er geen beweging in zit
- ja en nu komt het moeilijkste gedeelte waar vind je documentatie hoe je het js (java script) script moet vinden en hoe je de code die je moet aanroepen om beweging in de carousel te brengen?
- maar ga nu naar of open de zojuist geopende joomla documentatie pagina
- kopieer hier de code die je nodig hebt
- ga nu naar Systeem/Website templates/Cassiopeia gegevens en bestanden
- open het index.php bestand
- plak de de code die net hebt gekopieerd zie regel 16
- wijzig de tekst selector in caroucel
- Sla het nu op en bekijk het resultaat nu inde browser (even wachten voor dat er beweging in komt)
Bootstrap component invoegen (optie 2)
In de volgende demo gaan we alert in voegen via een module.
- Download hier de Custom BS Components module.
- Installeer de module en activeer het.
- geef het een titel
- typ een zelfbedachte positie bij Positie
- ga hier heen om een alert te kopieëren (bedenk dat er ook alerts die zonder java script werken, die zijn zonder een sluiten kruisje)
- open de code editor van tynymce en plak daar de alert code in en sla deze op
- pas eventueel de tekst aan
- open nu het tabblad Opties en selecteer daar het vakje bij Alert
- Open nu een artikel waar je deze alert wilt laten verschijnen voeg nu de module in die net hebt aangemaakt
- Zie voorbeeld op deze pagina bovenaan
Een accordion in Tinymce als een snippet gebruiken
Kijk op deze website hoe deze is opgebouwd.(Er zijn meerdere Bootstrap voorbeeld sites)
Kopieer de inhoud van Always open en plak die vooreerst in een tekstverwerker bv notepad ++ sla die op als accordion.txt
Tinymce
Ga nu naar Plugins en open daar in Tyni MCE Klik op "Instellen 0" scrol nu naar beneden naar "Inhoud template map" en selecteer daar "cassiopeia/html/tinymce"
Klik nu op Opslaan en sluiten
Snippet of template aanmaken
- Ga nu naar Systeem/Website template-->Gassiopeia gegevens en bestanden.
- Klink nu op tabblad Nieuw bestandd
- Selecteer eerst tinymce
- Typ bij Bestandsnaam Accordion
- Selecteer bij Bestandstype txt
- klik op Maken (zorg er voor dat de map tinymce nog is geselecteerd)
- Plak deze nu in het zo juist aangemaakte bestand.
- Klik op Opslaan en sluiten
- Sluiten
- Open een nieuw artikel of een bestaande waar deze Accordion wilt plaatsen.
- Plaats de cursor op de plaats waar je de alert wilt plaatsen
- Klik op de het icoontje van Template invoegen
- Klik op Accordion
- Pas de tekst aan, sla het op en bekijk het resultaat in de browser.
Dit menu-item heeft een paginaklasse bij voorbeeld "eigen"
Je kunt aangepaste CSS bestand (user.css) gebruiken om dingen te wijzigen. Bijvoorbeeld de kleuren. Cassiopeia gebruikt enkele aangepaste CSS-eigenschappen (variabelen). De achtergrond van kop- en voettekst gebruikt deze variabelen.
Je kunt de variabelen voor een specifiek HTML-element of een klasse opnieuw definiëren. Als je de volgende css-code in uw user.css-bestand schrijft, wijzigt u de kleuren op de pagina met de klasse "eigen". Zie hier een voorbeeld.
.eigen {
--cassiopeia-color-primary: #2F9C95;
--cassiopeia-color-hover: #174F4B;
--cassiopeia-color-link: #1C5E5A;
}