Im dritten Teil unseres Tutorials bauen wir gemeinsam die Startseite unserer fiktiven Agentur-Website auf und lernen dabei, wie wir Blog-Layouts anlegen können und mithilfe von Custom Fields und Template-Overwrites unserer Kreativität freien Lauf lassen können.

Den aktuellen Arbeitsstand nach Abschluss dieses Tutorial-Teils als ZIP download: Template-Ordner [WIP]

Beginnen wir mit der Startseite und rufen uns hierzu noch einmal die gewünschte Struktur der Seite vor Augen:

Homepage structure

Die Seite wird eröffnet durch ein Mission-Statement, dass prominent im oberen Bereich der Seite platziert wird. Dieses Mission-Statement integrieren wird fest im Quellcode unser index.php. Der eigentliche Text wird mithilfeeines Language-Strings gepflegt, der anschließend bequem von Administrator*innen der Seite gepflegt und angepasst werden kann.

Unterhalb befindet sich eine Übersicht über die angebotenen Services unserer fiktiven Webagentur. Hierfür werden wir im Folgenden ein weiteres Blog-Layout zu unserem Template hinzufügen.

Im unteren Part der Seite werden zunächst einige Case-Study-Highlights in Form eines Sliders präsentiert. Dieser soll die “wichtigsten” Case-Studys der Agentur beinhalten, bevor unterhalb des Sliders weitere Case-Studies in Form eines einfachen dreispaltigen Grids präsentiert werden.

Für beide Case-Study-Darstellungsformen nutzen wir das Modul “Beiträge-Neuste” und werden hierfür zwei individuelle Layout-Overwrites erstellen.

Genug der Plänkelei - los gehts!

Introarea

Da aus technischer Sicht im Bereich des Introareas nicht mehr viel zu tun ist und es ausschließlich einer Reihe von CSS-Stylings bedarf, um das Styling entsprechend der Entwürfe anzupassen, überspringen wir diesen Schritt und machen direkt mit den Services weiter.

Services - ein eigenes Kategorie-Layout als Menüeintragstypen anlegen

Anders als für Beiträge ist es für Blog-Layouts nicht möglich, ein alternatives Layout anzulegen. Stattdessen können wir an dieser Stelle jedoch den bereits existierenden Menüeintragstyp “Kategorie-Blog” kopieren und darauf basierend einen eigenen Menüeintragstyp erstellen.

Hierzu kopieren wir uns im ersten Schritt alle Dateien mit dem Präfix “blog_” aus dem Ordner“/components/com_content/views/category/tmpl” und legen je ein Duplikat als Template-Overwrite in unserem bereits bestehenden Ordner /templates/TEMPLATENAME/html/com_content/category ab.

Da wir bereits ein Template-Overwrite für die Blog-Ansicht erstellt haben (s. Part 2 des Tutorials) sieht der Ordner im Anschluss wie folgt aus:

services 1

Im zweiten Schritt benennen wir die angelegten Duplikate so, dass sie unseren Ansprüchen entsprechen und das spätere Layout deskriptiv beschreiben. Hintergrund ist, dass wir möglicherweise nach einiger Zeit Änderungen an diesem Layout vornehmen wollen und es so im Nachhinein leichter ist, die entsprechenden Dateien, die bearbeitet werden müssen, zu identifizieren. Ich entscheide mich in diesem Zusammenhang für den Namen serviceblog und benenne die Dateien entsprechend um. Wichtig ist auch, dass die XML-Datei ebenfalls umbenannt wird, da es sich um das Manifest unseres neuen Menüeintrags handelt.

Die Ordnerstruktur sieht im Anschluss wie folgt aus:

services 2

Perfekt, nun fehlt nur noch ein kleiner Schritt, um den neu angelegten Menüeintrag im Administrationsbereich unserer Website auswählen zu können. Wir müssen die Manifest-Datei “serviceblog.xml” anpassen. Diese beinhaltete Meta-Informationen zum Menüeintragstypen (bspw. den Namen) und alle Parameter, die Administrationsbereich für den jeweiligen Menüeintragstypen angepasst werden können.

