Gallerie  

    bh
    Darstellung einer Swiper- oder Thumbnail-Gallerie

    Eine Gallerie, die über den Mini-Mediacake im Settings-Formular befüllt werden kann.

    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="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>
    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}" 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>