Die berendesbande.de ist über viele Jahre gewachsen. Sie ist mit dem Content Management System Joomla realisiert. Über die Jahre ist da Einiges zusammen gekommen. Das Erscheinen von Joomla 6 im Herbst 25 habe ich nun zum Anlass genommen, um zu beschreiben, wie diese Seite aufgebaut wurde. Es wurde also ein Frühjahrsputz auf der Seite vorgenommen.
Ich benutze ausschließlich kostenfrei Erweiterungen und Templates für diese Seite. Bei den Templates möchte ich keine aufwendige Framework-Lösungen. Ausprobiert werden Neuerungen immer in meiner lokalen Entwicklungsumgebung, die in einer virtuellen Maschine einen auf Ubuntu Linux basierten Apache Webserver mit Mariadb Datenbank bereitstellt. Auch diese Entwicklungsumgebung ist kostenfrei und läuft, meiner Meinung nach, deutlich stabiler als XAMPP. Wie diese VM eingerichtet wird, findet ihr ebenfalls in der Technikecke. Ich hoste diese Webseite bei Alfahosting und eine Kopie dieser Seite unter der Domäne berendes-bande.de auf einem eigenen Webserver, der in meine Keller steht. Der Server im Keller läuft in identische Umgebung, so dass es für mich einfach ist, eine neu Version der Webseite lokal auf meinem PC zu entwickeln. Nach Fertigstellung teste ich sie online auf meinem eigenen Webserver und erst wenn es hier keine Probleme gibt, lade ich sie auf den Server bei Alfahosting. Die Umgebung bei Alfahosting ist nicht identisch zu meiner Umgebung. Die Einstellmöglichkeiten sind begrenzt und man benutzt die MySQL Datenbank statt Mariadb. Warum beschreibe ich das alles? Ich werde später im Bericht auf Details eingehen, aber ein Problem beim Restore der neuen Webseite bei Alfahosting, machte eine tiefere Überholung der Webseite nötig.
In der Winterpause 2024/25 habe ich für unsere Webpräsenz auf das Phoca Horizon Template umgestellt. Das Prinzip des Templates unterscheidet zwischen dem Layout der Webseite und dem Layout des Inhalts. Beim Layout der Webseite beschreibt man die Größe und die Lage der Container und deren Position. Das Layout des Inhalts befasst sich mit der Darstellung des Inhalts, also der Darstellung des Beiträge. So lässt sich die Darstellung des Inhalts durch bestimmte (CSS)-Klassen einstellen. Das Ganze ist super flexibel und kommt ohne ein Framework aus. Dadurch wird die Webpräsenz sehr performant. Leider ist die Dokumentation nicht sehr umfangreich. Dadurch verbringt man viel Zeit mit ausprobieren. Es hilft, sich die Demodaten herunterzuladen. So lernt man schnell, wie man seiner Webseite ein modernes Aussehen verleiht.
Phoca stellt zur Gestaltung Particles zur Verfügung. Diese muss man wie einen Baukasten verstehen, mit dem man Teile seiner Webpräsenz gestaltet. So gibt es ein Particle für das Banner, Kombinationen von Bildern und Text und so weiter und so weiter. Während ich die neue Version meiner Webseite entwickelte, testete ich auch das Phoca Spectrum Template. Als ich kurz vor der Veröffentlichung meiner Webpräsenz stand, gab es ein Update auf die Particles. In Kombination mit dem Spectrum Template und der neuen Version der Particles gab es leider mehr Probleme aus Lösungen. So entschied ich mich, zunächst das Horizon Template zu behalten.
Welche zusätzlichen Erweiterungen habe ich im Einsatz? Eine der wichtigsten Erweiterungen ist der Smart Slider 3. Damit sind in der aktuellen Version der Webseite alle Slideshows realisiert. In der vorigen Version hatte ich auch SigPlus als Bildergalerie im Einsatz. Beim Einspielen des Restores bei Alfahosting gab es Probleme mit der Datenbankstruktur bei Sigplus. Nach Rückfragen bei Grok war klar, dass man das Problem nur lösen kann, wenn man auf SigPlus verzichtet. Das Projekt wird nicht mehr weitergeführt. Das bedeutete für mich einen extra Aufwand. 46 Slider waren mit SigPlus realisiert. Das Bildformat war deutlich kleiner, als bei den Slidern im Header. Die erste Idee war, die Fotos beizubehalten und an gleicher Stelle, meist oberhalb des Footer, anzuzeigen. Das Ergebnis gefiel mir nicht und wurde auf wenige alte Artikel begrenzt. Stattdessen wurden die alten Originalfotos gesucht, neu zugeschnitten und ins Smart Slider-Format gebracht. Zum Glück habe ich meine gesamten Digitalfotos in Digikam nach Jahr und Monat katalogisiert. Digikam ist übrigens ebenfalls ein kostenloses Tool.
Für die Rezepte habe ich einen neuen Slider, mit den alten Sigplus Fotos, in der Sidebar links eingebaut. Die meisten alten Berichte von Snickers haben wurden mit neuen Fotos im Header versorgt. Die Detailfotos von den älteren Reiserouten habe ich in ein PDF-Dokument geladen. Dies PDFs können am Ende des Betrags heruntergeladen werden. Dann wurden die SigPlus Komponenten im Joomla Backend deinstalliert. Es war allerdings anschließend noch notwendig mit PHPMyAdmin die SigPlus Tabellen aus der Datenbank zu entfernen.
Die nächste unverzichtbare Komponente ist Akeeba Backup. Dies erzeugt ein Backup der gesamten Seite inklusive des Datenbank Dumps. Mit dem Kickstart PHP-Skript kann dieses Backup dann an anderer Stelle installiert werden. Das ist sehr benutzerfreundlich.
Zur Absicherung der Kontaktfunktion habe ich Aimy Captcha-Less Form Guard installiert. Mit Joomla 5 hatte man die Joomla Captcha Komponente aus dem Joomla Core entfernt.
Ein sehr brauchbares Hilfsmittel ist das Phoca Collapse System Plugin. Es hilft dabei, Systemkomponenten in eine beliebige Reihenfolge zu bringen.
Nachtrag April 2026:
Die Restores mit Akeeba beim Hoster Alfahosting machten mir weiterhin Kopfschmerzen. Immer wieder gab es Fehlermeldungen beim Zurückschreiben der Datenbank. Da bei Alfahosting keine Pläne für das Update der MySQL Datenbank gibt, habe ich folgenden Weg gefunden, um die Problematik zu umgehen. In meiner Entwicklungsumgebung habe ich die Kollation auf utf8_unicode_ci umgestellt. Dies habe ich mit PHPMyAdmin durchgeführt. Zuerst habe ich das für die Datenbank mit dem SQL Kommando
ALTER DATABASE dein_db_name CHARACTER SET utf8 COLLATE utf8_unicode-ci;
In einem Zweiten Schritt werden die Tabellen entsprechend angepasst. Man wählt in PHPMyAdmin die Datenbank aus und öffnet den Reiter Operationen. Im Feld Kollation wählt man utf8_unicode_ci aus. Dann aktiviert man die beiden Checkboxen Alle Tabellen ändern und alle Spaltenkollationen ändern. Dann den OK Button auslösen.
Beim Restore der Datenbank mit dem Kickstart.php Skript wählt man die Einstellungen, die ich in dem Screenshot oben abgebildet habe. Mit diesen Maßnahmen läuft der Restore fehlerfrei durch.
Umstellung des Templates:
Durch weitere Tests konnte ich die Probleme mit dem Phoca_Premiere Template und auch mit dem Phoca_Spectrum Template umschiffen. Ich hatte für meine Tests immer die Bespieldaten für das Template installiert. Bei meinem finalen Versuch habe ich die Schwesterseite http://bommelreisen.de komplett neu aufgesetzt. In einer neu installierten Joomla 6 Umgebung habe ich das Template ohne Beispieldaten installiert. Danach habe ich alle Slider aus dem Dashboard des Smartslider exportiert. Alle Artikel habe ich eins zu eins kopiert, das Menü neu aufgebaut und die Slider importiert. Anschließend mussten alle Site Module für die Phoca Particles und die Smart Slider neu angelegt werden. Diese Aktion führte zum Erfolg. Nun ist diese Webseite viel umfangreicher als die Bommelreisen, so kam diese Vorgehensweise hier nicht in Betracht. Stattdessen habe ich die Online Seite mit einem Akeeba Backup in die Entwicklungsumgebung kopiert. Dann habe ich das Cassiopeia Template auf allen Seiten zugewiesen und das Phoca_Horizon deinstalliert. Dann habe ich das Phoca_Spectrum Template installiert und die Updates für die Phoca Particles durchgeführt. Der Nachteil dieser Aktion ist, dass alle Phoca Particle Module neu gemacht werden mussten. Das war aber ein überschaubarer Aufwand.
Der Vorteil der Phoca Joomla 6 Templates ist die Einführung der Container ID. Damit lässt sich jede Position im Template über einen Link oder über das Menü anspringen. Die sichtbaren Punkte im Hauptmenü sind fast alle URL Links. Diese verweisen auf die jeweilige Container IDs, z.B. Reisen an der Position bottom-b. er Button der unter dem Foto angezeigt wird, ist zum Container bottom-c verlinkt, wo unsere Hundegeschichten verlinkt sind. Dieses Prinzip ist beliebig erweiterbar. So habe ich zusätzliche Positionen bottom-d bis bottom-f zusätzlich angelegt.
Als das alles fertig war, kam das Joomla 6.1 Update. Hier gab es nun die nächsten Problemchen. So fehlen in den Phoca Templates seit dem Update ein paar Reiter in den Template Stilen. Ich habe im Phoca Forum darüber berichtet und hoffe auf eine baldige Lösung. Als Zwischenlösung habe ich ein älteres Backup, was noch Joomla 6.0.4 enthält, wie oben beschrieben aufgearbeitet. Das automatische Update der Joomla Version habe ich erst einmal deaktiviert.
Der Fehler liegt bei Joomla 6.1. In der Datei layouts/joomla/form/field/subform/repeatable/section-byfieldsets.php fehlt in der Zeile 48 am Ende eine Klammer >. Fügt man diese ein, ist das Problem beseitigt. Den Hinweis bekam ich von Jan vom Phoca Forum, besten Dank dafür. Ich denke mit dem nächsten Joomla Update wird dieser Fehler bereinigt.
Wer mehr Informationen zur Gestaltung oder zu einzelnen Komponenten benötigt, kann mich gern über die Kontaktfunktion anschreiben. Ich werde mein Erfahrungen gern teilen.
