Content-Element, in welches weitere Content-Elemente abgelegt werden können. Diese werden als Swiper ausgegeben.
bh
Swiper-Element
HTML-Template: el-swiper.html
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>
HTML-Template (Children): el-swipe-item/el-swipe-item.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:tmpl.element object="{cObj}">
<bh:tmpl.content section="el-swipe-item" parent="{cObj.uid}" />
</bh:tmpl.element>
Typoscript: el-swiper.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements.el-swiper < abstract.bhElement
plugin.tx_bh.settings.contentElements.el-swiper {
name = Swiper
description = Inhalt kann horizontal angeordnet werden
templateFile = el-swiper.html
templatePath = typo3conf/ext/bh/Resources/Public/Elements/el-swiper/
settingsForm = EXT:bh/Resources/Public/Elements/el-swiper/el-swiper-settings.html
iconFile = typo3conf/ext/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
}
bh.page.includeCSS {
el-swiper = EXT:bh/Resources/Public/Elements/el-swiper/el-swiper.css
}
[bh.isMobile]
bhDefaultMobilePage.includeCSS {
el-swiper < page.includeCSS.el-swiper
}
[global]
@import 'EXT:bh/Resources/Public/Elements/el-swiper/el-swipe-item/el-swipe-item.typoscript'
Typoscript (Children): el-swipe-item/el-swipe-item.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements.el-swipe-item < abstract.bhElement
plugin.tx_bh.settings.contentElements.el-swipe-item {
name = Swipe Item
description = Kind Element des Swiper-Elementes
templateFile = el-swipe-item.html
templatePath = typo3conf/ext/bh/Resources/Public/Elements/el-swiper/el-swipe-item/
settingsForm = EXT:bh/Resources/Public/Elements/el-swiper/el-swipe-item-settings.html
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/filled.svg
hidden = 1
link = 0
options {
settings = 0
translate = 0
edit = 0
copy = 0
moveable = 0
}
userClass = swiper-slide
}
bh.page.includeCSS.el-swipe-item = EXT:bh/Resources/Public/Elements/el-swiper/el-swipe-item/el-swipe-item.css
[bh.isMobile]
bhDefaultMobilePage.includeCSS.el-swipe-item < page.includeCSS.el-swipe-item
[global]
Settings-HTML: el-swiper-settings.html
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">
<labeldata-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>
Settings-HTML (Children): el-swipe-item/el-swipe-item-settings.html
HTML
{namespace bh=TYPO3\Bh\ViewHelpers}
<bh:form.settingsform content="{cObj}">
<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>Breite des Elements</label>
<f:form.select name="style[width]" value="{cObj.allSettings.style.width}"
options="{cObj.allSettings.styleOptions.width}" />
</div>
<f:form.submit value="Speichern" />
</bh:form.settingsform>