Gantry 5 Layouts anpassen

Abgelaufen

Wie passt man für Gantry 5 das Layout nach eigenen Bedürfnissen an - Erstellung eigener Outlines

Eigene Outline anlegen.

Outlines sind die Vorlagen für Gantry-Layouts. Von diesen können Layouts abgeleitet werden in dem ein Layout erstellt wird und dann über den load-Button dieses Outline auf das neue Layout angewendet wird. Das Layout erhält dann die vollst. Struktur wie im Outline angelegt, allerdings kann man für späteteres Überschreiben eines Layouts mit einem Outline festlegen, wie konsequent das Überschreiben erfolgen soll. So können z.B. bereits vorgenommene Modifikationen im Layout erhalten bleiben und trotzdem neue oder geänderte Strukturen aus dem Outline geladen werden.

Um nun ein eigenes Outline anzulegen, geht man in den Ordner templates/g5_helium/layouts. Die hier vorhandenen YAML-Scripte beschreiben die vorhandenen Outlines. Entweder kopiert man sich eine als Ausgangsbasis geeignete Vorlage mit eigenem Namen oder man erstellt von grundauf per Editor seine eigenen Vorlage.

Häufig findet man als Vorlagen die default.yaml, welche die Standardvorlage (Base-Outline) ist, welche meist auf alle Projektseiten angewendet wurde. Dann gibt es häufig eine home_-_particle.yaml, welche beispielhaft eine Layout mit Particeln für die HomePage liefert. Das trifft so meist bei fertigen RocketTheme-Templates für Joomla, Wordpress oder Grav zu. Weitere Outlines sind für die Error- und Offline-Page bestimmt.

Noch besser ist es die neue eigene Outline-Datei nicht in das o.g. Gantry-Core-Verzeichnis zu legen, sondern das Overrideprinzip von Gantry5 auszunutzen und die Outline-Datei in das custom-Verzeichnis zu legen. Damit ist es z.B. auch möglich, durch gleichlautende Namesvergabe eine gleichnamige Outline-Datei zu 'überschreiben'. So kann man sich z.B. aus dem Verzeichnis templates/g5_helium/layouts/ die default.yaml-Datei in das Verzeichnis templates/g5_helium/custom/layouts/ kopieren, ohne umzubenennen. In dieser macht man dann die geünschten Änderungen und beim Laden der Standard-Outline (per load-Button) in der Gantry-Layout-Verwaltung, wird dann diese Custom-Version verwendet.

Mit diesem Know-How kann man z.B. auch aus anderen Gantry-Templates-Themes Outline-Dateien hernehmen und in das Zielprojekt einpflanzen und verwenden.

Hier findet man eine engl. Beschreibung über die Möglichkeiten der Layouterstellung mit Gantry 5 und der zu verwendenden Syntax: http://docs.gantry.org/gantry5/advanced/creating-layout-presets

 

Layout-IDs / Template-ID / Config-Nummern

Jeder Template-Stil (theme, style) in Joomla hat ein ID unter der dieses in Joomla verwaltet wird. Wenn man die Liste der Stile im Joomla per im Adminbereich unter Erweiterungen > Templates > Stile aufruft, werden die ID in der letzten Spalte angezeigt.

Auch Gantry 5 arbeitet mit diesen Style-ID's. Wenn man z.B. ein Template-Stil durch Kopieren eines anderen vorhandenen erzeugt, wird hierfür durch Gantry 5 ein neuer Pfad im Verzeichnis /templates/TEMPLATE/custom/config/ angelegt unter Verwendung eben dieser Style-ID (z.B. /templates/meintemplate/custom/config/12/). Unter diesem Style-ID-Pfad gibt es dann jeweils die 4 YAML-Scripte die den Konfig.registern in der Gantry-5-Style-Konfiguration entsprechen:

