Core-Content-Elemente

    Ein Bakehouse wird in der Regel mit einer Anzahl von vorinstallierten Content-Elementen ausgeliefert. Diese sind Teil des Bakehouse-Cores und werden bei den zentralen Bakehouse-Updates berücksichtigt.

    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 Sinne 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, solltest du zuerst prüfen, ob nicht ein bereits vorhandenes Element für ihren 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

    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>

    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>

    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>