Passen wir nun den Layout-Namen in der XML-Datei an, so können wir im Anschluss bereits den neuen Menüeintragstypen im Administrationsbereich der Seite auswählen.

Es empfiehlt sich an dieser Stelle den Namen des Layouts ebenfalls in einen Language-String auszulagern, der Einfachheit halber haben wir an dieser Stelle jedoch den Titel direkt in der XML-Datei hinterlegt.

services 3

Geschafft - wir haben unseren ersten eigenen Menüeintragstypen erstellt und können diesen nun auswählen, was wir auch tun.

services 4

Anschließend haben wir wie in Teil 2 unsere Tutorials beschrieben, die Möglichkeit, das Layout flexibel an unsere Bedürfnisse anzupassen. Mit Blick auf das Design soll die folgende Funktionalität und Gestaltung erreicht werden:

Eine Überschrift und Einleitungstext sollen untereinander dargestellt werden und verlinkt sein, um zur Detailseite des jeweiligen Services zu gelangen. Hierzu soll ein ansprechender Mouseover-Effekt implementiert werden. Auf mobilen Endgeräten, die per Touch navigiert werden, wird zudem ein kleiner Pfeil unterhalb des Einleitungstext dargestellt, um zu verdeutlichen, dass weitere Informationen zu dem jeweiligen Service vorhanden sind.

Da mittlerweile grundsätzlich klar sein sollte, wie es mithilfe von Overrides möglich ist, Layouts flexibel an die eigenen Bedürfnisse anzupassen, präsentiere ich im Folgenden kurz das Endergebnis für die Datei: serviceblog_item.php die für die Darstellung der einzelnen Blog-Einträge zuständig ist:

services 5

Mit Hilfe von wenigen Zeilen (S)CSS wird auch hier aus dem eher unschönen Markup-Grundgerüst eine visuell ansprechende Kurzeinführung in die angebotenen Services unserer fiktiven Webagentur.

Case-Studies als Slider - Custom Fields zu Styling-Zwecken verwenden

