Historie

Diese Webseite wurde anfangs mit dem CMS Joomla in der Version 2.5 erstellt. Die Seite ist über 10 Jahre gewachsen, wurde mehrfach auf neuere Joomla Versionen migriert und musste letztlich gründlich aufgeräumt werden.

Im Oktober 2021 habe ich ich mich entschlossen, diese Seite mit Joomla Version 4 neu zu gestalten. Vorangegangen waren mehrere erfolglose Versuche, die Seite in einer lokalen XAMPP Umgebung von Joomla 3 zu Joomla 4 zu portieren. Nicht alle Komponenten von mir benutzten Komponenten waren Joomla 4 kompatible. Mein Hauptproblem war das verwendete Template und die Slider Komponente. 

Ich begab mich auf einen langen Weg, in einige Sackgassen und immer wieder neue Versuche nach dem Try & Error Prinzip. Ich habe viele Stunden am PC zugebracht, habe sogar mit einem eigenen Template experimentiert. Ich habe zwar ein paar Grundkenntnisse in HTML, CSS oder PHP, aber immer wenn ich ein Problem gelöst hatte, bekam ich an anderer Stelle neue Probleme. So bin ich letztlich bei dem Nature Template von Dr.Menzel IT gelandet, was für mich alle nötigen Features mitbringt. Als Slider habe ich Smart Slider 3 und DJ-Slider ausprobiert. Beide bieten umfangreiche Funktionen und nette Animationen. Letztendlich gab es jedoch mit beiden Slidern unlösbare Probleme. Daher habe ich alle Bildgalerien mit SigPlus realisiert.

 

Vorbereitung

Los ging es in einer lokalen XAMPP Umgebung mit PHP 8. Mein Web Hoster stellt für meinen Tarif ebenfalls PHP 8 zur Verfügung, also wenn schon Großreinemachen, dann auch richtig. Auch wollte ich die vorhandenen Beiträge und Bilder übernehmen. Das Bildformate der Slider Bilder ist 1200x560, bei den neueren Bildern ist es 1300x560.

Nach der XAMPP Installation habe ich Joomla 4 installiert und eine neue Datenbank angelegt. In diese Umgebung habe ich sämtliche Fotos in das Image Verzeichnis kopiert. Dabei habe ich Verzeichnisstruktur bereinigt. Jeder einzelne Slider bekommt einen sprechenden Namen. Für Fotos innerhalb der Beiträge habe ich einen eigenen Ordner angelegt, der wiederum einzelne Ordner für die Beträge enthält. Die Bildergalerien sind den Beiträgen zugeordnet, also gibt es in jedem Beitragsverzeichnis einen Galerieordner.

 

Komponenten

Als Erweiterungen installiere ich folgende Komponenten: Akeeba Backup, Sigplus Galerie, Cookiehints und das Kontaktformular von Rapid Contact. Alle Komponenten sind kostenlos. Zur Installation lade ich die Paketdateien lokal herunter. Bei Akeeba Backup ist im Web Katalog die Version 8, man benötigt für Joomla 4 leider die Version 9. Deshalb gehe ich über die Entwicklerwebseiten und lade die Erweiterungen herunter.

Das Kontaktformular von Rapid Contact habe ich durch ein mit Joomla Bordmitteln erzeugtes Kontaktformular ersetzt. Bei den Rezepten kam schnell der Wunsch auf, die Rezepte als PDF Datei ausgeben zu können. Ich habe Phoca PDF installiert. Die Handhabung ist relativ selbsterklärend. Die Installation wirkt natürlich auf alle Beiträge. Um nur die Rezepte zu bedienen, kann man Beitäge kategorie eise ausschließen. Dazu muss man im Content Plugin die Kategorie IDs durch Komma getrennt eingeben. 

SigPlus Bildgalerie

Für die Slider erstelle ich die SigPlus Module. SigPlus arbeitet mit ordnerbasiert. Alle Fotos eines Ordners bilden eine Slideshow. Die Slider positioniere ich in der linken Sidebar. Das Layout zeigt 3 Bilder im Format 300x200 px in einer Spalte übereinander. Nach 3 Sekunden rollen die nächsten 3 Bilder in die Vorschau. Beim Anklicken eines Vorschaubildes öffnet sich eine Lightbox und zeigt das Bild in voller Größe. Die Diashow startet automatisch und zeigt alle Bilder im Ordner mit Titel und Beschreibung an. Diese werden in einer Textdatei im Bilderordner abgelegt. In manchen Artikeln habe ich weitere Bildgalerien im Modul Bottom-Main. Auch hierfür gibt es SigPlus Module. Die Vorschaubilder erscheinen jedoch nebeneinander in einer Reihe. Auch die Bilder innerhalb der Artikel sind mit Sigplus realisiert. Über CMS Inhalt einfügen im Editor erscheint ein Fenster mit den Einstellungen für die Galerie. Beim Speichern wird der Kommandoblock in den Text eingefügt. Hier muss nur noch der Ordner für die Bilder angepasst werden.

 