Datei entspr. Konfig-Register Bedeutung/Inhalt
assignments.yaml Assignments Verbindungen zu den Menü/Seiten
index.yaml - Sämtlich Namen von Sectionen, Positionen (Rows), Modulpositionen und Particeln sowie Vererbungsregeln
layout.yaml Layout Layout-Festlegungen wie Reihenfolge, Titel, Attribute, Block-Daten,
styles.yaml Style Stil-Festlegungen wie Farben, Hintergrundbilder etc. wenn diese nicht aus der Base-Outline vererbt wurden, also im Style modifiziert wurden.

Im Gegensatz zu dieses J!-Template-Styles hat Gantry 5 noch die Basic Outline, welches quasi ja auch wie ein template funktioniert. Dieses ist aber lediglich eine Vorlage zum Beispiel zum Zweck der zentralen Konfiguration und Vererbung. Diese hat also keine Style-ID und taucht deshalb auch nicht mit einer Nummer i.o.g config-Verzeichnis auf. Diese Base Outline ist die Default-Version und hat sein eignes Verzeichnis unter /templates/TEMPLATE/custom/config/default/. Und hier liegen ebenfalls o.g. YAML-Dateien außer der Assignment.yaml, weil das Base-Outline natürlich keiner Seite zugewiesen werden kann.

 

 

Um nun eigenen Strukturen im Preset anzulegen, öffnet man eine so erstellte Vorlage zum Editieren. Der wohl wichtigste Bereich nach dem Kopf ist der Bereich layout: Hier werden die gewünschten Sectionen und Container angelegt.

Hierbei gibt es grundsätzlich zwei Typen, die einfache Section (z.B. header, slideshow, showcase, feature, footer, etc) und Container für die Aufnahme von seitlich nebeneinander angeordneten Sectionen (z.B. sidebar, mainbar, oder SlideLeft, SlideCenter, SlideRight etc.)

Ebenfalls ist zu unterscheiden zwischen dieser Schreibweise navigation: { } die nur als leere Container angelegt sind, und dieser /navigation/: - - ... mit folgenden Anweisungen für Inhalte/Strukturen

So werden dann z.B. Joomla-typische Modulpositionen erzeugt.

  /testimonials/:
    -
      - position-position-6762

Wichtig bzlg. der Unterscheidung dieser beiden Schreibweise /section/: und section: ist folgendes zu wissen:

  • Die Syntax-Form /section/: Diese Schreibweise ermöglicht nicht nur per nachfolgenden Anweisungen eine detailiertere vorgegebene Modulpositionen-Struktur, sondern sie erzwingt diese auch wenn ich im Adminbereich per Load-Button eine Outline Layout lade. Einstellungen die davor schon getroffen worden sind, werden dann ersetzt.
  • Die Syntax-Form section: verhält sich da anders. Diese überschreibt nicht schon im Adminbereich in der Section angelegte Modulpositionen.

Wenn man z.B. in der Layout-Datei mit section:{ } gearbeitet hat, dann kann man hier recht einfach mal ein Verschiebung in der Reihenfolge für die Sectionen vornehmen. Wenn man dann diese Outline-Datei lädt, wird zwar die Reihenfolge in diesem Template-Layout übernommen, aber bereits getroffnen Modul-Positions- und evtl. Particle-Einstellungen dafür bleiben erhalten.

Weitere Informationen sind hier zu finden: http://docs.gantry.org/gantry5/advanced/creating-layout-presets

Möchte man einen Container mit drei Spalten erhalten , z.B. zwei Sitebars und einen zentralen Main-Teil, kann man das so erreichen:

  /container-features/:
    -
      -
        'FeaturesLeft 20': {  }
      -
        'FeaturesCenter 60': {  }
      -
        'FeaturesRight 20': {  }

Das Ergebnis sieht dann ca. so aus:

Eine so erzeugte Vorlage (Preset) kann man dann über den load-Button auf ein Template-Layout anwenden.

Beachte, dass es im dem Load-Dialog zwei Register gibt, einen für Presets und einen Für Outlines. Für die Übernahme der Layout-Einstellungen ist es natürlich sinnvoller über das Outlines-Register die entspr. User-Outline auszuwählen.

 

Jetzt könnte man wiederum im Layout-Manager diverse Einstellungen vornehmen, z.B. im Layout in die "Sectionen" zunächst weitere "Grid-Zeilen" und dann verschieden "Blöcke" wie Modulpositionen oder Particle platzieren. Wenn man solche Änderungen dann speichert, werden diese als Custom-Konfigurationsdatei unter /templates/g5_namexy/custom/config/ unter einer fortlaufenden Nummer als Unterpfad abgelegt wie oben beschrieben. In diesem Fall relevant sind dortige layout.yaml. Den Inhalt dieser kann man sich dann in seine Preset-Datei kopieren. So kann man sich auch verschiedene Entwicklungsstufen bei Tests ablegen und kann sich diese jederzeit als Preset laden und man kann nach Belieben manche Dinge im Layout-Manager zusammenschieben und andere Dinge elegant im Editor durch Bearbeiten der YAML-Datei vornehmen. Sinnvollerweise sollte man bei Kopieren auch die styles.yaml und index.yaml mitnehmen.

Ändert man in der Template-Konfiguration unter dem Register Layout das Base Outline, dann werden die dortigen Änderungen gespeichert in der templates/rt-meintemplate/custom/config/default/layout.yaml. Auch hier steht das Pfad-Element /default/ für die Base-Outline.

Folgendes sollte beachtet werden in einem Beispielszenario: Wir haben im Backend unser Base-Outline geändert. Das wird durch Gantry beim Speichern in die o.g. custom/config/default/layout.yaml gespeichert. Nun kopieren wir uns z.B. diesen Scriptinhalt in eine eigene layout-Datei z.B. templates/rt_protean/layouts/meineoutline-default.yaml. Diese könnten wir im Editor jetzt auch noch weiter modifizieren. Nun wollen wir im Backend unsere Standard-Base Outline in der Weise ändern, in dem wir unsere drüberladen, um z.B. auf alle Folgeseiten diese eigene Base-Outline anzuwenden. Also klicken wir im Base-Outline-Layout-Register auf den load-Button ganz oben rechts. In der Liste erscheint dann eine Meinoutline Default zur Auswahl.

Achtung! In diesem Dialog existiert oben eine Checkbox Keep the current Particles while chanching Presets. Wenn diese aktiviert ist, bleiben Particle-Einstellungen die in diesem Base-Outline schon früher vorgenommen wurden oder durch das Template im Auslieferungszustand konfiguriert waren erhalten, anderenfalls werden diese konsequent überschrieben und gehen damit verloren.

Wenn man jetzt die o.g. Meinoutline Default auswählt wird diese nach dem Speichern der Layout-Konfiguation übernommen. Auf der Website wirkt sich das jedoch nicht gleich aus. Der Grund dafür ist einfach und logisch: Das Base-Outline ist ein Layout, welches selbst ja keiner Seite zugewiesen ist. Statt dessen gibt es ja ein Layout für die Frontpage oder Folgeseiten. Entweder man muss in diesen ebenfalls dieses Meinoutline Default anwenden oder die Vererbung entspr. eingestellt haben.

 

Hinzufügen eine Style-Blocks für eine neue Section

Angenommen Sie haben über oben beschriebene Modifkationen eine neue Section ins Layout eingefügt. Nun möchten Sie für diese Section Konfigurationsparameter wie Hintergrundfarbe, Hintergrundbild, Textfarbe etc. zur Verfügung stellen, so dass diese über den Registerreiter Styles als Konfigblock erscheinen.

Das geht einfach über folgende Verfahrensweise:
Alle diese Layout-Konfigurationsblöck liegen jeweils als separate YAML-Dateien im Verzeichnis templates/rt_salient/blueprints/styles. Klonen Sie einfach eine diese Scripte und benennen diese so, wie Ihre Serction heißt. Dann öffnen Sie diese YAML-Datei und ändern in name: und in description: die Sectionsbezeichnung. Das wars. Wenn Sie jetzt o.g. Register für Ihr Layou anschauen, werden Sie diesen Style-Block vorfinden.