Eigene Kontent-Elemente mit Typo3 7.6

Aus Debacher-Wiki
Wechseln zu:Navigation, Suche

Nach dem Ende von TemplaVoila und der Umstellung des Templating auf Fluid musste ich mir für eigene Kontent-Elemente eine neue Umgebung suchen. Nach den Beschreibungen kommen in Frage:

  • Mask
  • DCE
  • Gridelements


Meine Gridelemente

Wie bereits auf der Seite Einrichten_der_Typo3_7.6_Installation beschrieben scheiden bei mir (momentan) die beiden ersten Extensions aus, es bleibt also Gridelements. Wenn die zugehörige Extension installiert ist, dann kann man auf der Seite Backend-Layouts über die Funktion Liste Elemente vom Typ CE Backend Layout erzeugen (auch hier immer wieder auf die ID und damit ggf. die Reihenfolge achten.

Typo3-76-Backend1.png

Im ersten Reiter gibt man einen Namen, eine Beschreibung und ggf. eine Icon-Datei an. Wichtig ist vor allem der Inhalt im zweiten Reiter.

Typo3-76-Backend2.png

Hier wird im Prinzip wieder nur ein Backend Layout erstellt, das dann später mit Typoscript ausgewertet wird.

2 Spalten 25:75

Sub-25-75.gif

backend_layout {
	colCount = 4
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Spalte Links
					colspan = 3
					colPos = 110
				}
				2 {
					name = Spalte Rechts
					colPos = 111
				}
			}
		}
	}
 }

2 Spalten 33:66

Sub-33-66.gif

backend_layout {
	colCount = 3
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Spalte Links
					colPos = 110
				}
				2 {
					name = Spalte Rechts
					colspan = 2
					colPos = 111
				}
			}
		}
	}
 }

2 Spalten 50:50

Sub-50-50.gif

backend_layout {
	colCount = 2
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Spalte Links
					colPos = 110
				}
				2 {
					name = Spalte Rechts
					colPos = 111
				}
			}
		}
	}
 }

2 Spalten 66:33

Sub-66-33.gif

backend_layout {
	colCount = 3
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Spalte Links
					colspan = 2
					colPos = 110
				}
				2 {
					name = Spalte Rechts
					colPos = 111
				}
			}
		}
	}
 }

2 Spalten 75:25

Sub-75-25.gif

backend_layout {
	colCount = 4
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Spalte Links
					colspan = 3
					colPos = 110
				}
				2 {
					name = Spalte Rechts
					colPos = 111
				}
			}
		}
	}
 }

3 Spalten 33:33:33

Sub-33-33-33.gif

backend_layout {
	colCount = 3
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Spalte Links
					colPos = 110
				}
				2 {
					name = Spalte Mitte
					colPos = 111
				}
				3 {
					name = Spalte Rechts
					colPos = 112
				}
			}
		}
	}
 }

UDRoundBox

FCE UDroundBox.png

backend_layout {
	colCount = 1
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Inhalt
					colPos = 110
				}
			}
		}
	}
 }

Das Typoscript dazu

Der eigentliche Trick steckt auch hier wieder im Typoscript. Hier wird auf die ID des Datensatzes Bezug genommen und dann auf die Spaltennummer. Hier ist wichtig, dass die Spaltennumern sich zwischen den _einzelnen Kontent-Elementen nicht unterscheiden, dadurch kann man die Kontent Elemente später auf der Seite wechseln ohne den Inhalt neu zuordnen zu müssen.

