Bearbeiten von „TYPO3 - Gridelements“

== Links ==
https://www.youtube.com/watch?v=cuEKyaOtAEY
== Downloads ==
[[Datei:Typo3-bootstrap3-gridelements.zip|mini]]

== 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)
* '''Template''' anpassen

=== Raster erstellen ===
Mit dem Assistenten. Das sieht nachher z.B. so aus:
<syntaxhighlight lang="typoscript">
backend_layout {
  colCount = 2
  rowCount = 1
    rows {
      1 {
        columns {
          1 {
            name = Links
            colPos = 10
          }
          2 {
            name = Rechts
            colPos = 20
          }
        }
      }
   }
}

</syntaxhighlight>
Achtung: Aufpassen die Nummern der Spalten (colPos) teilt sich Gridelements mit den Standardspalten (0 bis 4) aber auch den Backendlayouts.

=== Grid Rendering definieren ===
<syntaxhighlight lang="typoscript">
tt_content.gridelements_pi1.20.10.setup{
  # ID des gridelement
  1 < lib.gridelements.defaultGridSetup
  # oder mit dem Alias Namen: MY_ALIAS < 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>
  }
}

# if you want to provide your own templating, just insert a cObject here
# this will prevent the collected content from being rendered directly
# i.e. cObject = TEMPLATE or cObject = FLUIDTEMPLATE will be available from the core
# the content will be available via fieldnames like
# tx_gridelements_view_columns (an array containing each column)
# or tx_gridelements_view_children (an array containing each child)
# tx_gridelements_view_column_123 (123 is the number of the column)
# or tx_gridelements_view_child_123 (123 is the UID of the child)
</syntaxhighlight>

=== Template anpassen ===
==== ohne Fluid ====
Hier reicht die Standardzuordnung der Spalten im TypoScript:
<syntaxhighlight lang="typoscript">

</syntaxhighlight>

== Gridelements mit Fluid ==
Hier muß man folgendes anpassen:
* Im TypoScript des GE kann man es einem Fluidtemplate zuweisen
* Im Fluidtemplate bindet man die Inhalte über den data Viewhelper ein.
=== Gridrendering ===
<syntaxhighlight lang="typoscript">
# Fluid-Template zuweisen
tt_content.gridelements_pi1.20.10.setup {
  # 1 ist die ID des entsprechenden Gridelements
  1 < lib.gridelements.defaultGridSetup
  1 {
    cObject = FLUIDTEMPLATE
    cObject {
      file = fileadmin/tmpl/gridelements/2col_1-1.html
    }
  }
}
</syntaxhighlight>

=== Fluid Template ===
<syntaxhighlight lang="html5">
<div class="row">
  <div class="col-md-6 col-xs-12">
    <f:format.raw>
      {data.tx_gridelements_view_column_10->f:format.raw()}
    </f:format.raw>
  </div>
  <div class="col-md-6 col-xs-12">
    <f:format.raw>
      {data.tx_gridelements_view_column_20->f:format.raw()}
    </f:format.raw>
  </div>
</div>
</syntaxhighlight>

== 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.
=== 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.
== Überschriften der Content Elemente in Gridelements ==
Im TypoScript
 tt_content.gridelements_pi1.10 =< lib.stdheader
Im Fluid Template (mehr Kontrolle):
 <f:cObject data=“{data}“ typoscriptObjectPath=“lib.stdheader“/>