Site Konfiguration
Das erforderliche Site Set "T3S Bootstrap - MAIN SETTINGS” ist einzubinden.dependencies: typo3/fluid-styled-content
Hiermit wird typo3/fluid-styled-contentautomatisch eingebunden!
Folgende Sets sind optional:
- T3S Bootstrap - VERSION (optional)
Erforderlich für den Scheduler Task “CDN to local” oder “Custom SCSS” - T3S Bootstrap - IMAGE SETTINGS (optional)
Diverse Settings für die Bildgröße. - T3S Bootstrap - BOOTSTRAP OPTIMIZE (optional)
Wird nur benötigt, wenn du bestimmte Bootstrap Componenten entfernen möchtest. - T3S Bootstrap - OTHER SETTINGS (optional)
Verschiedene Optionen, die selten zum Einstaz kommen. - T3S Bootstrap - PAGES OVERRIDE (optional)
Hiermit kannst du globale Settings für Seiteneigenschften vorbelegen! Einige können unter “Seite bearbeiten” überschrieben werden. - T3S Bootstrap - CONTENT BLOCKS (optional)
Nur mit EXT:content_blocks. Reicht Padding, Margin, „extra class“ und Hintergrund an die Templates der Content Blocks weiter.
Site Settings
Konstanten
T3S Bootstrap - MAIN SETTINGS
T3SB Templates
| Path of Fluid Layouts | Pfad zu den Layouts | bootstrap.view.layoutRootPath |
| Path of Fluid Partials | Pfad zu den Partials | bootstrap.view.partialRootPath |
| Path of Fluid Templates | Pfad zu den Templates | bootstrap.view.templateRootPath |
T3SB CDN, SCSS and Google Fonts
Nach einer Änderung muss der Scheduler-Task ausgeführt werden, um die erforderlichen Dateien in das Asset-Verzeichnis zu schreiben – standardmäßig typo3temp/assets/t3sbootstrap/, seit 5.3.59 über die Extension-Konfiguration assetDirverlegbar!
| Enable CDN | Bitte die „DSGVO“ („DSGVO“) beachten. Bevor CDN deaktiviert werden kann, den Scheduler-Task „T3SB CDN to local“ ausführen. Abwägung lokal gegen CDN und was bei geleertem typo3temp/ passiert: Deployment & typo3temp. | bootstrap.cdn.enable |
| Enable Custom SCSS | Den Scheduler-Task „T3SB Custom SCSS” einmalig ausführen. Bevor „Enable Custom SCSS” aktiviert werden kann, muss „Enable CDN” deaktiviert werden. | bootstrap.cdn.customScss |
| Bootswatch Themes | Den Scheduler-Task „T3SB CDN to local” und „T3SB Custom SCSS” ausführen, wenn „Custom SCSS” aktiviert ist. Überschreibe die Standardwerte von Bootstrap mit dem ausgewählten Bootswatch-Theme – Info: https://bootswatch.com/ | bootstrap.cdn.bootswatch |
| ENTFÄLLT Keep Bootstrap variables | Mit 5.3.57 ersatzlos gestrichen und wird ignoriert – die Einstellung kann aus der Site-Konfiguration entfernt werden. Sie sollte die SCSS-Datei vor dem Scheduler-Task schützen, hat das aber nie gehalten: beim Speichern im Backend wurde die Datei trotzdem aus dem Konfigurations-Datensatz überschrieben. Quelle ist heute allein der Datensatz – Einzelheiten und das Vorgehen beim Update unter BE Modul. | bootstrap.cdn.keepVariables |
| Comma separated list with google fonts | Den Scheduler-Task „T3SB CDN to local” ausführen. Integriere Google Fonts „DSGVO”-konform lokal in deiner Website (z. B.: Montserrat, Fira Sans). | bootstrap.cdn.googlefonts |
| Font-weights for Google fonts | Den Scheduler-Task „T3SB CDN to local” ausführen. | bootstrap.gooleFontsWeights |
5.3.50 Der Scheduler-Task schreibt die Dateien nicht mehr in EXT:t3sb_package/, sondern nach typo3temp/assets/t3sbootstrap/ – seit 5.3.59 über assetDir verlegbar. Am Ablauf ändert sich nichts.
jQuery
| Disable jQuery (true by default) | Diese Option deaktivieren, wenn jQuery benötigt wird. | bootstrap.disable.jquery |
| Load jQuery into the header | jQuery im Header laden. | bootstrap.config.jqueryHeader |
T3SB Image settings
| Set Cookie with viewport width | Nützlich bei Verwendung des Containers „fluid-container” und automatischer Bildbreite. | bootstrap.image.viewportWidthCookie |
Default Image Size
| Min. width | Wenn diese Option aktiviert ist, wird die minimale „equalMediaWidth“ auf 575px und damit auf 100 % Breite auf Mobilgeräten festgelegt. Kann überschriebne werden! | bootstrap.image.minimumWidth |
| Ratio | Wenn aktiviert, verwenden Sie Breite und Höhe für das Verhältnis in Textmedien, Textbildern, Bildern, Karten und Medienobjekten. | bootstrap.image.ratioWithHeight |
| Max. image width Media object | Die Standard-Maximalbreite für das Medienobjekt. | bootstrap.image.maxWidthMediaObject |
| Max. image width Toast | Die Standard-Maximalbreite für Bootstrap-Toasts. | bootstrap.image.maxWidthToast |
| Disable auto row | Die Standardeinstellung „Gallery row width in % = auto“ wird bei Aktivierung auf „none“ gesetzt. | bootstrap.image.disableAutoRow |
Additional image sizes
(srcset) das für jedes Inhaltsbild generiert werden sollte
| For Desktop min-width 1200px | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.srcsetDesktop |
| For for Tablet min-width 576px | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.srcsetTablet |
| For Mobile max-width 575px | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.srcsetMobile |
| For Background-Image | Durch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln. | bootstrap.image.bgMediaQueries |
Lazyloading Threshold
| Threshold for Lazy load | Wenn „lazyLoad” in der EM-Konfiguration aktiviert ist, der Abstand außerhalb des Ansichtsfensters, in Pixel, vor dem mit dem Laden der Bilder begonnen werden soll. | bootstrap.image.lazyLoadThreshold |
| Lazy load for images in the BG-Wrapper | Jedoch nicht für “backgrond-images” | bootstrap.image.lazyLoadBgWrapperImage |
T3SB Optimize Bootstrap
Nur sinnvoll mit „Custom SCSS“: Wer eine Komponente abwählt, lässt ihren @import aus dem kompilierten CSS heraus und spart Dateigröße. Nach jeder Änderung den Scheduler-Task t3sbootstrap:customScss ausführen.
progress, tooltip, popover und placeholders werden von t3sbootstrap selbst nicht verwendet.
| tables | bootstrap.optimize.tables | |
| forms | bootstrap.optimize.forms | |
| buttons | bootstrap.optimize.buttons | |
| transitions | bootstrap.optimize.transitions | |
| dropdown | bootstrap.optimize.dropdown | |
| button-group | bootstrap.optimize.button-group | |
| nav | bootstrap.optimize.nav | |
| navbar | bootstrap.optimize.navbar | |
| card | bootstrap.optimize.card | |
| accordion | bootstrap.optimize.accordion | |
| breadcrumb | bootstrap.optimize.breadcrumb | |
| pagination | bootstrap.optimize.pagination | |
| badge | bootstrap.optimize.badge | |
| alert | bootstrap.optimize.alert | |
| progress | von t3sbootstrap nicht verwendet | bootstrap.optimize.progress |
| list-group | bootstrap.optimize.list-group | |
| close | bootstrap.optimize.close | |
| toasts | bootstrap.optimize.toasts | |
| modal | bootstrap.optimize.modal | |
| tooltip | von t3sbootstrap nicht verwendet | bootstrap.optimize.tooltip |
| popover | von t3sbootstrap nicht verwendet | bootstrap.optimize.popover |
| carousel | bootstrap.optimize.carousel | |
| spinners | bootstrap.optimize.spinners | |
| offcanvas | bootstrap.optimize.offcanvas | |
| placeholders | von t3sbootstrap nicht verwendet | bootstrap.optimize.placeholders |
T3SB Other
Zusätzliche Einstellungen, die zuvor nicht im Konstanten-Editor enthalten waren
Miscellaneous
| Include Bootstraps bundle.min.js | bundle.min.js (include popper.js) anstelle von 2 Dateien | bootstrap.bundle.enable |
| Add class "section-index" | zu jedem Inhaltselement – Wird in einigen seltenen Fällen verwendet | bootstrap.config.sectionMenuClass |
| Disable default CSS - t3sbootstrap.css | bootstrap.config.disableDefaultCss | |
| Disable Fontawesome CSS - t3sb-fontawseome.css | bootstrap.config.disableFaCss | |
| Clears the cache | Wenn T3SB config gespeichert wird | bootstrap.extconf.clearPageCache |
| Disable scroll to top for accordions | bootstrap.disable.accordion.scrollToTop | |
| creating "Skip Links" to navigation, content or footer | Für barrierefreien Zugang, wenn aktiviert (in Main.fluid.html) | bootstrap.skiplinks |
| Remove any string from shortcuts | Entfernt alle Zeichenfolgen aus shortcuts, wenn diese sich in einem übergeordneten CE/Wrapper befinden. | bootstrap.shortcutsremove |
| Style one for the submenu | bootstrap.submenu.styleOne | |
| Enable color mode toggler | Nur wenn „bootstrap.config.navbarDarkMode” deaktiviert ist | bootstrap.colorMode.enable |
| Position-fixed bottom-0 start-0 mb-3 ms-3 | Info: https://getbootstrap.com/docs/5.3/utilities/position/#center-elements | bootstrap.colorMode.position |
Pagebrowser
MORE INFO: https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Hmenu/Index.html#special-browse
| Enable Pagebrowser | bootstrap.pagebrowser.enable | |
| Prev and next navigation | Wenn diese Option aktiviert ist, springen die Navigationen „Zurück“ und „Weiter“ zum nächsten Abschnitt, wenn das Ende der Seiten im aktuellen Abschnitt erreicht ist. | bootstrap.pagebrowser.prevnextToSection |
| Prev item | Optionen: index|up|nextsection|next|prev|prevsection | bootstrap.pagebrowser.prevItem |
| Next item | Optionen: index|up|nextsection|next|prev|prevsection | bootstrap.pagebrowser.nextItem |
| Entry Level | bootstrap.pagebrowser.entryLevel |
Back to top button
| Link Title | bootstrap.backToTopTitle | |
| Class | Font Awesome HTML class | bootstrap.backToTopClass |
| Iconpack Class | Wenn EXT:iconpack aktiviert ist | bootstrap.backToTopIconpack |
| Back to top icon for all pages | bootstrap.backToTopForAllPages |
Navbar
| No link title in the navbar links | bootstrap.navbar.noLinkTitle | |
| DEPRECATED Navbar brand image path | Nur wirksam, wenn navbar_image im Konfigurations-Datensatz leer ist | bootstrap.navbar.image.defaultPath |
| DEPRECATED Navbar brand image width | In px – nur wirksam, wenn navbar_image_width im Konfigurations-Datensatz 0 ist | bootstrap.navbar.image.width |
| DEPRECATED Navbar brand image height | In px – nur wirksam, wenn navbar_image_height im Konfigurations-Datensatz 0 ist | bootstrap.navbar.image.height |
| DEPRECATED Navbar brand image alt text | Nur wirksam, wenn navbar_image_alt im Konfigurations-Datensatz leer ist | bootstrap.navbar.image.altText |
| Default small breakpoint (sm) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.sm |
| Default medium breakpoint (md) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.md |
| Default large breakpoint (lg) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.lg |
| Default extra large breakpoint (xl) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.xl |
| Default extra extra large breakpoint (xxl) | Benötigt für inlineJS, z. B. bei navbar hover | bootstrap.navbar.breakpoint.xxl |
| Subdropdown with two columns if items greater or equal | bootstrap.navbar.subdropdown.twoColumns | |
| Page UID with search plugin | Link zu deinem Search-PlugIn | bootstrap.navbar.searchboxLink |
| Fe user name in navbar - if logged in | bootstrap.navbar.feUserName | |
| Dropdown icon float right | bootstrap.navbar.floatDropdownIconRight |
5.3.51 Das Brand-Logo wird jetzt im Konfigurations-Datensatz gepflegt, Tab „Brand (Logo)“: dort stehen neben dem Pfad auch Bildbreite, Bildhöhe und Alternativtext. Die vier Einstellungen bootstrap.navbar.image.* bleiben als Rückfall bestehen und greifen nur noch, solange das jeweilige Feld im Datensatz leer bzw. 0 ist – bestehende Installationen sehen nach dem Update also unverändert aus.
Zu tun: Die drei neuen Felder brauchen eine Datenbankanalyse (neue Spalten navbar_image_width, navbar_image_height, navbar_image_alt). Wer seine Werte bereits hier in den Site-Settings stehen hat, holt sie mit dem Upgrade Wizard „Move the navbar brand image settings into the configuration record“ in die Datensätze – alle vier, den Pfad eingeschlossen. Einzelheiten unter BE Modul.
Die vier Einstellungen tragen im Settings-Editor deshalb jetzt DEPRECATED im Titel.
Global pages override
| Container (for the whole page) | bootstrap.pages.override.container | |
| Aside columns width | bootstrap.pages.override.smallColumns | |
| Dropdown menu right | bootstrap.pages.override.dropdownRight | |
| Aside order on mobile | bootstrap.pages.override.mobileOrder | |
| Breakpoint | bootstrap.pages.override.breakpoint | |
| Title color | Hex color codes, RGB or CSS variables e.g. var(--bs-primary) | bootstrap.pages.override.titlecolor |
| Subtitle color | Hex color codes, RGB or CSS variables e.g. var(--bs-primary) | bootstrap.pages.override.subtitlecolor |
T3SB - Version-Settings
Für CDN und den Scheduler-Task „T3SB CDN to local“ verwendete Versionen könne hier angepasst werden – müssen gültig sein:
| Bootstrap | bootstrap.bundle.min.js, bootstrap.min.js & bootstrap.min.css | https://getbootstrap.com/ |
| Popper JS | popper.js | https://popper.js.org/ |
| Masonry JS | masonry.pkgd.min.js | https://getbootstrap.com/ |
| jQuery library | jquery.min.js | https://jquery.com/ |
| Lazyload | lazyload.min.js | https://github.com/ |
| Animate CSS: animate.compat.css | animate.compat.css | https://animate.style |
| Baguette Box: baguetteBox.min.css | baguetteBox.min.js & baguetteBox.min.css | https://feimosi.github.io/ |
| Halkabox | halkaBox.min.js & halkaBox.min.css | https://ahmednooor.github.io/ |
| G Lightbox | glightbox.min.js & glightbox.min.css | https://github.com/ |
| Jarallax | jarallax.min.js & jarallax-video.min.js | https://github.com/ |
| Swiper | swiper-bundle.min.js & swiper-bundle.min.css | https://swiperjs.com |
T3S Bootstrap - CONTENT BLOCKS
Dieses Set wird nur benötigt, wenn zusätzlich EXT:content_blocks im Einsatz ist. Es hat keine eigenen Einstellungen.
Die Felder von t3sbootstrap – Padding, Margin, „extra class“ und Hintergrund – hängen per addToAllTCAtypes an tt_content und stehen im Formular eines Content Blocks deshalb ohnehin schon. Ausgewertet wurden sie bisher aber nur in den Content-Elementen von t3sbootstrap: dafür sorgt der BootstrapProcessor, und der lief allein unter lib.contentElement.
Das Set hängt ihn zusätzlich an lib.contentBlock, von dem jedes Content Block erbt:
lib.contentBlock {
dataProcessing {
5 < lib.contentElement.dataProcessing.5
6 < lib.contentElement.dataProcessing.224
}
}Die Nummern liegen bewusst unter 10: dort hängt EXT:content_blocks seinen eigenen Prozessor ein und ersetzt dabei data durch ein ContentBlockData-Objekt. Die beiden Prozessoren greifen auf data wie auf ein Array zu und müssen davor laufen.
Im frontend.html eines Content Blocks stehen damit dieselben Variablen wie in den Templates von t3sbootstrap:
{classAttr} | fertiges class="…" aus Padding, Margin und „extra class“ |
{styleAttr} | fertiges style="…" aus Hintergrundfarbe und „extra style“ |
{styleInline} | derselbe Stil als Regel für einen <style>-Block |
{class} | nur die Klassen, mit führendem Leerzeichen |
{trimClass} | dieselben Klassen ohne führendes Leerzeichen |
{header} | Klassen und Ausrichtung der Überschrift |
{parentCType} | CType des Containers, falls das Element in einem steckt |
Beispiel:
<div id="c{data.uid}"{classAttr -> f:format.raw()}{styleAttr -> f:format.raw()}>