Zum Inhalt springen

Eigene Klassen und Wraps in der Extension Multicolumn verwenden

Erstellt am 16. September 2012 · Noch keine Antworten

Tags: Bootstrap, Frage

einpraegsam.​net ·

In unserem aktuellen Projekt können wir die Extension gridelements nicht einsetzen, weil der 1und1-Server uns hier mit der PHP-Version einen Strich durch die Rechnung macht.
Jedoch benötigen wir eigene Klassen und Wraps und wollen auf das Standard-Markup von multicolumn komplett verzichten.

1. Wunsch-Markup

<div class="row">
	<div class="span4">1/3</div>
	<div class="span8">2/3</div>
</div>

<div class="row">
	<div class="span8">2/3</div>
	<div class="span4">1/3</div>
</div>

2. Vorgehen
- Zwei Layouts über PageTSConfig definieren und alle Default-Layouts löschen
- Über TypoScript eigenen Wrap schreiben

3. Code
PageTSConfig:

# Multicolumn Layouts
tx_multicolumn.layoutPreset >
tx_multicolumn.layoutPreset {
	col_1_2 {
		label = 33% / 66%
		icon = EXT:ext_layout/files/images/icons/1_2.jpg
	}
	col_2_1 {
		label = 66% / 33%
		icon = EXT:ext_layout/files/images/icons/2_1.jpg
	}
}

TypoScript

###
# Multicolumn should work with .span12
###
plugin.tx_multicolumn_pi1 {
		# internal do not remove
	includeFromStatic = 1

		# column container
	columnContainer = TEXT
	columnContainer {
		if.isTrue.field = content
		insertData = 1
		value = <div class="row">{field:content}</div>
	}

		# markup for column item
	column = COA
	column {
		1 = LOAD_REGISTER
		1 {
			columnItems.cObject = TEXT
			columnItems.cObject {
				if.isTrue.field = content
				insertData = 1
				value = {field:content}
			}
		}

		2 = LOAD_REGISTER
		2 {
			CssClass.cObject = CASE
			CssClass.cObject {
				key.field = layoutKey

				col_1_2 = COA
				col_1_2 {
					10 = TEXT
					10 {
						value = span4
						if.isTrue.field = isFirst
					}
					20 = TEXT
					20 {
						value = span8
						if.isTrue.field = isLast
					}
				}

				col_2_1 = COA
				col_2_1 {
					10 = TEXT
					10 {
						value = span8
						if.isTrue.field = isFirst
					}
					20 = TEXT
					20 {
						value = span4
						if.isTrue.field = isLast
					}
				}
			}
		}

		3 = TEXT
		3 {
			insertData = 1
			value = <div class="{register:CssClass}">{register:columnItems}</div>
		}

		4 = RESTORE_REGISTER
	}

		# render content elements
	columnItem = COA
	columnItem {
		10 = < tt_content
	}
}

Cheers, Alex