colPos mit gridelements rendern

Hallo ins Forum,

wie kann ich zwei bestimmten colPos (in meinem Fall colPos=20 und colPos=30), die ich als BE Layout angelegt habe mit gridelements ausgeben?

content_20 < styles.content.get
content_20.select.where = colPos=20
content_20 < wie krieg ich hier gridelemente rein
content_30 < styles.content.get
content_30.select.where = colPos=30
content_30 < wie krieg ich hier gridelemente rein

Mein gridelements Setup sieht so aus

tt_content.gridelements_pi1.20.10.setup {
  ### 2 Spalten
  1 < lib.gridelements.defaultGridSetup
  1 {
    columns {
      10 < .default
      10.wrap = <span class="col span_6">|</span>
      20 < .default
      20.wrap = <span class="col span_6">|</span>
    }
    wrap = <div class="row twoCols">|</div>
  }

Das Gridelement läuft auch wunderbar, wenn man ein CE als solches anlegt. Im BE Layout jedoch habe ich meine zwei festen Spalten, in die der Redakteur einfach normale CEs anlegt. Die sollen "im Hintergrund" dann aber auch übers grildelements ausgegeben werden.

Meine Idee war

lib.content_2Cols = COA
lib.content_2Cols {
  20 < styles.content.get
  20.select.where = colPos=20
  20 < lib.gridelements.defaultGridSetup
  20 {
    columns {
      10 < .default
      10.wrap = <div class="col span_6">|</div>
     }
   30 < .20
   30.select.where = colPos=30

  }

Im root Setup gebe ich die lib dann aus.

ce_2Cols < lib.content_2Cols

Dann war noch dieser weitere erfolglose Versuch es in gridelements Setup einzutragen, was eigentlich gar nicht gehen kann, da 20 keine Spalte von gridelements ist, sondern vom BE-Layout

tt_content.gridelements_pi1.20.10.setup {
  20 < lib.gridelements.defaultGridSetup
  20 {
    columns {
      10 < .default
      10.wrap = <div class="col span_3">|</div>
  }

Versteht noch jemand was ich meine?
Dann mal Danke für Hilfe und Gruß
mimii

Wenn nur einzelne Spalten aus einem BE-Layout in ein HTML Markup gerendert werden soll, dann macht der Umweg über Gridelements doch absolut keinen Sinn.
Gridelements verfolgen ein komplett anderes Prinzip: Ein Gridelement liegt in EINER Spalte (=colPos) und bietet dann weitere eigene Spalten an.

Im Backend musst du das "CE Backend Layout" verwenden, wenn es um Gridelements geht... nicht das normale "Backend Layout"! Man kann natürlich auch beide kombinieren.

http://docs.typo3.org/typo3cms/extensions/gridelements/GridElements/HowToUse/StepByStep/Index.html

Danke für die Antwort,

soweit ist das klar. Ich wollte damit die HTML-Ausgabe besser strukturieren. Ich benötige so einen Aufbau

<div class="row twoCols">
  <div class="col span_6">
     Hier Content
  </div>
  <div class="col span_6">
     Hier Content
  </div>
</div>

Das liefern mir meine definierten Gridelemente wunderbar aus, wenn ich denn auch im BE mit ihnen arbeite.

Nun muss ein Redakteur natürlich nicht mit den Gridelementen arbeiten, sonder kann auch "normale" CEs einsetzen. Damit diese Elemente ins gewünschte HTML-Schema passen, habe ich folgendes TS, das mir <div>s mit row und span ensprechend drum herum baut. Diese CS gehen normalerweise auch über die gesamte Breiter der Spalte colPos=0 (daher span_12).

### Contentelemente ohne gridelements
tt_content.stdWrap.wrap.cObject = TEXT
tt_content.stdWrap.wrap.cObject.value = <div class="row oneCol"><div class="col span_12">|</div></div>
tt_content.stdWrap.wrap.cObject.value.override.if.isTrue.cObject = COA
tt_content.stdWrap.wrap.cObject.value.override.if.isTrue.cObject {
  10 = TEXT
  10.field = tx_gridelements_container
  20 = TEXT
  20.value = 1
  20.if {
    value = gridelements_pi1
    isInList.field = CType
  }
}
tt_content.stdWrap.wrap.cObject.value.override = |

Auf Basis deiner Aussage rendere ich nun meine zwei Spalten (colPos=20 und colPos=30) nun per TS, klappt auch wunderbar

lib.content_2Cols = COA
lib.content_2Cols {
    20 < styles.content.get
    20.select.where = colPos=20
    20.wrap = <div class="col span_6">|</div>
    30 < styles.content.get
    30.select.where = colPos=30
    30.wrap = <div class="col span_6">|</div>
    wrap = <div class="row">|</div>
}

mit einem einzigen Problem, dass auf der Seite mit dem zweispaltigen BE-Layout die "normalen" CEs mit row und span_12 reingesetzt werden (weil sie eben kein gridelements haben). Das HTML sieht dann so aus:

<div class="row twoCols">
  <div class="col span_6">
     <div class="row oneCol">      <- das muss raus
        <div class="col span_12">  <- das muss raus
            Hier Content
        </div>
     </div> 
  </div>
  <div class="col span_6">
     <div class="row oneCol">      <- das muss raus
        <div class="col span_12">  <- das muss raus
            Hier Content
        </div>
     </div> 
  </div>
</div>

Das ganze Konstrukt bringt mich noch zum verzweifelen, wie krieg ich mein HTML wie oben beschrieben, wenn ich mit BE-Layouts, Gridelements und "normalen" CE's arbeite, die dann auch noch verschachtelt sein können.

Danke für ein ein bisschen Input, ich komme da wirklich nicht mehr weiter.

Viele Grüße
mimii

Das kenn ich. MIr geht es genau so wie dir.
Habe genau das selbe Problem nur ein wenig anderen TS Ansatz:

tt_content.gridelements_pi1.20.10.setup >
tt_content.gridelements_pi1.20.10.setup {

	# ALIAS of gridelement
	grid_2_spaltig < lib.gridelements.defaultGridSetup
	grid_2_spaltig {
		columns {
			
			default.renderObj.20.tt_content.stdWrap.default.wrap = |
			default.renderObj.20.tt_content.stdWrap.default.default.wrap = |
		
			# colPos ID
			101 < .default
			101.wrap = <div class="content-cell-single-first">|</div>
			
			# colPos ID
			102 < .default
			102.wrap = <div class="content-cell-single-second">|</div>
			
		}
		
		wrap = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-double">|</div><div class="content-color-cell"></div></div>
	}
	
	# ALIAS of gridelement
	grid_1_spaltig < lib.gridelements.defaultGridSetup
	grid_1_spaltig {
		columns {
		
			default.renderObj.20.tt_content.stdWrap.outerWrap.cObject >
			
			# colPos ID
			201 < .default
			201.wrap = |
			
		}
		
		wrap = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-single">|</div><div class="content-color-cell"></div></div>
	}
}

Und dann der Rest:

tt_content.stdWrap.outerWrap.cObject = CASE
tt_content.stdWrap.outerWrap.cObject {
	
	key.field = CType
	
	default  = CASE
	default.wrap = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-single">|</div><div class="content-color-cell"></div></div>
	
	gridelements_pi1 = TEXT
	gridelements_pi1.value = |
}

Und trotzdem werden erst alle Inhaltselemente gewrapped und dann in die Gridelements geschoben und darum dann die Wraps der Gridelemente gepackt.

Das macht doch keinen Sinn und ist irgendwie unlogisch.

Ich wäre auch um einen hilfreichen Tip dankebar. :-)

Hier hab ich meinen Lösungsansatz gefunden:
#118900

Das hier ist für mich meine Lösung:

Wraps für meine Grid-Elemente definineren:

tt_content.gridelements_pi1.20.10.setup >
tt_content.gridelements_pi1.20.10.setup {

	# ALIAS of gridelement
	grid_2_spaltig < lib.gridelements.defaultGridSetup
	grid_2_spaltig {
		columns {
			
			default.renderObj.20.tt_content.stdWrap.default.wrap = |
			default.renderObj.20.tt_content.stdWrap.default.default.wrap = |
		
			# colPos ID
			101 < .default
			101.wrap = <div class="content-cell-single-first">|</div>
			
			# colPos ID
			102 < .default
			102.wrap = <div class="content-cell-single-second">|</div>
			
		}
		
		wrap = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-double">|</div><div class="content-color-cell"></div></div>
	}
	
	# ALIAS of gridelement
	grid_1_spaltig < lib.gridelements.defaultGridSetup
	grid_1_spaltig {
		columns {
		
			default.renderObj.20.tt_content.stdWrap.outerWrap.cObject >
			
			# colPos ID
			201 < .default
			201.wrap = |
			
		}
		
		wrap = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-single">|</div><div class="content-color-cell"></div></div>
	}
}

Und dann die Wraps definieren für alle anderen:

tt_content.stdWrap.outerWrap >
tt_content.stdWrap.outerWrap.cObject = CASE
tt_content.stdWrap.outerWrap.cObject {

	key.field = CType
	
	# Wrap für alle anderen Objekte
	default.wrap.cObject = CASE
	default.wrap.cObject {
	
		key.field = pid
		
		# Wrap für alle anderen PIDs
		default = TEXT
		default.value = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-single">|</div><div class="content-color-cell"></div></div>
		
		# Wrap für PID 9
		9 = TEXT
		9.value = |
		
		# Wrap für PID 10
		10 = TEXT
		10.value = |
		
		# Wrap für PID 11
		11 = TEXT
		11.value = |
	}
	
	# Wrap für gridelements überschreiben
	gridelements_pi1 = TEXT
	gridelements_pi1.wrap = |
}

.... Leider hat das noch nicht ganz funktioniert, da tt_content ja in die Gridelements injiziert wird und damit der Standard-Wrap eines jeden CEs mit dem Gridelement nochmals gewrappt wird. Daher muss davor der Wrap vom CE wieder entfernt werden:

lib.gridelements.defaultGridSetup >
lib.gridelements.defaultGridSetup {
	columns {
		default {
			renderObj = COA
			renderObj {
				20 < tt_content
				20.wrap >
				20.outerWrap >
				20.stdWrap.outerWrap >
			}
		}
	}
}

Danach kann man die Grid-ELemente mit einem Wrap versehen:

tt_content.gridelements_pi1.20.10.setup >
tt_content.gridelements_pi1.20.10.setup {

	# ALIAS of gridelement
	grid_2_spaltig < lib.gridelements.defaultGridSetup
	grid_2_spaltig {
		columns {
		
			# colPos ID
			101 < .default
			101.wrap = <div class="content-cell-single-first">|</div>
			
			# colPos ID
			102 < .default
			102.wrap = <div class="content-cell-single-second">|</div>
			
		}
		
		wrap = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-double">|</div><div class="content-color-cell"></div></div>
	}
	
	# ALIAS of gridelement
	grid_1_spaltig < lib.gridelements.defaultGridSetup
	grid_1_spaltig {
		columns {

			# colPos ID
			201 < .default
			201.wrap = |
			
		}
		
		wrap = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-single">|</div><div class="content-color-cell"></div></div>
	}
}

tt_content.gridelements_view >

Trotzdem muss man aber eine Weiche bei den "Normalen" CEs machen, damit hier nicht wieder ein Wrap um einene Wrap passiert:

tt_content.stdWrap.outerWrap >
tt_content.stdWrap.outerWrap.cObject = CASE
tt_content.stdWrap.outerWrap.cObject {

	key.field = CType
	
	# Wrap für alle anderen Objekte
	default = CASE
	default {
	
		key.field = pid
		
		# Wrap für alle anderen PIDs
		default = TEXT
		default.value = <div class="content-row"><div class="content-color-cell"></div><div class="content-cell-single">|</div><div class="content-color-cell"></div></div>
		
		# Wrap für PID 9
		9 = TEXT
		9.value = |
		
		# Wrap für PID 10
		10 = TEXT
		10.value = |
		
		# Wrap für PID 11
		11 = TEXT
		11.value = |
	}
	
	# Wrap für gridelements überschreiben
	gridelements_pi1 = TEXT
	gridelements_pi1.value = |
	
	# Wrap für gridelements überschreiben
	gridelements_view = TEXT
	gridelements_view.value = |
}

Und schon klappt alles! :-)