Bakehouse-Content-Elemente anpassen
TypoScript
Beispiel: So sieht die TypoScript Konfiguration des el-swiper aus:
Typoscript
el-swiper {
name = Swiper
description = Inhalt kann horizontal angeordnet werden
templateFile = el-swiper.html
templatePath = typo3/sysext/bh/Resources/Public/Elements/el-swiper/
settingsForm = typo3/sysext/bh/Resources/Public/Elements/el-swiper/el-swiper-settings.html
iconFile = typo3/sysext/bh/Resources/Public/Icons/Elemente/fader.svg
bheListgroup = 1
hidden = 1
options {
oncreate = advanced
translate = 0
edit = 0
newElement = el-swipe-item
}
swiper {
min-height = 300px
spaceBetween = 0px
slideMinWidth = 1
}
userClass = bh-centered
}
Konfigurationsbeispiel für einfache Änderungen im TypoScript:
Typoscript
plugin.tx_bh.settings.contentElements {
# Core-Elemente, die nicht benötigt werden, können entfernt werden
bhAccordeonItem.hidden = 1
# Default-Settings können überschrieben werden
el-swiper.swiper.min-height = 260px
}
Fluid-Template
Mit dem Element-ViewHelper wird das Content-Element definiert und kann somit im Editier-Modus als solches behandelt werden (verschieben, kopieren, löschen, ...).
Jedem Content-Element-Template wird das Content-Object {cObj} übergeben. Damit erhält man Zugriff auf die Settings, die entweder aus der TypoScript-Konfiguration und/oder aus dem Settings-Formular stammen (das Settings-Formular überschreibt vorhandene "Defaults" der TypoScript-Konfiguration).
Beispiel el-Swiper
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<bh:swiper settings="{cObj.allSettings.swiper}">
<bh:tmpl.content section="el-swiper" parent="{cObj.uid}" />
</bh:swiper>
</bh:tmpl.element>
Der Content-ViewHelper <bh:tmpl.content /> wird verwendet, um einen Container-Bereich zu definieren und um vorhandenen Content zu rendern (selbes gilt für Page-Templates). In diesem Fall wird ein Container mit der Section el-swiper gerendert. Um dem ViewHelper mitzuteilen, dass er nur Elemente dieses Swipers rendern darf, wird dem Parent-Attribut die ID des Swipers übergeben.
Beispiel bhBox
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="box">
<div class="boxTitle">
<bh:property.text tag="div" property="name" />
</div>
<div class="boxBild">
<bh:property.picture picture="{cObj.picture}" property="picture" />
</div>
<div class="boxContent">
<bh:property.text tag="div" property="text" />
</div>
</div>
</bh:tmpl.element>
Mit dem Property-ViewHelper bh:property.text oder bh:property.picture werden Bereiche definiert, die im Front-End befüllbar sind:
- Mit dem Attribut property wird definiert, in welchem Feld des Thing-Records der Text oder das Bild gespeichert werden soll.
- Dem Picture-ViewHelper muss das File-Object über das Attribut picture mitgegeben werden.
Fluid-Settings-Formular
Beipiel bhFader
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-formsettings-option">
<label>Effekt:</label>
<f:form.select name="effect" value="{cObj.settings.effect}" options="{cObj.allSettings.effects}" />
</div>
<div class="bhe-formsettings-option">
<label>Menu:</label>
<f:form.select name="menu" value="{cObj.settings.menu}" options="{cObj.allSettings.menus}" />
</div>
<div class="bhe-formsettings-option">
<label>Dauer:</label>
<f:form.textfield name="duration" value="{cObj.settings.duration}" />
</div>
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Mit dem bh:form.settingsform-ViewHelper werden dem/r Redakteur:in schnell und einfach individuelle Content-Element-Einstellungen bereitgestellt:
- Für die Formular-Elemente wird der Fluid Form-ViewHelper verwendet.
- Für Selects, deren Optionen aus dem Element-TypoScript kommen (siehe menus oder effects im Beispiel), wird der f:form.select-ViewHelper verwendet.
- Im name-Attribut wird der Settings-Key definiert. Wurde dieser in der Elementkonfiguration bereits verwendet, erhält man einen Default-Wert beim Aufruf des Settings-Formulars.
- Mit {cObj.allSettings} hat man Zugriff auf alle TypoScript-Element-Einstellungen.