TYPO3 - Gridelements

Links

https://www.youtube.com/watch?v=cuEKyaOtAEY

Downloads

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:

backend_layout {
  colCount = 2
  rowCount = 1
    rows {
      1 {
        columns {
          1 {
            name = Links
            colPos = 10
          }
          2 {
            name = Rechts
            colPos = 20
          }
        }
      }
   }
}

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

Grid Rendering definieren

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)

Template anpassen

ohne Fluid

Hier reicht die Standardzuordnung der Spalten im TypoScript:

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

# 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
    }
  }
}

Fluid Template

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

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.

Ü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“/>

TYPO3 - Gridelements

Inhaltsverzeichnis