Digitalagentur für Business Software aus Kiel

TYPO3 Dynamic Content Elements (DCE) mit statischen Dateien

Veröffentlicht von Henrik Braune am 29.12.2015

Henrik Braune

Dynamische Inhaltselemente wurden in TYPO3 in der Vergangenheit überwiegend mit FCE-Elementen der Extension TemplaVoila realisiert. In neueren TYPO3-Version wird vielfach die Erweiterung DCE eingesetzt, deren Unterstützung für statische Konfigurationsdateien bisher nicht dokumentiert ist.

Statische Konfigurationsdateien für Dynamische Inhaltselemente der DCE-Erweiterung werden standardmäßig innerhalb der MySQL-Datenbank abgelegt. Dies hat den Nachteil, dass Code und Inhalt in diesem Fall unzureichend getrennt sind. Damit Entwickler gemeinsam an einem Projekt arbeiten können, genügt ist in diesem Fall nicht mehr, den letzten Stand aus dem git-Repository zu beziehen. Gleichzeitig muss auch der letzte Stand der Datenbank übermittelt werden, damit das Projekt in den lokalen Entwicklungsumgebungen einen identischen Funktionsumfang hat.

Genau dies ist innerhalb der DCE-Extension durch statische DCE´s gelöst, die im Dateisystem abgelegt werden können und keine Datenbank mehr benötigen. Weil der Hauptentwickler Armin Vieweg statische DCE´s als Haupt-Feature für die Version 2.0 geplant hat, ist die der aktuelle Support derzeit noch nicht dokumentiert. Darüber hinaus verfügt die Version 1.3 aktuell noch über vereinzelte Fehler, die der Pull-Request von David Bascom lösen konnte.

Wir haben diesen Pull-Request in unseren Fork der Erweiterung integriert. Im Folgenden ist beispielhaft skizziert, wie ein statisches DCE-Element innerhalb einer beliebigen Extension abgelegt wird.

Zunächst muss im Extension Manager der Pfad der statischen DCE-Dateien angegeben werden (general.filebasedDcePath). Anschließend muss für jedes DCE ein eigener Ordner innerhalb des Verzeichnisses angelegt werden. Der Ordnername (hier: slider) ist gleichzeitig der "Identifier" des Elements.

Anschließend kann das DCE konfiguriert werden. Wir haben ein Beispiel verwendet, in dem eine Section beliebig viele Container-Elemente besitzt.

tx_dce.static {
	hidden = 0
	title = Slider
	identifier = slider

	fields {

		slides {
			type = 2
			title = Slides
			section_fields_tag = Slide
			variable = slides

			section_fields {
				header {
					type = 0
					title = Header
					variable = header
					configuration (
						<config>
							<type>input</type>
						<size>30</size>
						<eval>trim,required</eval>
						</config>
					)
				}

				background {
					type = 0
					title = Background
					variable = background
					configuration (
						<config>
							<type>group</type>
						<internal_type>db</internal_type>
						<appearance>
							<elementBrowserType>file</elementBrowserType>
						<elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
						</appearance>
						<allowed>sys_file</allowed>
						<size>5</size>
						<minitems>0</minitems>
						<maxitems>5</maxitems>
						<show_thumbs>1</show_thumbs>
						</config>
					)
				}

				link {
					type = 0
					title = Link
					variable = link
					configuration (
						<config>
							<type>input</type>
						<size>30</size>
						<eval>trim</eval>
						<softref>typolink,typolink_tag,images,url</softref>
						<wizards>
							<_PADDING>2</_PADDING>
						<link>
							<type>popup</type>
						<title>Link</title>
						<module>
							<name>wizard_element_browser</name>
						<urlParameters>
							<mode>wizard</mode>
						</urlParameters>
						</module>
						<icon>link_popup.gif</icon>
						<script>browse_links.php?mode=wizard</script>
							<params>
								<!--<blindLinkOptions>page,file,folder,url,spec</blindLinkOptions>-->
						</params>
						<JSopenParams>height=500,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
							</link>
							</wizards>
						</config>
					)
				}

				icon {
					type = 0
					title = Icon
					variable = icon
					configuration (
						<config>
							<type>select</type>
						<items type='array'>
						<numIndex index='0' type='array'>
						<numIndex index='0'>Ausflugstipps</numIndex>
						<numIndex index='1'>ausflugstipps</numIndex>
						</numIndex>
						</items>
						<size>1</size>
						<minitems>1</minitems>
						<maxitems>1</maxitems>
						</config>
					)
				}
				linkTitle {
					type = 0
					title = Link Title
					variable = linkTitle
					configuration (
						<config>
							<type>input</type>
						<size>30</size>
						<eval>trim,required</eval>
						</config>
					)
				}
			}
		}


	}


	wizard_enable = 1
	wizard_category = common

	wizard_description = Super Slider
	wizardDescription < .wizard_description

	wizard_icon = content-textpic
	selectedWizardIconPath < .wizard_icon

	enable_detailpage = 0
	cache_dce = 1
	hide_default_ce_wrap = 0
	show_access_tab = 0
	show_category_tab = 0

	palette_fields = sys_language_uid, l18n_parent, colPos, spaceBefore, spaceAfter, section_frame, hidden
	template_layout_root_path = EXT:dce/Resources/Private/Layouts/
	template_partial_root_path = EXT:dce/Resources/Private/Partials/
}
DCE-Konfiguration: EXT:extension_name/Resources/Private/Dce/slider/Dce.ts
{namespace dce=ArminVieweg\Dce\ViewHelpers}

<f:for each="{fields.slides}" as="slide">
	<f:image src="{slide.background}" height="100c" width="100c" alt="{slide.header}" />
</f:for>
DCE-Konfiguration: EXT:extension_name/Resources/Private/Dce/slider/BackendBodytext.html
<div id="slider">
	<f:for each="{fields.slides}" as="slide">
		<div class="slide">
			<f:link.page pageUid="{slide.link}" title="{slide.linkTitle}">
				<div class="slide-image" style="background-image:url({f:uri.image(src: slide.background, width: '666c', height: '338c')}); background-position: center center"></div>
				<div class="{slide.icon}"></div>
				<figcaption"><span>{slide.header}</span></figcaption>
			</f:link.page>
		</div>
	</f:for>
</div>
DCE-Konfiguration: EXT:extension_name/Resources/Private/Dce/slider/Frontend.html

© 2019, Braune Digital GmbH, Niemannsweg 69, 24105 Kiel, +49 (0) 431 55 68 63 59