In den Joomla-Foren taucht immer wieder die Frage aus: „Was für eine Joomla-Erweiterung kann ich nehmen, um folgendes anzuzeigen?“ Und meine Antwort dazu ist sehr oft: „Gar keine! Das kann man mit dem Joomla Core, mit ein paar Overrides und eventuell noch einigen Custom Fields lösen.“

Viele Nutzer unterschätzen die Möglichkeiten, die Joomla bietet. Nur für Beiträge (com_content) gibt es sechs verschiedene Anzeige-Möglichkeiten, sogenannte „views“: „Alle Kategorien anzeigen“, „Einzelner Beitrag“, „Kategorieblog“, „Kategorieliste“, „Archivierte Beiträge und Haupteinträge“. Dazu gibt es noch sieben Module, die einem erlauben, Inhalte auf der Seite auf unterschiedliche Art anzuzeigen: Archiv, Beliebte, Kategorie, Kategorien, Neueste, Newsflash und Verwandte.

Seit ich das erste Mal einen Vortrag über Joomla Overrides gehört habe, versuche ich, soweit wie möglich auf Erweiterungen zu verzichten. Es ist nicht immer möglich und auch nicht immer ratsam, aber in vielen Fällen kann man mit normalen Joomla Inhalten eine Menge erreichen.

Eine häufige Frage ist die nach einer Erweiterung für Slideshows. Davon gibt es eine Menge. Einige können nur Bilder anzeigen, bei anderen kann man auch Texte hinzufügen. Viele davon sind kostenpflichtig und teilweise überladen. Man holt sich jede Menge CSS und Javascripte für gerade einmal drei Bilder auf der Startseite, obwohl das eigene Template meistens, wenn auf es auf einem Framework wie Bootstrap oder IUKit basiert, schon die nötigen Funktionalitäten mitbringt.

Wie kann man eine Slideshow ohne Joomla-Erweiterung darstellen?

Man nimmt Joomla Beiträge und das Joomla-Modul „Beiträge – Neueste“! Gut, so einfach geht das nicht. Man braucht eigentlich ein Override vom Modul. Ich werde hier davon ausgehen, dass das Template der Website auf Bootstrap 4 basiert. Das Beispiel kann man aber auch für Bootstrap 2 oder IUKit anpassen. Zuerst schauen wir uns das Modul an:

Codebeispiel 1 - Joomla Modul

Recht simpel eigentlich: Das Modul hat nicht viele Parameter und gibt eine Liste von Beiträgen aus.

