Backend-Layouts

Backend - Liste - Weltkugel - runterscrollen - Backend Layout

Backend - Seite bearbeiten - Erscheinungsbild - Backend-Layout (nur für diese Seite) - erstelltes Layout anwählen 

Backend Layouts ermöglichen es, zu definieren, wie verschiedene Spalten und Abschnitte einer Webseite im Backend angeordnet sind. Sie bieten eine visuelle Darstellung der Vorlagenstruktur für den Inhalt. Man kann ein Backend Layout auch nutzen um eine weitere Klasse auf bestimmte Seiten zu bekommen. 

Man kann ein neues erstellen oder eines das bereits existiert anpassen und umbenennen. Hierbei kann man verschiedene Spalten/ Zellen hinzufügen oder entfernen. Wenn man sie bearbeitet kann man ihnen einen Namen und eine Spaltennummer geben.

 

Beispiel - Anmeldebalken

Bei gymnasium.ch habe wir ein Backendlayout genutz um den Anmeldebalken auf den Unterseiten darzustellen. Hierbei haben wir das Element direkt in den footer getan. 

Man kann contitions auch verwenden um Klassen zu definieren wie hier:

<div id="footer" class="ym-grid footer {f:if(condition: '{pageLayout} != 2', then: 'ig-padding-top')} ig-padding-bottom-k {f:if(condition: '{pageLayout} == 2', then: 'no-line')}">

Wenn das pageLayout 2 NICHT gewählt ist soll ig-padding-top erscheinen. Wenn pageLayout2 gewählt ist soll die Klasse: 'no-line' erscheinen. Diese kann man dann ganz normal im css bearbeiten. Dies ist sehr praktisch.

Beispiel - Schweizerkarte

  • TYPO3 - Liste - Weltkugel - Backend-Layouts - Inhalt & Bild - bearbeiten
  • so falten damit es einen oberen und einen unteren Bereich hat
  • Hauptbereich = id 0
  • oberer Bereich umbenennen - Headbereich - id 98
  • Auf der Startseite das Backend-Layout anwählen
  • im  EXT:ig_layout/Resources/Public/Css/20_layout.scss das .pageLayout-3 auf 100% ändern
  • EXT:ig_layout/Resources/Private/Templates/Template.html

                    <div class="headerbereich">

                        <ig:col colPos="0" dropzone="0" pageUid="{pageUid}"

                            >{pageContent98}</ig:col>

                    </div>

  • Im css gestalten

Beispiel - Slider

Mit einem Backend Layou kann man bspw. kontrollieren auf welchen Seiten ein Slider/ pageImage sein soll und auf welchen nicht. Dazu geht man wie folgt vor:

  1. Backend - Liste - Weltkugel - runter scrollen - Backend-Layout

  2. eines auswählen und bearbeiten

  3. mithilfe des Pfeils und des Minus die Spalten auf eine kürzen

  4. Die Zelle bearbeiten - umbenennen - Spaltennummer eingeben (in diesem Fall 0)

  5. Speichern

  6. Im 20_layout.scss nach "pageLayout-3" suchen und die Weite auf 100% umstellen

  7. Im Template.html "<f:if condition="{pageLayout} != 3">" im pageImageSlider ganz oben einfügen. Dies bedeutet: wenn es das pageLayout 3 ist, soll der Slider nicht angezeigt werden. (ds if kann man von weiter unten im Template kopieren und die Nummer anpassen)

  8. Backend - Seite bearbeiten - Erscheinungsbild - Backendlayout -  erstelltes Layout anwählen

Nach diesen Schritten sollte auf den gezielten Seiten kein Slider mehr vorhanden sein.

backend
template.html