TYPO3 - Gridelements: Unterschied zwischen den Versionen
| Zeile 13: | Zeile 13: | ||
=== Raster erstellen === | === Raster erstellen === | ||
Mit dem Assistenten. Das sieht nachher z.B. so aus: | Mit dem Assistenten. Das sieht nachher z.B. so aus: | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="typoscript"> |
backend_layout { | backend_layout { | ||
colCount = 2 | colCount = 2 | ||
| Zeile 34: | Zeile 34: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
=== Grid Rendering definieren === | === Grid Rendering definieren === | ||
<syntaxhighlight lang="typoscript"> | <syntaxhighlight lang="typoscript"> | ||
Version vom 21. Juli 2016, 15:12 Uhr
Links
https://www.youtube.com/watch?v=cuEKyaOtAEY
Einführung
Ähnlich wie im Backend Layout Editor werden Raster definiert, die man dann einsetzen kann. Das Rendering wird über TypoScript definiert.
Quickstart
- Extension gridelements installieren
- Ordner für gridelements anlegen
- Grid Layout Raster erstellen
- Rendering der Grids definieren (TypoScript)
Raster erstellen
Mit dem Assistenten. Das sieht nachher z.B. so aus:
backend_layout {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Links
colPos = 10
}
2 {
name = Rechts
colPos = 20
}
}
}
}
}
Grid Rendering definieren
tt_content.gridelements_pi1.20.10.setup{
# ID des ge
1 < lib.gridelements.defaultGridSetup
1{
columns{
# colPos ID
10 < .default
10.wrap = <div class="s12 m8">|</div>
# colPos ID
20 < .default
20.wrap = <div class="s12 m4">|</div>
}
wrap = <div class="row">|</div>
}
}
Gridelements und Fluid Styled Content
In TYPO3 v7 wird das alte css-styled-content durch fluid-styled-content ersetzt. Damit kann man das Rendering der Inhalte in Fluid-Templates überschreiben anstatt TypoScript zu benutzen. Siehe auch: [[1]]. Das eröffnet neue Möglichkeiten.
Beispiel: Gridelements und Bootstrap
Siehe auch: http://wiki.zone30.info/wikizone/index.php/TYPO3_-_fluid_styled_content#Beispiel:_Layoutfeld_mit_Bootstrap_Klassen_f.C3.BCr_Fluid_Styled_Content für den Einsatz von Bootstrap ohne Gridelements nur mit Basis TYPO3.
Gridelements bieten sich für Gridbasierte CSS-Frameworks an, da die Grundidee der Spalten ähnlich ist. Mit Gridelements kann man auf dem vorhandenen Raster verschiedene Spaltensetups erzeugen.
- 1. Grids erstellen.