Und jetzt schauen wir bei Bootstrap, wie ein Carousel (Slideshow) aufgebaut ist (https://getbootstrap.com/docs/4.1/components/carousel/). Es gibt mehrere Varianten: mit oder ohne „controls“ (die Pfeile für vor und zurück), mit oder ohne „indicators“ (die Balken, die die Anzahl der Slides anzeigen) und mit oder ohne „captions“ (der Text, der über dem Bild angezeigt wird).

Wir nehmen uns die komplette Variante vor: Mit „controls“, „indicators“ und „captions“. Und so sollte der Code der Slideshow am Ende aussehen: Beispiel mit drei Slides.

Codebeispiel 2 - Beispiel mit drei Slides

Die Liste oben (ol) ist für die Indikatoren, also für die Balken, die die Anzahl der Bilder angibt. Die Links unten sind die Pfeile zum Navigieren zwischen den Slides. Und dazwischen sind die Bilder mit den entsprechenden Texten.

Jetzt müssen wir diesen Code in unser Modul packen und das Ganze dynamisch machen: Die Slides sollen aus Bildern und Texten der Joomla Beiträge zusammengesetzt werden.

 

Inhalte vorbereiten

Wir legen eine neue Kategorie „Slideshow“ an. In dieser Kategorie legen wir drei Beiträgen an: „Titel“, „Introtext“ und „Einleitungsbild“ reichen aus.

Damit nicht alle Module des Typs „Neueste“ als Slideshow dargestellt werden, werden wir ein neues Layout für das Modul erstellen. Im Prinzip ist das ein Override des Moduls, nur heißt die Datei nicht „default.php“ sondern „slideshow.php“. Overrides für Module kann man ganz leicht im Backend anlegen und zwar unter Erweiterungen -> Templates -> Templates, dann das eigene Template anklicken und im Reiter „Overrides erstellen“ bei Modulen auf „mod_articles_latest“ klicken. Das System legt einfach eine Kopie der Datei im eigenen Template ab.

Wenn man dann auf den Reiter „Editor“ geht, kann man unter html -> mod_articles_latest -> default.php die Datei umbenennen und sogar direkt den Code editieren. Oder man lädt die Datei über FTP herunter und arbeitet lokal mit dem Lieblings-Editor weiter.

Wir legen ein neues „Beiträge – Neueste“ Modul an, wählen die richtige Kategorie und wählen bei „Erweitert“  das neu erzeugte Layout „Slideshow“:

Abbildung - Module: Beiträge - Neueste

Abbildung - Module: Beiträge - Neueste - slideshow

Weil die Slideshow dynamisch generiert werden soll, müssen wir einige Teiles des Bootstrap Codes durch PHP ersetzen. Das Erste, was wir brauchen, ist ein Counter, um über die Elemente iterieren zu können.

Mit $count = count($list); holen wir uns die Anzahl der Beiträge. Diese Zeile platzieren wir oben im Modul nach defined(‚_JEXEC‘) or die;

Was im Modul danach kommt, können wir erst mal löschen. Wir ersetzen die Liste durch einen Container für die Slideshow:


<div id="slider" class="carousel slide" data-ride="carousel">
</div>

Dann holen bauen wir die Indikatoren, die am Ende so aussehen müssen:

Codebeispiel 3 - mit Indikatoren

Mit unserem Counter können wir über die Liste in einer for-Schleife iterieren:

<?php for ($i = 0; $i < $count; $i++) : ?>
...
<?php endfor; ?>

Die Zahl bei data-slide-to=“ “ können wir dann dynamisch generieren, indem wir unsere Variable $i darin platzieren:

data-slide-to="<?php echo $i; ?>"

Wichtig für die korrekte Anzeige der Indikatoren ist, dass die Klasse „active“ bei dem aktuell angezeigten Slide ergänzt wird. Das erreichen wir mit:

class="<?php echo $i == 0 ? 'active' : ''; ?>"

Dieser Teil des Codes sieht dann so aus:

Codebeispiel 4 - Code mit Klasse active

Die „id“ des Containers muss zu dem „data-target“ der Liste zusammenpassen. In diesem Fall ist es „slider“. Wenn man vor hat,  mehr als eine Slideshow auf einer Seite anzuzeigen, muss man darauf achten, dass die „ids“ der Container sich unterscheiden. Man könnte hier z.B. jedem Modul eine Klasse zuweisen und das dynamisch zu der „id“ und zum „data-target“ ergänzen:

<div id="slider-<?php echo $moduleclass_sfx; ?>"....
<li data-target="#slider-<?php echo $moduleclass_sfx; ?>"

Jetzt holen wir uns die Inhalte für die Slideshow. Die sind insgesamt im Container mit der Klasse „carousel-inner“ gepackt. Jedes Slide ist wiederum ein Container („carousel-item“) mit einem Bild und einem Text:

Codebeispiel 5 - jedes Slide ein container mit Bild

Diese Elemente müssen wir wieder dynamisch generieren. Es können drei oder fünf Slides sein. Dann packen wir die Slides, wie bei den Indikatoren, in eine for-Schleife mit Counter:

Codebeispiel 6 - Slides in einer for-Schleife

Um die Einleitungsbilder aus den Beiträgen ausgeben zu können, müssen wir sie aus den Parametern der Beiträge holen. Wir verwenden dafür einen  json_decode:

<?php $images = json_decode($list[$i]->images); ?>

Hier ist es wieder wichtig, dass das aktuell gezeigte Slide die Klasse „active“ bekommt:

<div class="carousel-item <?php echo $i == 0 ? 'active' : ''; ?>">
<img class="d-block w-100" src="<?php echo htmlspecialchars($images->image_intro); ?>">
</div>

Wenn wir jetzt die Website neu laden, sehen wir schon eine funktionierende Slideshow. Nun wollen wir noch ein Text über dem Bild anzeigen. Dafür laden wir in einem Container (carousel-caption) Titel und Introtext der Beiträge:

Codebeispiel 7 - Titel und Intzrotext im Container

Als letztes bauen wir die Pfeile, um die Slideshow zu steuern:

Codebeispiel 8 - Pfeile in Slideshow

Und fertig ist unsere Bootstrap 4 Slideshow!

Abbildung - Bootstrap 4 Slideshow

Varianten

Man kann das Joomla-Modul „Newsflash“ anstatt „Neueste“ nehmen. Newsflash bietet mehr Parameter, je nachdem ob z.B. Titel und / oder Introtext angezeigt werden soll. Damit kann man „if“ Abfragen in unseren Slideshow-Code einbauen und den Text ein- oder ausblenden:

Abbildung - Slideshow Code

<?php if ($params->get('item_title')) : ?>
<h2><?php echo $list[$i]->title; ?></h2>
<?php endif; ?>
<?php if ($params->get('show_introtext', 1)) : ?>
<?php echo $list[$i]->introtext; ?>
<?php endif; ?>

 

Wenn das eigene Template auf einem anderen Framework basiert, wie z.B. Bootstrap 2 (Standard Protostar), Bootstrap 3 oder UIKit, kann man sich in der Dokumentation den richtigen Code für eine Slideshow anschauen und dementsprechend im Override anpassen.

Links:

https://getbootstrap.com/2.3.2/javascript.html#carousel

https://getbootstrap.com/docs/3.3/javascript/#carousel

https://getuikit.com/docs/slideshow

Außerdem kann man mit CSS einiges am Aussehen der Slideshow ändern. Folgende Anweisungen bewirken z.B., dass der Text weiß auf einem blauen Hintergrund erscheint.

Codebeispiel 9 - Aussehen der Slideshow mit CSS ändern

Der Text ist jetzt nicht mehr im unteren Teil der Slideshow, sondern bedeckt die linke Hälfte des Bildes. Die Pfeile sind weiter nach außen gerückt und die Indikatoren sind jetzt rund.

Abbildung - Slideshow mit runden Pfeilen

Wie Sie die Slideshow gestalten, ist Ihrer Fantasie überlassen.

Viel Spaß beim Nachbauen!

 

Wie wäre es mit einem Besuch des JoomlaDays Österreich am 29.3. und 30.3.2019 in Wien? Ich werde auf jedem Fall dabei sein!

Das von mir und Toni Gerns initiierte Projekt j-over (https://www.j-over.de/de/) befindet sich gerade in einer Relaunch-Phase. Wir hoffen, dass wir dort bald wieder interessante Overrides vorstellen können.

Dr. Viviana Menzel

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten