Knowledgebase

Gantry 5 Layouts anpassen

Bewertung:  / 1
SchwachSuper 

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.

 

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

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

 

 

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 eine Template-Layout anwenden.

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. 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.

  • Keine Kommentare gefunden

Einen Kommentar verfassen

Als Gast kommentieren

0
Deine Kommentare erfordern die Moderation durch den Administrator
Nutzungsbedingungen.

Verwandte Beiträge

Suche - Kategorien
Suche - Inhalt
plg_search_attachments
VM - Search, Virtuemart Product

Ihr Warenkorb

 x 
Ihr Warenkorb ist noch leer.