Bakehouse-Content-Elemente anpassen

    Alle Core-Elemente sind flexibel und sowohl lokal als auch in einer eigenen Extension überschreib- und manipulierbar. Egal ob nur eine spezifische Einstellung oder das gesamte Element umgeschrieben werden soll – alles ist über TypoScript steuerbar.

    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.