Tutorial: Alternative Layouts für Artikel und Module

Written by | 01 May 2013 | Published in 2013 May
Template Overrides sind der goldene Weg, die Darstellung deiner Joomla! Seite anzupassen. Aber wie erreicht man ein konsistent alternatives Layout für Artikel oder Module über die gesamte Seite? Die konsequente MVC Architekur von Joomla! vereinfacht solche Vorhaben mit dem  "Alternatives Layout" Feature.

Falls du je ein Template Override erstellt hast, dürfte dir das Folgende ziemlich bekannt vorkommen. Der einzige Unterschied zum Override ist der, dass alternative Layouts als Option unter dem Punkt 'Alternatives Layout' neben dem Standard-layout aufgelistet und somit zur Verfügung stehen. Overrides hingegen ersetzen den Standard komplett und ohne Wahlmöglichkeit. Die folgenden Beispiele basieren auf Joomla! 2.5.x, sollten aber auch unter 3.x funktionieren.

Alternatives Layout für Beiträge:

  1. Lokalisieren des Standard-Layouts unter components/com_content/views/article/tmpl/default.php
  2. Kopieren der Datei in den Template Ordner: templates/[dein_template]/html/com_content/ (erstelle diese Ordnerstruktur, falls sie noch nicht existiert)
  3. Ändere den Dateinamen. Wir nennen ihn in diesem Beispiel myarticle.php

myarticle

Jetzt kann der gesamte PHP Code geändert werden; wir ändern hier zum Beispiel dass die Icons für Drucken und für Mailen anstatt unterhalb nun über dem Beitragstitel stehen sollen. Und ferner ändern wir den Tag für den Titel des Beitrags auf H1.

article overrides

Um das Ergebnis anzuschauen, editieren wir einen Beitrag und gehen zu Beitragsoptionen => Alternatives Layout und wählen das eben erstellte Layout anstelle des Standards. 

alt-article-layout

Im Frontend sieht das im Vergleich jetzt so aus (oben Standard- unten das myarticle-Layout):

article layouts

Alternatives Layout für Module:

Dasselbe Vorgehen funktioniert auch für das layout von Modulen! Das folgende Beispiel ändert das Custom HTML Modul (=Eigene Inhalte / Leeres Modul)

  1. Lokalisieren des Standard-Layouts unter modules/mod_custom/tmpl/default.php
  2. Kopieren der Datei in den Template Ordner: templates/[deinr_template]/html/mod_custom/
  3. Ändere den Dateinamen. Wir nennen ihn in diesem Beispiel mymodule.php

mymodule

Das neue layout wird in den Erweiterten Optionen eines Moduls unter 'Alternatives layout' aufgelistet.

alt-module-layout

Alternative Layouts können für fast jeden Modultyp geschrieben werden. Kollege Steve Burge hat ein ausgeklügeltes Beispiel für ein alternatives Menü Modul geschrieben. Der Artikel kann hier (in Englisch) nachgelesen werden: How to Use Joomla's Alternative Layouts for Modules

Tipps: Die ganze sache macht nur Sinn, wenn es notwendig ist, Tags oder Positionen zu ersetzen oder zu editieren. Für das Ändern von Stilen oder farben macht es mehr Sinn, die entsprechenden Änderungen auf der Ebene von CSS vorzunehmen. Denkt daran, dass man auch mit Suffixen von (Modul)klassen Module anders darstellen lassen kann.

Ich hoffe, dieser kurze Abriss hat gezeigt, wie mächtig die alternativen Layouts sein können. Praktisch alles, was Joomla! in den Core-layouts bietet, kann editiert und geändert und euren Wünschen angepasst werden mit dieser Methodik.

Und wenn du ein Entwickler von Templates bist, denke daran, dass diese 'Alternativen Layouts' auch in deine Templates eingebaut werden können. Dies wird leider von (noch) zuwenigen Template-Schmieden gemacht. 

Gehet hin und seid kreativ mit alternativen Layouts (und bitte: Vorsichtig sein, wenn ihr in PHP nicht besonders erfahren seid!).

Habt ihr schon alternative Layouts geschrieben oder davon Gebrauch gemacht? Kommentare bitte unten :-)

 

Das Original dieses Artikels wurde von Scott Greenwald geschrieben und erschien im Joomla Magazine 2013 February

Read 25270 times Tagged under German
Chris Hoefliger

Chris Hoefliger

Chris got involved in Joomla a few years ago (when 1.5.14 was the flavour of the day). But he stayed with Joomla! ever since, is eager and wants to learn the ropes...
«I have a small company and do web pages. I speak both German and English. I'd like to see a bit more content here in my native language and - oops got caught. Yep, I'm trying to do a bit translation work for the team»