2-Spalten All-in-One FCE mit Gridelements und Twitter Bootstrap

Warum für jede 2-Spalten Variante ein eigenes Gridelement (CE Backend Layout) anlegen, wenn dies doch über ein Gridelement abgebildet werden kann.

Anwendung findet dies in Zusammenhang mit dem Gridsystem von Twitter Bootstrap. Alle Kombination der 12 Grids können mit einem FCE abgebildet werden. Hierbei unterstützt uns TypoScript, der umfangreiche Konfigurationsbaukasten von TYPO3.

TYPO3 All-in-One FCE Gridelements Twitter Bootstrap
TYPO3 All-in-One FCE Gridelements Twitter Bootstrap

Über eine per Flexform definierte Auswahlliste lassen sich alle Kombination der Twitter Bootstrap Grids setzen. Angegeben werden die Möglichkeiten in Prozent (entsprechend gerundet). Dahinter stehen dann die jeweiligen Kombinationen, z.B. 3-9 für Aufteilung 25% / 75%.

Flexform Konfiguration

  


	
		1
	
	
		array
		
			
				
					
					
						select
						
							
								8 / 92
								1-11
							
							
								17 / 83
								2-10
							
							
								25 / 75
								3-9
							
							
								33 / 66
								4-8
							
							
								42 / 58
								5-7
							
							
								50 / 50
								6-6
							
							
								58 / 42
								7-5
							
							
								66 / 33
								8-4
							
							
								75 / 25
								9-3
							
							
								83 / 17
								10-2
							
							
								92 / 8
								11-1
							                                                   
						
						0
						1
						1
					
				
			 
		                        
	

HTML Fluid Template

  
{data.tx_gridelements_view_column_0}
{data.tx_gridelements_view_column_1}

Es werden zwei Variablen im Fluidtemplate definiert. {colLeft) und (colRight} werden dann über die TypoScript Konfiguration gefüllt.

TypoScript Konfiguration

  
tt_content.gridelements_pi1.20.10.setup {
  NN < lib.gridelements.defaultGridSetup
  NN {
    cObject = FLUIDTEMPLATE
    cObject {
      
      file = fileadmin/Path/to/Grid-2-col.html
      
      variables {
        colLeft = TEXT
        colLeft.data = field:flexform_cols
        colLeft.split {
          token = -
          returnKey = 0
          cObjNum = 1 
          1.current = 1 
        }
        
        colRight = TEXT
        colRight.data = field:flexform_cols
        colRight.split {
          token = -
          returnKey = 1
          cObjNum = 1 
          1.current = 1
          
        }
        
      }
    }
  }   
}

NN muss gegen die uid des angelegten CE Backend Layout (Gridelement) ersetzt werden.
Wir bedienen uns der TYPO3 split Funktion um das gewählte Value der Select Box zu zerlegen und den beiden definierten Variablen zuzuweisen.

Über dieses Setup erhält man ein Rasterelement (Gridelements), welches für alle Twitter Bootstrap 2-Spalten Variationen eingesetzt werden kann.