tt_content.gridelements_pi1.10 =< lib.stdheader
 tt_content.gridelements_pi1.20.10.setup {
 1 < lib.gridelements.defaultGridSetup
 1 {
   columns {
    110 < .default
    110.wrap = <div class="col-md-3 equal" id="sp2-25-75-1">|</div>
     
    111 < .default
    111.wrap = <div class="col-md-9 equal" id="sp2-25-75-2">|</div>
 
   }
 wrap = <div class="container-fluid" id="sp2-25-75"><div class="row equalheight">|</div></div>
 }
 
 2 < lib.gridelements.defaultGridSetup
 2 {
   columns {
    110 < .default
    110.wrap = <div class="col-md-4 equal" id="sp2-33-66-1">|</div>
     
    111 < .default
    111.wrap = <div class="col-md-8 equal" id="sp2-33-66-2">|</div>
 
   }
 wrap = <div class="container-fluid" id="sp2-33-66"><div class="row equalheight">|</div></div>
 }
 
 3 < lib.gridelements.defaultGridSetup
 3 {
   columns {
    110 < .default
    110.wrap = <div class="col-md-6 equal" id="sp2-50-50-1">|</div>
     
    111 < .default
    111.wrap = <div class="col-md-6 equal" id="sp2-50-50-2">|</div>
 
   }
 wrap = <div class="container-fluid" id="sp2-50-50"><div class="row equalheight">|</div></div>
 }
 
 4 < lib.gridelements.defaultGridSetup
 4 {
   columns {
    110 < .default
    110.wrap = <div class="col-md-8 equal" id="sp2-66-33-1">|</div>
     
    111 < .default
    111.wrap = <div class="col-md-4 equal" id="sp2-66-33-2">|</div>
 
   }
 wrap = <div class="container-fluid" id="sp2-66-33"><div class="row equalheight">|</div></div>
 }
 
 5 < lib.gridelements.defaultGridSetup
 5 {
   columns {
    110 < .default
    110.wrap = <div class="col-md-9 equal" id="sp2-75-25-1">|</div>
     
    111 < .default
    111.wrap = <div class="col-md-3 equal" id="sp2-75-25-2">|</div>
 
   }
 wrap = <div class="container-fluid" id="sp2-75-25"><div class="row equalheight">|</div></div>
 }
 
 6 < lib.gridelements.defaultGridSetup
 6 {
   columns {
    110 < .default
    110.wrap = <div class="col-md-4 equal" id="sp3-33-33-33-1">|</div>
    
    111 < .default
    111.wrap = <div class="col-md-4 equal" id="sp3-33-33-33-2">|</div>
          
    112 < .default
    112.wrap = <div class="col-md-4 equal" id="sp3-33-33-33-3">|</div>
 
   }
 wrap = <div class="container-fluid" id="sp3-33-33-33"><div class="row equalheight">|</div></div>
 }
 
 7 < lib.gridelements.defaultGridSetup
 7 {
   columns {
     110 < .default
     110.wrap = <div class="boxUD"><div class="boxUDContent">|</div></div>
   }
 }
 }

Ergänzung (noch nicht in Distribution eingebaut)

Heute habe ich wieder eine ganze Menge über Gridelements verstanden, nachdem ich mit stundenlang mit DCE und Mask gequält hatte. Mein eigenes Element UDRoundbox hatte bisher gegenüber TemplaVoila den Nachteil, dass die Fraben und der Rahmenradius nicht mit angegeben werden konnten. Das geht aber auch und dazu noch recht flexibel.

In der Konfiguration des Backend-Layouts hatte ich bisher das Feld Flexform-Konfiguraton missachtet. Mit folgendem Inhalt bringe ich Eingabefelder für die benötigte Information in meinem Eingabefeld unter:

<?xml version="1.0" encoding="UTF-8"?>
 <T3DataStructure>
  <ROOT type="array">
    <type>array</type>
    <el type="array">
      <bgcolor>
        <TCEforms>
          <label>Hintergrundfarbe (#eee wenn leer)</label>
           <config>
          <type>input</type>
            <size>20</size>
             <max>30</max>
             <eval>trim</eval>
         </config>
        </TCEforms>
      </bgcolor>
      <bordercolor>
        <TCEforms>
          <label>Rahmenfarbe (#aaa wenn leer)</label>
           <config>
          <type>input</type>
            <size>20</size>
             <max>30</max>
             <eval>trim</eval>
         </config>
        </TCEforms>
      </bordercolor>
      <borderradius>
        <TCEforms>
          <label>Rahmenradius (10px wenn leer)</label>
           <config>
          <type>input</type>
            <size>20</size>
             <max>30</max>
             <eval>trim</eval>
         </config>
        </TCEforms>
      </borderradius>
    </el>
  </ROOT>
 </T3DataStructure>

Jetzt muss natürlich auch das Typoscript für das Gridelement angepasst werden:

7 < lib.gridelements.defaultGridSetup
 7 {
   cObject = FLUIDTEMPLATE
   cObject {
     file = fileadmin/nettemplate/Resources/gridelements/Private/udroundbox.html
     }
 }

Im Prinzip wird hier nur gesagt, dass das Layout aus einem Fluid-Template kommt. Dessen Inhalt ist dann:


<div class="boxUD">
  <div class="boxUDContent" style="
   <f:if condition="{data.flexform_bordercolor}">
    <f:then>border-color: {data.flexform_bordercolor};</f:then>
    <f:else>border-color: #aaa;</f:else>
   </f:if>

   <f:if condition="{data.flexform_bgcolor}">
    <f:then>background-color: {data.flexform_bgcolor};</f:then>
    <f:else>background-color: #eee;</f:else>
   </f:if>

   <f:if condition="{data.flexform_borderradius}">
    <f:then>border-radius: {data.flexform_borderradius};</f:then>
    <f:else>border-radius: 10px;</f:else>
   </f:if>
  ">
      <f:format.raw>
        {data.tx_gridelements_view_column_110->f:format.raw()}
      </f:format.raw> 
  </div>  
 </div>

Verzichtet man hier auf die f:else Zeilen, so wird die Standardeinstellung über die CSS-Einstellungen anpassbar.

Damit lässt sich mit den Gridelements alles realisieren, was ich bisher mit TemplaVoila gemacht habe, Mal sehen, wann Gridelements abgeschafft wird ;-)