In den Joomla-Foren taucht immer wieder die Frage „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, 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ägen (com_content) gibt es sechs verschiedene Anzeige-Möglichkeiten, sogenannten „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 unterschiedlicher 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 zu überladen. Man holt sich jede Menge CSS und Javascripte für gerade einmal drei Bilder auf der Startseite, obwohl meistens das eigene Template, wenn auf es auf einem Framework wie Bootstrap oder uikit 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 uikit 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 anzeigt) und mit oder ohne „captions“ (der Text, der über das 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 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 unserem Modul packen und das ganze dynamisch machen: Die Slides sollen aus Bildern und Texte der Joomla Beiträgen 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 dem 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 bei „Erweitert“ wählen wir 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 der 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 zusammen passen. In diesem Fall ist es „slider“. Wenn man vorhat mehr als eine Slideshow auf einer Seite anzuzeigen, muss man darauf achten, dass die „ids“ der Containers 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 einer 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 mit einem json_decode:

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

Hier ist 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 das 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 und die Slideshow zu steuern:

Codebeispiel 8 - Pfeile in SlideshowUnd fertig ist unsere Bootstrap 4 Slideshow!

Abbildung - Bootstrap 4 Slideshow

Varianten

Man kann das Joomla-Modul „Newsflash“ anstatt „Neueste“ nehmen. Newsflash bietet mehr Parametern z.B. ob Titel und / oder Introtext angezeigt werden soll. Damit kann man „if“ Abfragen in unserem Slideshow Code einbauen und der 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 z.B.

Codebeispiel 9 - Aussehen der Slideshow mit CSS ändern

bewirken, dass der Text in weiß auf einem blauen Hintergrund erscheint. 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 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 bald dort wieder interessante Overrides vorstellen zu können.

Dr. Viviana Menzel

Dr. Viviana Menzel

Während ihrer Promotion in Biologie lernte Dr. Viviana Menzel das Erstellen von Websites mit Dreamweaver und war, als DV-Beauftragte und Webadministrator, für die Erstellung und Pflege der Seiten ihrer Arbeitsgruppe und das Durchführen von Workshops für die Studenten zuständig. Auf der Suche nach einem Open Source CMS landete sie bei Joomla! Seit 2008 ist sie selbständig mit Schwerpunkt Erstellung von Websites in Joomla. Seit 2014 ist Viviana Menzel aktiv in der Joomla Community mit Beiträgen im Joomla Magazine (spanische Edition) und dem Projekt j!-over (www.j-over.de), wo Overrides für Joomla der Community zur Verfügung gestellt werden. Mehr Informationen auf www.dr-menzel-it.de
Dr. Viviana Menzel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/