Eine Gallerie, die über den Mini-Mediacake im Settings-Formular befüllt werden kann.
bh
Darstellung einer Swiper- oder Thumbnail-Gallerie
HTML-Template: el-gallery.html
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} != '' && {cObj.allSettings.filter.cats} != '0'">
<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="findByUid" 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 {cObj.allSettings.thumbnaiLightboxgroup}" 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="/{file.relativeFile}" 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="/{file.relativeFile}" 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>
Typoscript: el-gallery.typoscript
TYPOSCRIPT
plugin.tx_bh.settings.contentElements {
el-gallery < abstract.bhElement
el-gallery {
name = Bildergalerie
description = Zeigt alle Bilder einer Kategorie an
iconFile = typo3conf/ext/bh/Resources/Public/Icons/Elemente/gallery.svg
settingsForm = EXT:bh/Resources/Public/Elements/el-gallery/el-gallery-settings.html
templatePath = typo3conf/ext/bh/Resources/Public/Elements/el-gallery/
templateFile = el-gallery.html
bheListgroup = 0
hidden = 1
options {
oncreate = advanced
edit = 0
translate = 0
copy = 1
moveable = 1
}
swiper {
min-height = 300px
spaceBetween = 0px
slideMinWidth = 1
}
thumbnailSizes{
thumbnail-default = Standard
}
style.thumbnailSize = thumbnail-default
layout = el-gallery-layout-swiper
enableLightbox = 1
filter.filterMethod = items
userClass = bh-centered
}
}
bh.page.includeCSS.el-gallery = EXT:bh/Resources/Public/Elements/el-gallery/el-gallery.css
bh.page.includeJS.el-gallery = EXT:bh/Resources/Public/Elements/el-gallery/el-gallery.js
[bh.isMobile]
bhDefaultMobilePage.includeCSS.el-gallery < bh.page.includeCSS.el-gallery
bhDefaultMobilePage.includeJS.el-gallery < bh.page.includeJS.el-gallery
[global]
Settings-HTML: el-gallery-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-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 0der 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}"
size="16" 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 class="bhe-formsettings-option">
<label>Galerie in eigener Lightboxgruppe</label>
<f:form.checkbox name="thumbnaiLightboxgroup" value="lightboxgroup"
checked="{cObj.allSettings.thumbnaiLightboxgroup}" />
</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-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-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>