Diese Webseite ist das Ergebnis meines Selbststudiums zur neuen Joomla Version 4. Nachdem nun das Meiste funktioniert, möchte ich meine Erfahrung hier teilen.
Ausgangspunkt:
Ich betreibe diese Webseiten als Hobby, bin also kein professioneller Webdesigner mit fundierten Kenntnissen in HTML, CSS oder Javascript. Ich bin ein ambitionierter Joomla Anwender. Ich habe irgendwann die private Webseite unserer Familie https://berendesbande.de mit Joomla entwickelt. Dazu habe ich zuletzt ein kostenloses Template von Joomspirit.com verwendet, sowie auch die Slider Komponente von Joomspirit.com. Als nun die neue Joomla Version 4 veröffentlicht wurde, habe ich bei Joomspirit nachgeschaut, ob das Template für J4 geeignet ist. Das ist nicht der Fall und ein J4 Template bietet man nur als Beta Variante an. Also kam ein Update der Familienseite erst einmal nicht in Frage.
Ich habe dann die Bommelreisen.de Seite entwickelt und das Standard Joomla 4 Template Cassiopeia verwendet. Als Slider habe ich Smart Slider 3 eingebunden. Dieser ist kostenlos und sehr viel flexibler, als der Slider von Joomspirit. Ich habe außerdem die Bildgalerie Sigplus, Cookiehints, Akeeba Backup und das Kontaktformular von Rapid Contact eingebunden. Alle Komponenten sind kostenlos.
Ich beschreibe nun mein Vorgehen, die zugehörigen Screenshots sind in der Bildgalerie unten eingefügt.
Da ich die Seite neu entwickelt habe und es nur einige wenige Beiträge zu übernehmen gab, habe ich die Beiträge neu erzeugt. Die Texte habe ich von der berendesbande.de Webseite kopiert. Dabei habe ich zuvor zweiteilige Berichte zu einem Bericht zusammengefasst. Damit in der Blogübersicht nicht der gesamte Artikeltext erscheint, muss die Weiterlesen Linie im Editor eingefügt werden.
Auch die Bilder, die im Sider angezeigt werden, habe ich einfach kopiert. Die alte Seite ist über 10 Jahre gewachsen und ich habe bei dieser Gelegenheit etwas aufgeräumt und die Ordnerstruktur etwas verbessert. Das Bildformat für den Slider ist 1200x560 Pixel.
Das Template
Um nicht in die automatische Updatefalle zu tappen, habe ich eine Kopie des Casiopeia Templates angelegt und benutze dieses für meine Webseite.
Joomla 4 ist ziemlich frisch und gute Dokumentation zum Cassiopeia Template muss man suchen. Leicht findet man die Anordnung der Module. Was die Verwendung der Positionen betrifft, habe ich das Try and Error Prinzip mit Learing by Doing kombiniert. Benutzt man das Hauptmenü and der Position Menü, werden die Unterpunkte zu den Hauptmenüeinträgen nicht auf Anhieb angezeigt. Die Unterpunkte werden nur angezeigt, wenn man im Modul des Hauptmenüs auf dem Reiter <Erweitert>, das Layout auf <Dropdown> setzt. Das habe ich aber erst später herausgefunden. Daher hatte mein Hauptmenü keine sichtbaren Unterpunkte. So entstand eigentlich, ganz nebenbei, das Blog Layout für die Punkte <Unsere Touren> und <Technikecke>. Nichts desto trotz brauchte ich ein paar Versuche, um mit dem Layout zufrieden zu sein.
Wie geht das nun genau mit dem Blog Layout? Zuerst einmal sollten alle Beiträge, die im Blog Layout dargestellt werden sollen, in der gleichen Kategorie sein, bei mir also z. B. Reisen. Im Hauptmenü wird dann der Menüpunkt <Unsere Touren> als Kategorieblog eingerichtet. Der neuste Artikel steht immer oben über die gesamte Breite des Ausgabebereichs. Darunter werden die weiteren Beiträge in Spalten und Zeilen verkürzt angezeigt. In den Berichten sollte man die Weiterlesen Linie benutzen, damit nicht der gesamte Text im Blog erscheint. Die Anzahl der der Blöcke eine Zeile setzt man im Feld <CSS-Klasse Beitrag>. Möchte man drei Blocks in einer Zeile, lautet der Eintrag <columns-3>, für zwei Blocks <columns-2> usw. Die Anzahl der auf einer Seite angezeigten Blöcke im Feld <Einleitung>, also z.B. 3 für einen Hauptbeitrag oben über die gesamte Breite und 3 Blöcke darunter. Hat man mehr als 4 Beiträge, erscheint automatisch ein Seitenzähler mit Pfeilen um zwischen den Seiten zu wechseln. Soll ein Bild zum Block angezeigt werden, wird dieses im Beitrag auf dem Reiter <Bilder> und Links im Feld <Einleitungsbild> zugewiesen. Auch die Position des Bildes kann zugewiesen werden. Infos dazu sind schwer zu finden, aber die Hilfefunktion im Backend bringt etwas Erleuchtung.
Da ich kein Meister des CSS bin, sind die Einstellmöglichkeiten im Template ziemlich überschaubar. Es gibt zwei Farben zur Auswahl, blau und rot. Die blaue Version gefällt mir besser. Man kann ein eigenes Logo im Header einbinden. Hier muss man etwas mit der Bildgröße experimentieren. Mein Logo ist 480x100 Pixel. Damit bleibt der Header Bereich relativ schmal.
Das Ganze ist relativ übersichtlich gestaltet. Ich habe das Copyright im Footer aktiviert und den Joomla Hinweis entfernt. Die einfachste Lösung war es, die Datei <mod_footer.php> im Verzeichnis language/de-DE zu editieren. Nach der Installation von Joomla 4.04 musste ich diese Änderung erneut vornehmen. Die Datei heißt nun <mod_footer.ini>. Die Lösung ist jedoch unschön und bedarf nach jedem Joomla Update der Pflege. Besser ist es, ein Sprach Override für den Schlüssel MOD_FOOTER_LINE2 anzulegen und dort seinen eigenen Text zu platzieren. Dieser wird nach dem Update nicht überschrieben.
Nach und nach habe ich mich immer weiter in CSS, PHP und HTML eingearbeitet. Da ging soweit, dass ich ein eigenes Template entwickelt habe. Basis dieses Templates war das Tutorial von Astrid Günther zu Joomla 4 Erweiterungen. Mein Snickers Template war nur sehr kurzlebig. Es gab immer wieder neue Darstellungsprobleme, meist auf IOS Geräten älterer Bauart. Da ich zu wenig Freizeit habe, um alle diese Mankos zu beheben, habe ich mich entschlossen, das Template zu verwerfen.
Zuerst habe ich das Cassiopeia Template reaktiviert. Später habe ich das kostenlose Nature Template von Dr. Menzel IT für mich entdeckt. Dieses basiert auf dem Cassiopeia Template, wurde jedoch um ein paar nette Features erweitert. Die Farben lassen sich frei wählen und für die Bilddarstellung gibt es ein paar zusätzliche CSS Klassen.
Aber der Reihe nach....
Einbinden des Sliders
Ich lade die Paketdateien lokal herunter. Manchmal gibt es spezielle Versionen für Joomla 4, die nicht im Joomla Katalog aufgeführt sind. Deshalb der kleine Umweg. Nach der Installation müssen die Komponenten aktiviert werden. Dann ist das Smart Slider 3 Dashboard unter den Komponenten verfügbar. Auch beim Slider gilt das Motto - ausprobieren. Ich habe die Größe auf 1200x560 Pixel fixiert. Der Slider wird boxed dargestellt und benutzt nicht die gesamte Bildschirmbreite. Das ist alles Geschmacksache. In dem Zusammenhang ist es wichtig, beim Reiter Sides den Eintrag auf Fit zu setzen. Die Modulposition und die Menüzugehörigkeit erledigt ein zum Slider gehörendes Modul, dass aus dem Slider Dashboard generiert werden kann.
Durch Probleme mit älteren IOS Geräten, die ich nicht lokalisieren konnte, habe ich mich entschieden, den SmartSlider gegen DJ-ImageSlider auszutauschen. Beide haben Vor- und auch Nachteile, aber mit dem DJ-ImageSlider laufen auch die alten IPads tadellos. Dazu kann man mehrere Slides gleichzeitig darstellen und per Klick eine Lightbox öffnen. Dafür sind die Animationen nicht so aufwendig, gegenüber dem SmartSlider. Letztendlich habe ich auch den DJ-Slider verworfen und benutze nun nur noch die Sigplus Gallerie.
Sigplus Gallerie
Die Sigplus Galerie benutze ich schon ewig. Leider habe ich mich nur sehr oberflächlich damit beschäftigt und benutze nur die Grundfunktionen. Die Bilder, die ich unterhalb meiner Beiträge darstelle, sind mit Sigplus realisiert. Die Funktion ist einfach. Man packt die Bilder in ein Verzeichnis. Dann erzeugt man für den Beitrag ein Sigplus Modul und verweist auf das Verzeichnis. Man gibt die Position an und ordnet die Menüpunkte zu. Fertig.
Sigplus kann aber deutlich mehr. So habe ich die animierten Slider in den Artikeln nun auf Sigplus umgestellt. Durch anklicken wird eine Lightbox mit automatischer Diashow gestartet. Die Titel und Beschreibungen der Fotos werden in eine formatierte TXT Datei im Bilderverzeichnis gespeichert. Ist vielleicht nicht so komfortabel diese Dateien mit einem Texteditor zu erstellen und per FTP auf den Webserver zu kopieren. Eine Editorfunktion im Backend wäre sicherlich eleganter, aber die Funktionalität der Sigplus Galerie ist super.
Rapid Contact / Captcha
Dieses Plugin stellt relativ einfach ein Kontaktformular zur Verfügung. Man kann alle Texte im Plugin editieren, original sind sie in englisch. Es gibt auch eine einfache AntiSpam Lösung. Alternativ kann man Google Captcha verwenden. Hierbei fiel mir eine Besonderheit auf. Captcha funktioniert bei mir nur, wenn ich im Captcha Plugin die Größe als Kompakt verwende. Man muss seine Domain bei Google mit einem Google Konto aktivieren, um das Schlüsselpaar zu erhalten. Ich habe die Version V2 benutzt. Dazu gibt es genügend Anleitungen im Netz.
Joomla 4 liefert eigentlich alles mit, um ein Kontaktformular mit Bordmitteln zu erstellen. Somit wurde auch Rapid Contact von der Webseite entfernt.
Cookiehint
Diese Erweiterung braucht nur installiert zu werden. Nach der Aktivierung erscheint ein Banner am unteren Rand des Browsers. Es gibt zwar noch keine Version explizit für J4, jedoch funktioniert die J3 Version zuverlässig.
Akeeba Backup
Tut was es soll. Nach der Installation muss in der Konfiguration ein Ausgabepfad für das Backup festgelegt werden. Dieser sollte außerhalb des Joomla Hauptverzeichnis liegen, um nicht ständig die Backups mit zu sichern. Ansonsten wird ein Backup der Webseiten inklusive des Database Dump in eine Archivdatei gespeichert. Diese kann dann per FTP auf einen lokalen Computer gezogen werden. Zum Restore benötigt man noch die Kickstart.php. Diese muss man gesondert von der Entwicklerwebseite herunterladen. Zum Restore speichert man diese Datei im Hauptverzeichnis der Webseite und ruft diese dann explizit auf, z.B. localhost/kickstart.php.
Ich habe mit diesem Plugin die Familienwebseite auf eine lokale XAMP Umgebung gebracht. Dort habe ich meine Versuche mit der Migration von J3 nach J4 gemacht, die allesamt fehlgeschlagen sind. Nun ist diese Seite über 10 Jahre gewachsen und hatte eine Menge nicht J4 kompatibler Komponenten. Ich habe mich nach drei Fehlversuchen dazu entschieden, die Seite in einer frische installierten Joomla 4 Umgebung neu zu gestalten. Dabei habe ich das gleiche Prinzip wie bei dieser Webseite benutzt. Fotos und Texte habe ich kopiert, einzelne Artikel zusammen gefasst oder ganz gestrichen. Das Ganze passierte in der lokalen XAMP Umgebung und wurde per Restore auf die öffentliche Webseite gebracht. Das Ergebnis kann man sich bei https://berendesbande.de ansehen.
Zum Schluss noch ein paar Infos:
Ich habe vor der J4 Installation in meinem Hosting Paket die PHP Version auf PHP 8 mit OPCACHE eingestellt. Dann habe ich den die gehostete Webseite komplett gelöscht. Mit dem Entpacken der Akeeba Backupdatei aus der lokalen Umgebung kommt Joomla 4 mit allen Komponenten an seinen Platz.
