Core-Content-Elemente
Content-Elemente-Pool
Das Bakehouse bietet bereits viele nützliche Content-Elemente an. Diese wurden entsprechend ihrem Sinn und Zweck funktional angepasst und benutzerfreundlich gestaltet. In vielen Fällen reicht es bereits aus, diese Elemente entsprechend ihrem Sinn zu verwenden, ohne dass eine Anpassung nötig ist.
Tipp
Auf Core-Elemente zurückgreifen
Bevor du also die Funktionalität eines bestehenden Elementes bearbeiten möchtest, solltest du zuerst prüfen, ob nicht ein bereits vorhandenes Element für den Anwendungsfall ausreicht. Eine Übersicht über die bereits vorhanden Content-Elemente findest du untenstehend.
Warum finde ich in meinem Bakehouse nicht alle Core-Elemente?
Werksseitig sind nicht alle Content-Elemente für jedes Bakehouse eingeblendet. Diese lassen sich aber über TypoScript mit einem einfachen Befehl einblenden.
Beispiel: Das Bakehouse-Content-Element "Trenner" ist standardmäßig ausgeblendet. Folgender TypoScript-Code überschreibt die Standardkonfiguration und blendet das Content-Element ein:
Typoscript
plugin.tx_bh.settings.contentElements.bhTrenner.hidden = 0
Accordion
bhAccordeonItem
Ein Element, welches Inhalte in einer Accordion-Ansicht aufbereitet. Der Content-Bereich kann dabei weitere Content-Elemente aufnehmen und ist ein- und ausklappbar. Zwei untereinander platzierte Accordions bilden eine logische Einheit und interagieren miteinander.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="bh-accordion-toggler">
<div class="bh-accordion-toggler-inner">
<bh:property.text tag="div" property="text" />
</div>
</div>
<div class="bh-accordion-element">
<div class="bh-accordion-element-inner">
<bh:tmpl.content section="accordeon" parent="{cObj.uid}" />
</div>
</div>
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<f:then>
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:then>
<f:else>
<f:if condition="{cObj.allSettings.styleOptions}">
<div class="bhe-formsettings-option">
<label>Style</label>
<f:form.select multiple="true" name="style" value="{cObj.allSettings.style}" options="{cObj.allSettings.styleOptions}" />
</div>
</f:if>
</f:else>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Bild
bhPicture
Einfaches Content-Element, um ein Bild darzustellen.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<bh:property.picture picture="{cObj.picture}" />
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<f:then>
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:then>
<f:else>
<f:if condition="{cObj.allSettings.styleOptions}">
<div class="bhe-formsettings-option">
<label>Style</label>
<f:form.select multiple="true" name="style" value="{cObj.allSettings.style}" options="{cObj.allSettings.styleOptions}" />
</div>
</f:if>
</f:else>
</f:if>
<div class="bhe-formsettings-option">
<label data-tooltip="Es wird die Original-Datei eingebunden, welche sich auf dem Webspace befindet. Maße und Größe bleiben erhalten. Es ist nicht möglich, das Bild zu zoomen oder einen Ausschnitt zu wählen." data-tooltip-view="extended">Original-Datei verwenden</label>
<f:form.checkbox name="preventResize" value="1" checked="{cObj.allSettings.preventResize}" />
</div>
<f:if condition="{cObj.allSettings.backgroundImageEnabled}">
<div class="bhe-formsettings-option">
<label data-tooltip="Das Bild kann mit CSS formatiert werden, dafür geht aber die manuelle Einstellungsmöglichkeit verloren." data-tooltip-view="extended">Als Hintergrundbild ausgeben</label>
<f:form.checkbox name="backgroundImage" value="1" checked="{cObj.allSettings.backgroundImage}" />
</div>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
TypoScript
Typoscript
# TypoScript, um das Background-Image-Setting freizuschalten:
plugin.tx_bh.settings.contentElements.bhPicture.backgroundImageEnabled = 1
Downloadlink
bhDownloadlink
Wird erstellt, wenn eine Datei (also kein Bildformat) aus dem Mediacake in den Content-Bereich gelegt wird. Sollte nicht über die Content-Element-Auswahl in den Content-Bereich hinzugefügt werden.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="bh-downloadlink floatchildren">
<div class="bh-downloadlink-preview">
<f:image src="<bh:icon.path file='{cObj.file}' />" width="65c" height="65c" alt="" />
</div>
<div class="bh-downloadlink-name">
{cObj.file.titleNameFile}
</div>
</div>
</bh:tmpl.element>
Content-Swiper
el-swiper
Content-Element, in welches weitere Content-Elemente abgelegt werden können. Diese werden als Swiper ausgegeben.
Element-Template
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>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-tab-box">
<div class="bhe-tab-toggler-box bhe-tab-toggler-style-icon-text">
<div class="bhe-tab-toggler bhe-tab-active">
<div class="bhe-tab-toggler-icon bhe-font-fader"></div>
<div class="bhe-tab-toggler-text">Swiper</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-form"></div>
<div class="bhe-tab-toggler-text">Settings</div>
</div>
</div>
<div class="bhe-tab-content-box">
<div class="bhe-tab-content bhe-tab-content-padding bhe-tab-active">
<div class="bhe-formsettings-option">
<label>Effekt</label>
<f:form.select name="swiper[effect]" value="{cObj.allSettings.swiper.effect}" options="{slide:'Slide',fade:'Fade'}" />
</div>
<div class="bhe-formsettings-option">
<label>Navigation - Pfeile</label>
<f:form.checkbox name="swiper[navigation]" value="1" checked="{cObj.allSettings.swiper.navigation}" />
</div>
<div class="bhe-formsettings-option">
<label>Navigation - Punkte</label>
<f:form.checkbox name="swiper[pagination]" value="1" checked="{cObj.allSettings.swiper.pagination}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="wenn leer wird keine Mindesthöhe verwendet" data-tooltip-view="extended">Mindesthöhe (px,%,vh)</label>
<f:form.textfield name="swiper[min-height]" value="{cObj.allSettings.swiper.min-height}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="wenn leer wird als Default-Wert 0px verwendet" data-tooltip-view="extended">Platz zwischen den Spalten (px)</label>
<f:form.textfield name="swiper[spaceBetween]" value="{cObj.allSettings.swiper.spaceBetween}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="<b>- '2' ganzzahlige Werte</b><br/>gibt die Spaltenanzahl an<br/><b>- '300px' Werte mit dem Zusatz 'px'</b><br/> gibt die Mindestbreite an (automatische Berechnung)<br/><b>- 'auto'</b><br/> Breite wird über CSS definiert (für Profis)" data-tooltip-view="extended">Spalten Einstellung</label>
<f:form.textfield name="swiper[slideMinWidth]" value="{cObj.allSettings.swiper.slideMinWidth}" />
</div>
<div class="bhe-formsettings-option">
<label>Spalten ausmitteln</label>
<f:form.checkbox name="swiper[centeredSlides]" value="1" checked="{cObj.allSettings.swiper.centeredSlides}" />
</div>
<div class="bhe-formsettings-option">
<label>Loop (Elemente wiederholen sich)</label>
<f:form.checkbox name="swiper[loop]" value="1" checked="{cObj.allSettings.swiper.loop}" />
</div>
<div class="bhe-formsettings-option">
<label>Autoplay</label>
<f:form.checkbox name="swiper[autoplay]" value="1" checked="{cObj.allSettings.swiper.autoplay}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Es " data-tooltip-view="extended">Autoplay Dauer in Sekunden</label>
<input type="number" step="0.01" name="tx_bh_page[data][content][settings][swiper][autoplayOptions][delay]" min="0" value="{cObj.allSettings.swiper.autoplayOptions.delay}" />
</div>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<!-- STYLES -->
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
</div>
</div>
</div>
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Gallery
el-gallery
Eine Gallery, die über den Mini-Mediacake im Settings-Formular befüllt werden kann.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<f:if condition="{cObj.allSettings.filter.filterMethod} == 'category'">
<f:then>
<f:if condition="{cObj.allSettings.filter.cats} != ''">
<f:if condition="{cObj.allSettings.filter.cats -> f:count()} > 1">
<f:then>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository" method="findByCategories" options="{categories: cObj.allSettings.filter.cats}" as="files">
<f:variable name="items" value="{files}" />
</bh:repository.load>
</f:then>
<f:else if="{cObj.allSettings.filter.cats}">
<f:comment>Sortierung innerhalb Kategorie</f:comment>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\CategoryRepository" method="findOneByUid" options="{cObj.allSettings.filter.cats}" as="cat">
<f:if condition="{cat.files}">
<f:variable name="items" value="{cat.files}" />
</f:if>
</bh:repository.load>
</f:else>
</f:if>
</f:if>
</f:then>
<f:else>
<f:if condition="{cObj.allSettings.filter.items}">
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository" method="findByUids" options="{cObj.allSettings.filter.items}" as="pics">
<f:variable name="items" value="{pics}" />
</bh:repository.load>
</f:if>
</f:else>
</f:if>
<f:if condition="{cObj.allSettings.layout} == 'el-gallery-layout-thumbnail'">
<f:then>
<div class="el-gallery-thumbnail-container" data-iecols="3" style="-ms-grid-columns: 1fr 1fr 1fr;">
<f:if condition="{items}">
<f:for each="{items}" as="file">
<f:if condition="{file.isPicture}">
<a class="el-gallery-item" {f:if(condition: '{cObj.allSettings.enableLightbox}', then: 'href="/uploads/tx_bh/{file.file}" target="lightbox"')} >
<bh:image.background file="{file}">
<f:if condition="{cObj.allSettings.showPictureDescription} == 1">
<div class="el-gallery-item-text">
{file.text}
</div>
</f:if>
</bh:image.background>
</a>
</f:if>
</f:for>
</f:if>
</div>
</f:then>
<f:else>
<bh:swiper class="lightboxgroup" settings="{cObj.allSettings.swiper}">
<div class="el-gallery-wrapper">
<f:if condition="{items}">
<f:for each="{items}" as="file">
<f:if condition="{file.isPicture}">
<a class="el-gallery-item" {f:if(condition: '{cObj.allSettings.enableLightbox}', then: 'href="/uploads/tx_bh/{file.file}" target="lightbox"')} >
<bh:image.background file="{file}">
<div style="min-height: {cObj.allSettings.swiper.min-height}">
<f:if condition="{cObj.allSettings.showPictureDescription} == 1">
<div class="el-gallery-item-text">
{file.text}
</div>
</f:if>
</div>
</bh:image.background>
</a>
</f:if>
</f:for>
</f:if>
</div>
</bh:swiper>
</f:else>
</f:if>
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-tab-box">
<div class="bhe-tab-toggler-box bhe-tab-toggler-style-icon-text">
<div class="bhe-tab-toggler bhe-tab-active">
<div class="bhe-tab-toggler-icon bhe-font-picture"></div>
<div class="bhe-tab-toggler-text">Bilder</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-layout"></div>
<div class="bhe-tab-toggler-text">Layout</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-form"></div>
<div class="bhe-tab-toggler-text">Settings</div>
</div>
</div>
<div class="bhe-tab-content-box">
<div class="bhe-tab-content bhe-tab-content-padding bhe-tab-active">
<!-- Auswahl Kategorien oder Bilder -->
<div class="bhe-formsettings-option">
<label>Bilder</label>
<div class="bhe-form-radiobuttons">
<label>
<f:form.radio name="filter[filterMethod]" value="items" checked="{cObj.allSettings.filter.filterMethod} == 'items'" />
<div class="bhe-form-radiobutton">manuelle Auswahl</div>
</label>
<label>
<f:form.radio name="filter[filterMethod]" value="category" checked="{cObj.allSettings.filter.filterMethod} == 'category'" />
<div class="bhe-form-radiobutton">aus Kategorie/n</div>
</label>
</div>
</div>
<!-- Kategorien -->
<div class="bhe-formsettings-option bhe-clearfix" data-bhe-form-listener="tx_bh_page[data][content][settings][filter][filterMethod]" data-bhe-form-active-on="value" data-bhe-form-active-value="category">
<label>Kategorie</label>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\CategoryRepository" method="findAllInSystem" as="categories">
<f:form.select multiple="true" name="filter[cats]" value="{cObj.allSettings.filter.cats}" options="{categories}" optionLabelField="name" optionValueField="uid" />
</bh:repository.load>
</div>
<!-- Mini-Mediacake -->
<div class="bhe-formsettings-option bhe-form-field-type-mediacake" data-bhe-form-listener="tx_bh_page[data][content][settings][filter][filterMethod]" data-bhe-form-active-on="value" data-bhe-form-active-value="items">
<label data-tooltip="Hier werden die Bilder ausgewählt die Gallerie angezeigt werden." data-tooltip-view="extended">Bild-MediaCake</label>
<f:if condition="{cObj.allSettings.filter.items}">
<f:then>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository" method="findByUids" options="{cObj.allSettings.filter.items}" as="items">
<bh:form.mediacake name="filter[items]" value="{items}" />
</bh:repository.load>
</f:then>
<f:else>
<bh:form.mediacake name="filter[items]" value="{cObj.allSettings.filter.items}" />
</f:else>
</f:if>
</div>
<div class="bhe-formsettings-option">
<label>Mit Lightbox</label>
<f:form.checkbox name="enableLightbox" value="1" checked="{cObj.allSettings.enableLightbox}" />
</div>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<div class="bhe-formsettings-option">
<label>Variante</label>
<div class="bhe-form-radiobuttons">
<label>
<f:form.radio name="layout" value="el-gallery-layout-thumbnail" checked="{cObj.allSettings.layout} == 'el-gallery-layout-thumbnail'" />
<div class="bhe-form-radiobutton">Thumbnail</div>
</label>
<label>
<f:form.radio name="layout" value="el-gallery-layout-swiper" checked="{cObj.allSettings.layout} == 'el-gallery-layout-swiper'" />
<div class="bhe-form-radiobutton">Swiper</div>
</label>
</div>
</div>
<div data-bhe-form-listener="tx_bh_page[data][content][settings][layout]" data-bhe-form-active-on="value" data-bhe-form-active-value="el-gallery-layout-thumbnail">
<f:if condition="{cObj.allSettings.thumbnailSizes}">
<f:if condition="{cObj.allSettings.thumbnailSizes -> f:count()} > 1 ">
<div class="bhe-formsettings-option">
<label>Breite</label>
<f:form.select name="style[thumbnailSize]" value="{cObj.allSettings.style.thumbnailSize}" options="{cObj.allSettings.thumbnailSizes}" />
</div>
</f:if>
</f:if>
</div>
<div data-bhe-form-listener="tx_bh_page[data][content][settings][layout]" data-bhe-form-active-on="value" data-bhe-form-active-value="el-gallery-layout-swiper">
<div class="bhe-formsettings-option">
<label>Effekt</label>
<f:form.select name="swiper[effect]" value="{cObj.allSettings.swiper.effect}" options="{slide:'Slide',fade:'Fade'}" />
</div>
<div class="bhe-formsettings-option">
<label>Navigation - Pfeile</label>
<f:form.checkbox name="swiper[navigation]" value="1" checked="{cObj.allSettings.swiper.navigation}" />
</div>
<div class="bhe-formsettings-option">
<label>Navigation - Punkte</label>
<f:form.checkbox name="swiper[pagination]" value="1" checked="{cObj.allSettings.swiper.pagination}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="wenn leer wird keine Mindesthöhe verwendet" data-tooltip-view="extended">Mindesthöhe (px,%,vh)</label>
<f:form.textfield name="swiper[min-height]" value="{cObj.allSettings.swiper.min-height}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="wenn leer wird als Default-Wert 0px verwendet" data-tooltip-view="extended">Platz zwischen den Spalten (px)</label>
<f:form.textfield name="swiper[spaceBetween]" value="{cObj.allSettings.swiper.spaceBetween}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="<b>- '2' ganzzahlige Werte</b><br/>gibt die Spaltenanzahl an<br/><b>- '300px' Werte mit dem Zusatz 'px'</b><br/> gibt die Mindestbreite an (automatische Berechnung)<br/><b>- 'auto'</b><br/> Breite wird über CSS definiert (für Profis)" data-tooltip-view="extended">Spalten Einstellung</label>
<f:form.textfield name="swiper[slideMinWidth]" value="{cObj.allSettings.swiper.slideMinWidth}" />
</div>
<div class="bhe-formsettings-option">
<label>Spalten ausmitteln</label>
<f:form.checkbox name="swiper[centeredSlides]" value="1" checked="{cObj.allSettings.swiper.centeredSlides}" />
</div>
<div class="bhe-formsettings-option">
<label>Loop (Elemente wiederholen sich)</label>
<f:form.checkbox name="swiper[loop]" value="1" checked="{cObj.allSettings.swiper.loop}" />
</div>
<div class="bhe-formsettings-option">
<label>Autoplay</label>
<f:form.checkbox name="swiper[autoplay]" value="1" checked="{cObj.allSettings.swiper.autoplay}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Es " data-tooltip-view="extended">Autoplay Dauer in Sekunden</label>
<input type="number" step="0.01" name="tx_bh_page[data][content][settings][swiper][autoplayOptions][delay]" min="0" value="{cObj.allSettings.swiper.autoplayOptions.delay}" />
</div>
</div>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:if>
<div class="bhe-formsettings-option">
<label>Bildbeschreibung aus Mediacake ausgeben</label>
<f:form.checkbox name="showPictureDescription" value="1" checked="{cObj.allSettings.showPictureDescription}" />
</div>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
</div>
</div>
</div>
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Iframe
bhIframe
Mit diesem Element können Iframes einfach in den Content eingebunden werden. Es stehen die nötigen Einstellungsmöglichkeiten zur Verfügung.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<iframe name="{cObj.settings.frm-name}" src="{cObj.link.url}" width="{cObj.settings.frm-width}" height="{cObj.settings.frm-height}" frameborder="0" scrolling="{cObj.settings.frm-scrolling}" {f:if(condition:'{cObj.settings.frm-allowfullscreen} == 1',then:'allowfullscreen',else:'')}></iframe>
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-formsettings-option">
<label>Iframe-Name</label>
<f:form.textfield name="frm-name" value="{cObj.settings.frm-name}" />
</div>
<div class="bhe-formsettings-option">
<label>Breite</label>
<f:form.textfield name="frm-width" value="{cObj.settings.frm-width}" />
</div>
<div class="bhe-formsettings-option">
<label>Höhe</label>
<f:form.textfield name="frm-height" value="{cObj.settings.frm-height}" />
</div>
<div class="bhe-formsettings-option">
<label>Scrollbars zulassen</label>
<f:form.select name="frm-scrolling" value="{cObj.allSettings.frm-scrolling}" options="{cObj.allSettings.frm-scrolling-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Erlaubt es den Inhalt des Iframes im Vollbild zu öffnen (muss von der eingebundenen Seite untersützt werden)" data-tooltip-view="extended">Fullscreen zulassen</label>
<f:form.checkbox name="frm-allowfullscreen" value="1" checked="{cObj.allSettings.frm-allowfullscreen}" />
</div>
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Impressum / Copyright
bhLegalNotice
Dieses Element gibt alle Copyright-Angaben aus, die im Mediacake gespeichert sind.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<bh:legalNotice.copyright></bh:legalNotice.copyright>
</bh:tmpl.element>
TypoScript
Typoscript
# Element im Bakehouse sichtbar machen
plugin.tx_bh.settings.contentElements.bhLegalNotice.hidden = 0
Spalten
bhCols
Teilt einen Content-Bereich in mehrere Spalten auf. Die Anzahl der Spalten kann über das Settings-Formular eingestellt werden.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="bhColcontainer cols{cObj.settings.colNum} cf">
<bh:for iterations="{cObj.settings.colNum}" startIndex="1">
<div class="col{i} bhCol">
<bh:tmpl.content section="sp{i}" parent="{cObj.uid}" />
</div>
</bh:for>
</div>
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-formsettings-option">
<label>Spaltenanzahl</label>
<f:form.select name="colNum" value="{cObj.allSettings.colNum}" options="{2:2,3:3,4:4,5:5,6:6}" />
</div>
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<f:then>
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:then>
<f:else>
<f:if condition="{cObj.allSettings.styleOptions}">
<div class="bhe-formsettings-option">
<label>Style</label>
<f:form.select multiple="true" name="style" value="{cObj.allSettings.style}" options="{cObj.allSettings.styleOptions}" />
</div>
</f:if>
</f:else>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Tab-Container
bhTabs
Gliedert Inhalt in Tabs. Verwendet als einzelne Unter-Elemente das Tab-Element.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="bh-tab-togglers clearfix">
<bh:tmpl.tab.toggler as="content">
<bh:tmpl.element object="{content}">
<bh:property.text tag="div" property="text" object="{content}" />
</bh:tmpl.element>
</bh:tmpl.tab.toggler>
</div>
<bh:tmpl.tab.content as="content" >
<bh:tmpl.content section="tabcontent" parent="{content.uid}" />
</bh:tmpl.tab.content>
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<f:then>
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:then>
<f:else>
<f:if condition="{cObj.allSettings.styleOptions}">
<div class="bhe-formsettings-option">
<label>Style</label>
<f:form.select multiple="true" name="style" value="{cObj.allSettings.style}" options="{cObj.allSettings.styleOptions}" />
</div>
</f:if>
</f:else>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Tab-Element
bhTabElement
Wird vom Element Tab als einzelner Tab verwendet.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<bh:property.text tag="div" property="text" />
<bh:tmpl.content section="tabcontent" parent="{cObj.uid}" />
</bh:tmpl.element>
TYPO3-Element
bhT3
Dient dazu, ein normales TYPO3-Element oder ein TYPO3-Plugin in den Content-Bereich einzufügen.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="bhT3Inner">
<bh:CObject content="{cObj}" />
</div>
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<f:then>
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:then>
<f:else>
<f:if condition="{cObj.allSettings.styleOptions}">
<div class="bhe-formsettings-option">
<label>Style</label>
<f:form.select multiple="true" name="style" value="{cObj.allSettings.style}" options="{cObj.allSettings.styleOptions}" />
</div>
</f:if>
</f:else>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
Video-Wizard
bhVideo
Mit diesem Element können Youtube- und Vimeo- oder auf dem Webspace befindliche Videos einfach in ein Bakehouse eingebunden werden.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<f:if condition="{cObj.allSettings.videos} != 0">
<f:then>
<div class="{cObj.settings.html5video-aspectratio} bhHtml5VideoElement">
<video {cObj.allSettings.html5videoControls} {cObj.allSettings.html5videoMuted} {cObj.allSettings.html5videoAutoplay} {cObj.allSettings.html5videoLoop}>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository" method="findByUid" options="{cObj.allSettings.videos.0}" as="file">
<source src="/uploads/tx_bh/{file.file}" type="video/mp4">
</bh:repository.load>
</video>
</div>
</f:then>
<f:else>
<f:if condition="{cObj.settings.yt-link}">
<div class="yt-wizard-wrapper {cObj.settings.yt-aspectratio}">
<iframe src="https://www.youtube-nocookie.com/embed/{cObj.settings.yt-link}?autoplay={cObj.settings.yt-autoplay}&controls={cObj.settings.yt-controls}&rel={cObj.settings.yt-rel}&start={cObj.allSettings.yt-start}&end={cObj.allSettings.yt-end}&playlist={cObj.allSettings.yt-playlist}" frameborder="0" {cObj.allSettings.yt-fs} allow="{f:if(condition:'{cObj.settings.yt-autoplay}',then:'autoplay;')} {f:if(condition:'{cObj.settings.yt-fs} == \'allowfullscreen\'',then:'fullscreen;')}"></iframe>
</div>
</f:if>
<f:if condition="{cObj.settings.vi-input}">
<div class="vi-wizard-wrapper {cObj.settings.vi-aspectratio}">
<iframe src="https://player.vimeo.com/video/{cObj.settings.vi-link}?color={cObj.settings.vi-color}&byline={cObj.settings.vi-byline}&portrait={cObj.settings.vi-portrait}&title={cObj.settings.vi-title}&loop={cObj.settings.vi-loop}&autoplay={cObj.settings.vi-autoplay}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</f:if>
</f:else>
</f:if>
</bh:tmpl.element>
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-morelink">
<div class="bhe-morelink-link">Youtube</div>
<div class="bhe-morelink-box">
<div class="bhe-morelink-box-inner">
<div class="bhe-formsettings-option">
<label>Video<i> (Url oder ID)</i></label>
<f:form.textfield style="width: 250px; font-size: 11px;" name="yt-input" id="yt-input" value="{cObj.settings.yt-input}" />
<f:form.hidden name="yt-link" id="yt-link" value="{cObj.settings.yt-link}" />
</div>
<div class="bhe-formsettings-option">
<label>Seitenverhältnis</label>
<f:form.select name="yt-aspectratio" value="{cObj.allSettings.yt-aspectratio}" options="{cObj.allSettings.yt-aspectratio-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Startpunkt <i>(Sekunden)</i></label>
<f:form.textfield name="yt-start" value="{cObj.settings.yt-start}" />
</div>
<div class="bhe-formsettings-option">
<label>Endpunkt <i>(Sekunden)</i></label>
<f:form.textfield name="yt-end" value="{cObj.settings.yt-end}" />
</div>
<div class="bhe-formsettings-option">
<label>Video automatisch starten</label>
<f:form.select name="yt-autoplay" value="{cObj.allSettings.yt-autoplay}" options="{cObj.allSettings.yt-autoplay-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>nach Video-Ende</label>
<f:form.select name="yt-rel" value="{cObj.allSettings.yt-rel}" options="{cObj.allSettings.yt-rel-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Player-Buttons</label>
<f:form.select name="yt-controls" value="{cObj.allSettings.yt-controls}" options="{cObj.allSettings.yt-controls-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Vollbild-Modus</label>
<f:form.select name="yt-fs" value="{cObj.allSettings.yt-fs}" options="{cObj.allSettings.yt-fs-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Playlist <i>(IDs mit Beistrich trennen)</i></label>
<f:form.textfield name="yt-playlist" value="{cObj.settings.yt-playlist}" />
</div>
</div>
</div>
</div>
<div class="bhe-morelink">
<div class="bhe-morelink-link">Vimeo</div>
<div class="bhe-morelink-box">
<div class="bhe-morelink-box-inner">
<div class="bhe-formsettings-option">
<label>Video<i> (Url oder ID)</i></label>
<f:form.textfield style="width: 250px; font-size: 11px;" name="vi-input" id="vi-input" value="{cObj.settings.vi-input}" />
<f:form.hidden name="vi-link" id="vi-link" value="{cObj.settings.vi-link}" />
</div>
<div class="bhe-formsettings-option">
<label>Seitenverhältnis</label>
<f:form.select name="vi-aspectratio" value="{cObj.allSettings.vi-aspectratio}" options="{cObj.allSettings.vi-aspectratio-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Video automatisch starten</label>
<f:form.select name="vi-autoplay" value="{cObj.allSettings.vi-autoplay}" options="{cObj.allSettings.vi-autoplay-opt}" />
</div>
<div class="bhe-formsettings-option">
<label>Endlosschleife</label>
<f:form.select name="vi-loop" value="{cObj.allSettings.vi-loop}" options="{cObj.allSettings.vi-loop-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden" data-tooltip-view="extended">Video-Titel</label>
<f:form.select name="vi-title" value="{cObj.allSettings.vi-title}" options="{cObj.allSettings.vi-title-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden" data-tooltip-view="extended">Name des Vimeo-Users</label>
<f:form.select name="vi-byline" value="{cObj.allSettings.vi-byline}" options="{cObj.allSettings.vi-byline-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden" data-tooltip-view="extended">Bild des Vimeo-Users</label>
<f:form.select name="vi-portrait" value="{cObj.allSettings.vi-portrait}" options="{cObj.allSettings.vi-portrait-opt}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip="Videos von 'Vimeo-Plus' Usern können diese Auswahl mitunter unterbinden" data-tooltip-view="extended">Farbe Player <i>(Hex-Wert ohne #)</i></label>
<f:form.textfield name="vi-color" value="{cObj.settings.vi-color}" />
</div>
</div>
</div>
</div>
<div class="bhe-morelink">
<div class="bhe-morelink-link">HTML5 Video (mp4)</div>
<div class="bhe-morelink-box">
<div class="bhe-morelink-box-inner">
<div style="line-height: 17px;">Um ein Video aus dem Media-Cake in einem HTML5 Video Element anzuzeigen, bitte bitte hier die Video Datei auswählen oder hochladen. Wir empfehlen das Video mit einer Datenrate von <span style="color: #c8f36b">maximal <b>2 Mbit/s</b></span> zu codieren. Das Video wird nicht automatisch konvertiert.<br><br></div>
<!-- Mini Mediacake -->
<div class="bhe-formsettings-option bhe-form-field-type-mediacake">
<label>VideoCake</label>
<f:if condition="{cObj.allSettings.videos}">
<f:then>
<bh:repository.load repository="TYPO3\Bh\Domain\Repository\FileRepository" method="findByUids" options="{cObj.allSettings.videos}" as="videos">
<bh:form.mediacake name="videos" value="{videos}" />
</bh:repository.load>
</f:then>
<f:else>
<bh:form.mediacake name="videos" value="{videos}" />
</f:else>
</f:if>
</div>
<div class="bhe-formsettings-option">
<label>Steuerelemente anzeigen</label>
<f:form.checkbox name="html5videoControls" value="controls" checked="{cObj.allSettings.html5videoControls}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip-view="extended" data-tooltip="Autoplay funktioniert aufgrund von Einschränkungen des Browsers nur wenn auch 'muted' ausgewählt ist.">Autoplay</label>
<f:form.checkbox name="html5videoAutoplay" value="autoplay" checked="{cObj.allSettings.html5videoAutoplay}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip-view="extended" data-tooltip="Video wird geräuschlos abgespielt.">Muted (notwendig für Autoplay)</label>
<f:form.checkbox name="html5videoMuted" value="muted" checked="{cObj.allSettings.html5videoMuted}" />
</div>
<div class="bhe-formsettings-option">
<label data-tooltip-view="extended" data-tooltip="Video wiederholt sich.">Loop</label>
<f:form.checkbox name="html5videoLoop" value="loop" checked="{cObj.allSettings.html5videoLoop}" />
</div>
<div class="bhe-formsettings-option">
<label>Seitenverhältnis</label>
<f:form.select name="html5video-aspectratio" value="{cObj.allSettings.html5video-aspectratio}" options="{cObj.allSettings.html5video-aspectratio-opt}" />
</div>
</div>
</div>
</div>
<f:if condition="{cObj.allSettings.styleOptions.classes}">
<div class="bhe-formsettings-option">
<label>Styles</label>
<f:form.select multiple="true" name="style[options]" value="{cObj.allSettings.style.options}" options="{cObj.allSettings.styleOptions.classes}" />
</div>
</f:if>
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
<f:form.submit value="Speichern" />
</bh:form.settingsform>
LottieFiles-Player
el-lottiefiles-player
Mit dem LottieFiles-Player können LottieFiles (.json) eingebunden und abgespielt werden. Lottie ist ein vektorbasiertes Grafikformat für Animationen, welches auf SVG und JSON basiert. Es wurde von Airbnb entwickelt, um das Einfügen von Animationen auf Webseiten zu erleichtern.
Element-Template
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<div class="el-lottiefiles-player-container">
<bh:get.file uid="{cObj.allSettings.lottieFile}" as="file">
<bh:lottie.player
style="{f:if(condition: '{cObj.allSettings.height}', then: 'height: {cObj.allSettings.height}')}"
file="{file}"
settings="{cObj.allSettings.lottieSettings}" />
</bh:get.file>
</div>
</bh:tmpl.element>
TypoScript
Typoscript
plugin.tx_bh.settings.contentElements.el-lottiefiles-player < abstract.bhElement
plugin.tx_bh.settings.contentElements.el-lottiefiles-player {
name = LottieFiles Player
description = LottieFiles abspielen
templateFile = el-lottiefiles-player.html
templatePath = typo3/sysext/bh/Resources/Public/Elements/el-lottiefiles-player/
settingsForm = typo3/sysext/bh/Resources/Public/Elements/el-lottiefiles-player/el-lottiefiles-player-settings.html
iconFile = typo3/sysext/bh/Resources/Public/Icons/Elemente/youtube.svg
bheListgroup = 1
link = 0
hidden = 1
doNotRenderLink = 1
options {
oncreate = advanced
edit = 0
}
lottieSettings{
loop = 1
autoplay = 1
speed = 1
}
settingsGlobalFields {
templatePath = fileadmin/templates/elements/el-settings-global-fields.html
}
userClass = bh-centered
}
Element-Settings
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<div class="bhe-tab-box">
<div class="bhe-tab-toggler-box bhe-tab-toggler-style-icon-text">
<div class="bhe-tab-toggler bhe-tab-active">
<div class="bhe-tab-toggler-icon bhe-font-page"></div>
<div class="bhe-tab-toggler-text">.json Datei</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-video"></div>
<div class="bhe-tab-toggler-text">Lottie Player</div>
</div>
<div class="bhe-tab-toggler">
<div class="bhe-tab-toggler-icon bhe-font-quicklook"></div>
<div class="bhe-tab-toggler-text">Layout</div>
</div>
</div>
<div class="bhe-tab-content-box">
<div class="bhe-tab-content bhe-tab-content-padding bhe-tab-active">
<div class="bhe-formsettings-option">
<label data-tooltip="Wähle ein Lottiefile im .Json-Format aus." data-tooltip-view="extended">LottieFile Auswahl</label>
<bhif-widget-mediacake mime-types="application/json" name="tx_bh_page[data][content][settings][lottieFile]" value="{cObj.allSettings.lottieFile}"></bhif-widget-mediacake>
</div>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<bh:lottie.settings name="lottieSettings"></bh:lottie.settings>
<div class="bhe-formsettings-option">
<label>Höhe (px, %, vh)</label>
<f:form.textfield name="height" value="{cObj.allSettings.height}" />
</div>
</div>
<div class="bhe-tab-content bhe-tab-content-padding">
<bh:form.dynamicFields item="{cObj}" settings="{cObj.allSettings.settingsGlobalFields}" />
</div>
</div>
</div>
<f:form.submit value="Speichern" />
</bh:form.settingsform>