Historie

Diese Webseite wurde vor mehr als 10 Jahren mit dem CMS Joomla in der Version 2.5 erstellt. Sie ist immer weiter 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. Ich habe mit verschiedenen Slider Komponenten experimentiert, bin jedoch letztlich bei SigPlus gelandet. Alle Bildgalerien und auch die Fotos innerhalb der Artikel sind 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. Cookiehints habe ich nach Problemen mit dem Backup durch n3t Cookie and Consent ersetzt. Bei einem Restore in die lokale XAMPP Umgebung hing Cookiehint in einer Endlosschleife und zeigte dauerhaft das Hinweisfenster an.

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 Beiträge kategorieweise ausschließen. Dazu muss man im Content Plugin die Kategorie IDs durch Komma getrennt eingeben. 

 

SigPlus Bildgalerie

Für die Slider erstelle ich je ein SigPlus Modul. SigPlus arbeitet ordnerbasiert. Alle Fotos eines Ordners bilden eine Slideshow. Ich benutzte verschiedene Slider. Bei den Rezepten positioniere ich den Slider in der linken Sidebar. Das Layout zeigt 3 Bilder im Format 300x200 px in einer Spalte übereinander. Bei den meisten anderen Kategorien benutze ich den Slider an der Position Main-Top. Die Vorschau sind dann 3 Bilder in einer Reihe im Format 450x300 px. 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 Beschreibungen 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 auch 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. Ich habe mich dann für das Nature Template von Dr. Menzel IT entschieden. 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 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. Seit einiger Zeit ist das Nature Template Child fähig. Ich möchte nicht verschweigen, dass es ein Problem mit dem Intro Banner gab. Auf IOS Geräten wurde das Into nicht skaliert und man sah statt dem Wohnmobil am Strand nur ein Stück Himmel. Ich habe die Entwicklerin kontaktiert und bekam einen Code Schnipsel, den ich in meiner user.css Datei des Templates eingefügt habe. Seither kann man die Intros auch auf Apple Geräten korrekt ansehen.

.banner-overlay { background-attachment: scroll; background-position: top, left; }

 

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)

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

Nature - ein Template für Joomla 4