Das Template

Die ersten Versuche habe ich mit Cassiopeia gemacht. Es ist ein sehr gutes Template, allerdings kommt man sehr schnell an den Punkt, wo man gewisse Dinge einfach ändern möchte, dieses jedoch nicht ohne weiteres unterstützt wird. Das brachte mich dann soweit, mein eigenes Template zu basteln. Am Ende fehlten mir einfach die Kenntnisse, weshalb ich dieses Projekt erst einmal auf Eis gelegt habe. Mit Joomla 4.1 gibt es die Child Templates und Nature bietet diese Funktionalität. Letztlich ist Nature eine Weiterentwicklung von Cassiopeia. 

 

Umsetzung

Ich erzeuge zuerst die Kategorien für die Beiträge. Dann erstelle ich Kategorie weise die Beträge, indem ich die Inhalte von der online Webseite kopiere. Jeder Beitrag bekommt einen Eintrag im Hauptmenü. Dann erstelle ich die Slider Module und ordne sie den Menüpunkten zu.

 

Cassiopeia Erfahrungen 

Meine Erfahrungen mit dem Cassiopeia Template sind durchweg positiv. Zu Beginn waren Informationen zum Template schwer zu finden, aber ein paar Hinweise findet man schon. Das Template kommt mit zwei konfigurierten  eingestellten Farben daher, blau-lila und rot. Wem das nicht gefällt, muss sich mit CSS beschäftigen. Nach einigem Suchen habe ich dann auch die entscheidenden Hinweise gefunden. Die wichtigsten Links habe ich unten angegeben. 

Das Hauptmenü hat mir am Anfang etwas Mühe bereitet. Ohne entsprechende Eingabe, werden nämlich die Unterpunkte nicht angezeigt. Erst wenn man im Modul des Hauptmenüs auf dem Reiter Erweitert im Feld Layout Dropdown auswählt, werden die Unterpunkte angezeigt. Mit dem Kategorie Blog habe ich mich auch beschäftigt. Zu den einzelnen Menüpunkten, z.B. Reisen oder Technik, gibt es einen Menüpunkt, der alle Berichte in einem Blog darstellt. Dazu müssen die Beiträge der gleichen Kategorie angehören. Den Menüpunkt erstellt man dann als Kategorie Blog, findet sich unter Beiträge. Der neuste Beitrag steht oben und nimmt die gesamte Breite ein. Darunter folgen die weiteren Beiträge im Bloglayout in Spalten und Zeilen, je nachdem, wie man es mag, lassen sich die Anzahl der Zeilen und Spalten gestalten. 

Wie gesagt, das Ganze ist ein Hobby, ich bin kein professioneller Webdesigner. Meine ersten Erfahrungen mit Joomla 4 habe ich in einem neuen Projekt gesammelt. Ich habe eine neue Webseite für unsere Wohnmobilreisen erstellt. Das war ein eng begrenzter Rahmen, in dem ich mich austoben konnte. Die Seite ist online unter https://bommelreisen.de zu finden. 

 

Das Nature Template

Alles was ich zu Cassiopeia geschrieben habe, gilt auch für das Nature Template. Es gibt ein paar nette Erweiterungen, z.B. für die Bilddarstellung im Artikel die CSS Klassen right und left. Im Kategorie Blog benutze ich gern die CSS Klasse Shadow. Auch bei der Farbgestaltung ist man frei. Für die meisten Dinge sind Color-Picker im Backend vorhanden.

 

Language Overrides

Ich habe das Copyright Modul aktiviert, dass im Footer angezeigt wird. Die Werbung für Joomla möchte ich jedoch nicht auf meiner Seite haben. Nach einigem Suchen fand ich den entscheidenden Hinweis im Web. Mit einem Language Override lässt sich der Text für die Konstante MOD_FOOTER_LINE2 konservieren. Bisher hat jedes Joomla Update den Standard Verweis auf Joomla wiederhergestellt. Mit dem Override ist dies nun Geschichte. Es muss für jede installierte Sprache durchgeführt werden.

 

Fazit

Die Webseite hat, seit der Umstellung auf Joomla 4, mehrfach ihr Aussehen verändert. Das wird sich in Zukunft nicht ändern. Es gibt immer wieder neue Ideen und Gestaltungsmöglichkeiten. Wenn Fragen unbeantwortet bleiben, nutzen Sie das Kontaktformular. Ich werde mich bemühen, alles zu beantworten.

 

Hier sind die Links:

Joomla 4: Tweak Cassiopeia with a top banner and horizontal navigation - The Joomla Community Magazine

Posts tagged: Cassiopeia | Astrid Günther (astrid-guenther.de)Jo

Joomla 4 - Cassiopeia Template - a bunch of Tips & Tricks

Nature - ein Template für Joomla 4