Unsere Webseite hat wieder ein verändertes Aussehen. Außerdem gibt es mittlerweile die Version 5 von Joomla. Also Zeit, um einen neuen Artikel zu verfassen.
Im Grunde bleibt Vieles beim Alten. Da mein Hosting-Tarif die Voraussetzungen für Joomla 5 nicht erfüllt, habe ich das Upgrade zuerst in einer lokalen XAMPP Umgebung durchgeführt, später dann für die Schwesterseite berendes-bande.de auf meinem selbst gehosteten Linuxsystem. Das Joomla Update funktionierte problemlos. Die SigPlus Galerie hatte anfangs ein paar Probleme. Ein paar Tage später wurden diese vom Entwickler behoben. Diese Problematik veranlasste mich jedoch, mich mit anderen Slider Komponenten zu beschäftigen. Dabei fand ich interessante neue Funktionen beim SmartSlider 3. Also habe ich den Smart Slider 3 in der kostenlosen Variante in meine Webseite integriert. Die Beiträge, die unsere Reiseberichte enthalten, haben nun ein neues Layout. Am Beginn des Beitrags wird der Slider über die gesamte Breite des Browsers dargestellt. Infos zu den Bildern werden in einem eigenen Layer über das Bild gelegt und animiert dargestellt. Aber der Reihe nach...
Die Installation des Sliders ist einfach. Anschließend findet sich der Slider unter den Komponenten. Jeder Slider ist ein Projekt, also klickt man auf New Project und gestaltet das Aussehen. Das was ich jetzt beschreibe, bezieht sich auf das Layout auf meiner Seite. Die passenden Fotos sind in der Bildgalerie unten zu finden. Da meine Reiseberichte alle das gleiche Layout bekommen sollen, erstelle ich zuerst einen Slider ohne Bilder, den ich dann für den jeweiligen Bericht kopiere. Man kann also Slider kopieren, da ich aber die Fotos nicht mit kopieren will, erstelle ich dieses Template. Den Namen setze ich entsprechend auf der Kachel Allgemein. Die Ausrichtung ist mittig mit einem Rand von 4 Pixeln.
Auf der Kachel Größe gibt man dann die Größe der Sliderbilder in Pixel an. Ich habe den Schalter Limit Slide Width ausgeschaltet. Dieser steht standardmäßig auf 70%. Im unteren Bereich wähle ich das Layout Volle Breite. Auf dem Reiter Bedienelemente schalte ich den Pfeil ein, wähle jedoch nicht den Standardpfeil, sondern den linken, mit dem Hintergrund. Der rechte ist vielleicht schöner, bei meinem weißen Hintergrund ist er mitunter schwer zu erkennen. Weiterhin schalte ich den Schatten ein, der unterhalb des Bildes eingeblendet wird. Alle anderen Bedienelemente sind bei mir ausgeschaltet. Eventuelle Texte blende ich später über einen Layer ein.
Auf dem Reiter Animation schalte ich durch Klicken auf das Pluszeichen die Animation ein. Auf der Kachel Autoplay wird Autoplay und Button eingeschaltet. Button zeigt in der oberen rechten Ecke einen Schalter an, mit dem die Diashow angehalten, bzw. wieder gestartet werden kann. Die restlichen Einstellungen übernehme ich vom Standard. Gilt auch für die Einstellungen auf dem Reiter Optimiere. Damit ist unser Template fertig und kann gespeichert werden.
Nun kann also unser erster, echter Slider generiert werden. Dazu öffnet man das Template und klickt den Schalter Actions auf der rechten Seite. Aus dem Kontextmenü wählt man Slider duplizieren und bekommt eine 1:1 Kopie des Templates. Diesen öffnen wir und ändern erst einmal den Namen. Dann klicken wir oben links auf die Schaltflächen Add Slide und gleich danach auf die Schaltfläche Bild. Aus dem dann angezeigten Medienverzeichnis wählen wir den entsprechenden Ordner, sowie die einzelnen Bilder aus und fügen diese unserem Slider zu.
Danach geht es weiter mit den Bildbeschreibungen, die über den einzelnen Bildern eingeblendet werden sollen. Dazu öffnet man das zu bearbeitende Bild im Slider per Doppelklick. Durch das Anklicken des grünen Pluszeichens in der linken oberen Ecke öffnet sich ein Auswahlmenü an Elementen, die man al Layer über dem Bild platzieren kann. Ich benutze derzeit nur den Text. Klickt man die Schaltfläche Text an, erscheint zentriert ein Beispieltext und ein Fenster, in dem man die Eigenschaften und den Inhalt bearbeiten kann. Klickt man auf Stil kann man die Schriftart, die Farbe des Textes und die Hintergrundfarbe, den Rahmen und dessen Farbe und vieles mehr einstellen. Ich benutze 17 px weiße Schrift auf grauem Untergrund mit einem Rahmen und abgerundeten Ecken. Aber damit noch nicht genug. Man kann diesen Layer z.B. auf Smartphones ausschalten. Die Lage des Layer setzte ich immer auf absolute und verschiebe den Text an die entsprechende Position über dem Bild. Der Clou ist jedoch, dass man sich diese Einstellungen speichern kann, damit man sie nicht immer manuell setzen muss. Dazu klickt man im Eigenschaftsfenster einfach auf die Disk, gibt dem Kind einen Namen und fertig. Über das grüne Pluszeichen findet man diese Einstellungen im nächsten Bild wieder. Das funktioniert übrigens auch Slider übergreifend. Hat man den Layer fertig bearbeitet, speichert man das Bild und verlässt es über den Schalter Back. Dann beginnt das Spiel von vorne mit dem nächsten Bild, dem nächsten Slider usw.
Zur Darstellung des Sliders und der Verknüpfung zum Beitrag wird ein Modul benutzt. Dieses lässt sich bequem vom Reiter Allgemein erzeugen. Im Modul muss dann nur noch die Menüzuweisung und die Positionierung erfolgen.
Die Details könnt ihr unten in der Galerie ansehen.
Ich habe auch meine ersten Versuche mit Child Templates gemacht. Das Nature Template - und auch das Cassiopeia Template - unterstützen Child Templates. Dabei werden nur solche Teile ins Child Template kopiert, die verändert werden sollen. Auf dieser Seite ist die Übersicht der Touren mit einem Child Template realisiert. Der Grund für das Child Template ist, dass die Übersichtsseite auf einem Foto des Wohnmobil dargestellt wird, dass den gesamten Bildschirm füllt und nicht gescrollt wird. Denkbar wäre, jeden Reisebericht auf einem typischen Foto zu präsentieren. Das hab ich für die Reisberichte aus 2023 nun umgesetzt.
Dieser Hintergrundhack wird durch einen kleinen Codeschnipsel in der user.css erreicht:
Den Schnipsel habe ich irgendwo im Internet gefunden und mit einem eigenen Ordner innerhalb des images Verzeichnis garniert. Das Foto habe ich im Übrigen halbtransparent abgespeichert. Das ging mit Gimp und dem Deckkraftregler der Ebene ganz einfach. Im Child Template lassen sich dann auch die Farben für die Schrift und die Links entsprechend anpassen. Das Ganze wirkt natürlich bei der Betrachtung auf dem Handy nicht so überzeugend, wie auf größeren Displays.
Eine weitere Neuerung ist das Einbinden von Google Maps als Iframes. Das erste Experiment ist im Bericht aus Schottland zu sehen. Dazu muss man in der Joomla Umgebung die Nutzung von Iframes erlauben. Auch im Editor sind Iframes verboten. Für das Admin-Profil muss man das freigeben, bzw. die Iframes aus der Liste der verbotenen Elemente löschen. Dann sucht man sich bei Google Maps die den entsprechenden Kartenausschnitt. Über die 3 Striche erreicht man das Menü und wählt dort - Karte teilen oder Einbetten - aus. Im folgenden Fenster wählt man dann Karte einbetten. Es erscheint ein neues Fenster mit einem kleineren Kartenausschnitt. Oberhalb der Karte wird der HTML Code angezeigt und kann kopiert werden. Im entsprechenden Beitrag schaltet man den Editor in den Code-Modus. An der entsprechenden Textstelle fügt man dann den HTML code ein. Man kann einige Dinge steuern, wie z.B. die Größe oder die Lage. Um das zu verdeutlichen habe ich ein Beispiel aus meinem Bericht hier abgebildet. Dabei habe ich nur die Parameter kopiert. Das eigentliche Iframe habe ich aus Platzgründen nicht kopiert.
style="float: right;" width="250" height="180" allowfullscreen="allowfullscreen" loading="lazy"
Mittlerweile habe ich den Tarif beim Hostinganbieter gewechselt und diese Webseite nach Joomla 5 portiert. Mit einiger Verspätung habe ich festgestellt, dass Joomla 5 keine ReCaptcha Erweiterungen an Bord hat. Ich habe dann das Google Captcha gegen die kostenlose Version Aimy Captcha-Less Form Guard ersetzt. Die Änderung des Webhosting Tarifes brachten auch Änderungen der Maileinstellungen mit sich, die ich bei dieser Gelegenheit gleich mit eingepflegt habe. Nun funktioniert auch die Kontaktaufnahme einwandfrei.
So das soll es erst einmal sein. Ich werde weiter probieren und verändern und wenn es gefällt, werde ich diesen Artikel ergänzen.