Im nächsten Schritt wollen wir uns den “Highlight-Case-Studies” widmen, die in Form eines Sliders dargestellt werden sollen. Die eigentlichen Slider-Funktionalität entwickeln wir natürlich nicht selbst, sondern greifen hierzu auf den wunderbaren “Tiny Slider” (https://github.com/ganlanyuan/tiny-slider) - einen Vanilla JS Slider der flexibel genutzt werden kann.

Schauen wir uns zunächst an, wie ein einzelner Slide aufgebaut ist:

slides 1

Jeder Slide zeigt den Namen des jeweiligen Projektes (Beitragstitel), ein Bild (Beitragsbild), Veröffentlichungs-Monat und -Jahr des Projekts (Published). Darüber hinaus soll die Hintergrundfarbe je Slide variieren und wird hierzu über ein Custom-Field definiert.

Wie bereits beschrieben bauen wir den Slider auf Basis des Moduls Beiträge-Neuste (Eng.: Articles - Latest) auf und zeigen so eine bestimmte Anzahl von Beiträgen der Kategorie “Cases”, die darüber hinaus als Haupteintrag markiert wurden.

slides 2

Nachdem wir das Modul angelegt haben, erstellen wir einen Template Overwrite für mod_articles_latest und benennen diesen anschließend in “slider.php” um, um ein alternatives Layout (s. Case-Study-Layout in Teil 2 des Guides) zu erstellen.

Im Reiter Erweitert bzw. Advanced kann anschließend das gewünschte Layout ausgewählt werden.

Wie wir sehen, besteht die Standard-Ausgabe von Joomla! aus einer einfachen (unsortierten) Liste, in der die jeweiligen Beiträge verlinkt in einem Listen-Eintrag ausgegeben werden. Dies möchten wir im Folgenden so anpassen, sodass unser wesentlich komplexeres Layout mit samt aller Inhalte abgebildet werden kann.

Im ersten Schritt wollen wir hierzu zunächst alle notwendigen Informationen ausgeben, und anschließend in die gewünschte HTML-Struktur integrieren.

Wir benötigen die folgenden Bausteine je Beitrag:

  • Custom-Field-Value zur Definition der Hintergrund-Farbe
  • Beitrags-Titel (2x)
  • Veröffentlichungsdatum im Format MM-YYYY
  • Readmore-Link
  • Beitragsbild (image_fulltext)

Mithilfe der bekannten Methode <?php var_dump($item); ?> lassen wir uns zunächst alle Einträge des jeweiligen Beitrag-Objekts ausgeben. So können wir bequem die Einträge auswählen, die für den Aufbau des gewünschten Layouts relevant sind.

Darüber hinaus nutzen wir die bekannte Methode zur Ausgabe und dem Mapping von Custom-Field Inhalten zur Integration der Beitrags-Hintergrundfarbe als Inline-Style.

Das Ergebnis ist in etwa die folgende Struktur:

slides 3

Schlüsseln wir den Code nun kurz auf: 

slides 4

Alle Beiträge befinden sich innerhalb eines Containers, der als Slider-Container für unser Tiny-Slider-Script dient. Innerhalb des Containers rendern wir durch eine foreach-Schleife alle Beiträge als Child-Elemente des Containers. 

Neben einigen Klassen wird zusätzlich eine eindeutige ID vergeben, die es ermöglicht, den Slider eindeutig zu identifizieren. Ohne die Zuordnung einer eindeutigen ID wäre es im Anschluss nicht möglich, mehrere Slider-Instanzen auf einer Seite darzustellen.

slides 5

Das Markup der eigentliche Beiträge ist relativ simpel. Neben den Text- und Bildinhalten geben wir zusätzlich den im Custom-Field “Backgroundcolor” definierten Farbwert als Inline-Style des jeweiligen Beitragscontainers aus. So erreichen wir einen schönen Effekt beim Wechseln der Slides auf unserer Seite.

 

Wie man sieht, ist  es mithilfe von Template-Overwrites und Custom-Fields möglich auf Basis der Joomla!-Core-Funktionalitäten und ohne Dritterweiterungen auch komplexe Layouts problemlos umzusetzen.

Mit Blick auf die Performance unserer Website und die eingeführten Core-Web-Vitals ergänzen wir anschließend noch die Width- und Height-Attribute des Bildes um einen Layout-Shift zu vermeiden. Hierzu ergänzen wir den Code wie folgt:

slides 6

Hierzu speichern wir die Maße des Bildes zunächst in einem Array und geben diese anschließend in unserem Markup aus.

Geschafft, wir haben die Startseite um einen Slider auf Basis des Moduls Beiträge-Neuste ergänzt.

Weitere Case-Studies  - ein zweites Layout für mod_article_latest erstellen

Nach dem bekannten Muster erstellen wir nun noch den letzten fehlenden Overwrite zur Darstellung der Inhalte auf unserer Startseite. Wir legen zunächst eine weitere Kopie der Standard-Joomla-Ausgabe für das Modul “Beiträge Neuste” an und benennen die Datei entsprechend unserer Wünsche.

morework 1

Anschließend modifizieren wir auch hier das Markup so, dass wir die gewünschte Struktur für unsere Inhalte erreichen und Ordnen dem angelegten Modul das gewünschte Layout zu.

morework 2

Geschafft, die Startseite unserer fiktiven Webagentur steht. Wir haben gelernt, wie man zusätzliche Layouts für Komponenten und Module anlegt und diese flexibel und kreativ mit Custom-Fields erweitern kann.

Overwrites sind bereits in Teil 2 unseres Tutorials beschrieben, das wichtigste Werkzeug beim Aufbau individueller Joomla-Templates. Beherrscht man dieses Werkzeug, sind der Kreativität keine Grenzen gesetzt - es lohnt sich also mit Overwrites vertraut zu machen.

Wir hoffen, dass wir euch auch in diesem Teil unserer Reihe einen spannenden Einblick in den Aufbau von individuellen Joomla-Templates geben können. Weiter geht es in Teil 4 unserer Reihe mit der Team-Seite.

Bei Fragen und Anregungen sind wir natürlich gerne per Mail oder in den sozialen Medien für euch da. Bis dahin wünschen wir viel Spaß beim ausprobieren.