TYPO3 - Gridelements: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 32: Zeile 32:
 
== Gridelements und Fluid Styled Content ==
 
== 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: [[http://wiki.zone30.info/wikizone/index.php/TYPO3_-_fluid_styled_content|TYPO3_-_fluid_styled_content]]. Das eröffnet neue Möglichkeiten.
 
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: [[http://wiki.zone30.info/wikizone/index.php/TYPO3_-_fluid_styled_content|TYPO3_-_fluid_styled_content]]. Das eröffnet neue Möglichkeiten.
−
 
−
=== Beispiel 1: Bootstrap mit Gridelements und Fluid Styled Content ===
 
−
In diesem Beispiel möchten wir über das Layout-Feld im Backend Bootstrap Klassen setzen und die Fluid Styled Content Templates so überscheiben, daß sie dementsprechend gesetzt werden.
 
−
 
−
==== 1. Layoutfeld mit Bootstrap Klassen ausstatten ====
 
−
 
−
TSconfig
 
−
<syntaxhighlight lang="typoscript">
 
−
TCEFORM.tt_content {
 
−
  layout {
 
−
    altLabels {
 
−
      1 = 1 Spalte
 
−
      2 = 2 Spalten
 
−
      3 = 3 Spalten
 
−
    }
 
−
    addItems{
 
−
      4 = 4 Spalten
 
−
      5 = 5 Spalten
 
−
      6 = 6 Spalten
 
−
      7 = 7 Spalten
 
−
      8 = 8 Spalten
 
−
      9 = 9 Spalten
 
−
      10 = 10 Spalten
 
−
      11 = 11 Spalten
 
−
      12 = 12 Spalten
 
−
    }
 
−
  }
 
−
}
 
−
</syntaxhighlight>
 
−
==== 2. Templates aus Fluid Styled Content bearbeiten ====
 
−
Um die Ausgabe von FSC zu verändern kopiert man die Originaldateien, ändert die Pfade zu den Templates in den Constants und ändert diese dann.
 
−
* Kopieren aus typo3/sysext/fluid_styled_content
 
−
* an neuen Ort z.B. in einer Distribution oder in den fileadmin ordner
 
−
* TypoScript Konstanten überschreiben, wenn nicht alle Dateien kopiert wurden arbeitet TYPO3 mit den alten Dateien als Fallback
 
−
<syntaxhighlight lang="typoscript">
 
−
resourceDir = EXT:myextensionname/Resources
 
−
# ...
 
−
# Fluid Styled Content Templates neu zuweisen
 
−
styles.templates {
 
−
templateRootPath = {$resourceDir}/FluidStyledContent/Templates
 
−
partialRootPath = {$resourceDir}/FluidStyledContent/Partials
 
−
layoutRootPath = {$resourceDir}/FluidStyledContent/Layouts
 
−
}
 
−
</syntaxhighlight>
 
−
* Templates anpassen
 

Version vom 14. Juli 2016, 14:38 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
  • Grids erstellen
  • Rendering der Grids definieren

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.