Die 3 Bausteine im Überblick
md_base – die stabile Grundlage
Hier liegt alles, was du projektübergreifend als „Default“ nutzen willst: RTE/CKEditor-Preset, grundlegende TCA-Erweiterungen,
Base-Set mit TypoScript und PageTS.
Kurz: Fundament & Regeln, damit Inhalte und Styling konsistent bleiben.
| Klasse | Zweck |
|---|---|
| SalAttributesProcessor | Baut aus den tx_md_base_sal_* Feldern ein Array und einen String mit data-sal-Attributen. Wird genutzt, um SAL.js-Animationen sauber und wiederverwendbar an Wrapper, Links etc. zu hängen. |
| BackgroundEffectProcessor | Liest tx_md_base_bg_effect plus Blur/Dim/Noise/Gradient-Felder aus und setzt Defaults. Erzeugt einen CSS-Variablen-String (effectVarsStyle) und eine effectList inkl. Flag hasFixedEffect für „fixed“-Effekte. |
| TextColorProcessor | Berechnet aus tx_md_base_bg_color und tx_md_base_text_color eine effektive Textfarbe. Liefert textEffective, textClass und bgClass mit Bootstrap-/Theme-aware Logik (inkl. Dark Mode und Image-Fallback). |
| BackgroundMediaProcessor | Nimmt das erste bgMedia-Element und generiert eine 1920c-Image-URL. Baut bgStyleVars (mit --bg-image + Effekt-Variablen) und bgStyleFixedInline für Parallax/fixed-Hintergründe. |
| AppearanceClassProcessor | Entscheidet, ob überhaupt gewrappt werden soll (shouldWrap) und ob Content/BG fullwidth sind. Generiert alle Layout- und Appearance-Klassen (outerBgClass, layerBgClass, roundedClass, svgClass, paddingClass, equalHeightClass etc.) und verteilt sie auf Wrapper und Layer. |
| Klasse | Zweck |
|---|---|
| HtmlMinifier | Greift in der Response-Pipeline ein, prüft Kontext (Production) und Site-Setting. Minimiert HTML (Kommentare und Whitespace), um Ausgabe im Live-Betrieb zu verschlanken. |
| Klasse | Zweck |
|---|---|
| EffectSelected (DisplayCondition) | Entscheidet, ob überhaupt gewrappt werden soll (shouldWrap) und ob Content/BG fullwidth sind. Generiert alle Layout- und Appearance-Klassen (outerBgClass, layerBgClass, roundedClass, svgClass, paddingClass, equalHeightClass etc.) und verteilt sie auf Wrapper und Layer. |
| Klasse | Zweck |
|---|---|
| ScssViewHelper | Kompiliert SCSS-Dateien oder Inline-SCSS zu CSS über ws_scss und registriert das Ergebnis im AssetCollector. Unterstützt Variablen, Pfad-Handling und wahlweise Inline- oder File-Ausgabe im Head. |
| AnyViewHelper | Prüft, ob eines oder mehrere gesuchte Tokens in einer CSV/Whitespace-Liste vorkommt. Typischer Einsatz: „Ist einer dieser Effekte aktiv?“, z.B. für Condition-Checks in Fluid. |
| ClassListViewHelper | Wandelt eine CSV/Whitespace-Liste in eine Klassenliste mit Prefix/Suffix um. Praktisch für einfache Fälle direkt im Template; in der neuen Struktur eher in Processors gekapselt. |
| Klasse | Zweck |
|---|---|
| DynamicColumnsProcessor | Verarbeitet das b13/container-Element dynamic_columns und berechnet für jede Spalte (1–6) responsive Bootstrap-Widths (xxl/lg/xs mit Vererbung nach unten). Holt via ContainerProcessor die Children je colPos (200–205) und baut ein children-Array mit content (gerendert), widths und index. Setzt außerdem columnCount, columnWidths, containerUid und childrenCount für das Fluid-Template. |
| ParentContainerProcessor | Liest den Parent-Container (via tx_container_parent) aus der Datenbank und stellt dessen vollständige Rohdaten in parentContainer bereit. Berechnet zusätzlich drei Flags: isCardsGroup, isCardsGrid (beide nur wenn Parent CType=cards mit entsprechendem Layout) und isButtonLink (wenn Parent CType=button_group). Nutzt rohe tt_content-Daten ($cObj->data), nicht ContentBlocks-Objekte, für zuverlässige Parent-Erkennung. |
| Klasse | Zweck |
|---|---|
| BackendAssetLoader | Lädt im Backend für jede Seite mit dynamic_columns-Containern die Container-Konfiguration und generiert dynamische CSS-Regeln für die TCA-Spalten (200–205). Blendet initial alle colPos 200–205 aus (Flicker-Prevention) und macht sie erst sichtbar, wenn body.md-columns-loaded gesetzt wird. Erzeugt für jeden Container individuelle CSS-Regeln für Spaltenbreiten, Min-Widths und Header-Labels (col-X (Y%)) im Page-Modul. Liest auch deaktivierte (hidden=1) Container, damit das Backend-Grid funktioniert. Injiziert window.MD_CONTAINER_DATA als JSON + Backend.css + backend.js (als Modul). |
md_project – Projekt-Theme & Site Settings
Hier lebt das konkrete Projekt: Page-Templates, Header/Footer, Navigation (inkl. Mega-Menü), Hero-Ausgabe, ToC/ScrollSpy, SCSS-Struktur – und vor allem die
Site Settings als zentrale Steuerung.
Kurz: Look & Feel + Projektlogik.
| Klasse | Zweck |
|---|---|
| MegaMenuProcessor | Reichert ein bestehendes MenuProcessor-Ergebnis (z.B. mainMenu) um gerenderte Mega-Menu-Inhalte an. Prüft je Menu-Item das Feld tx_md_megamenu_enabled und rendert dann alle tt_content-Elemente aus colPos=0 der konfigurierten tx_md_megamenu_source_pid (Fallback: Page-UID selbst). Das Ergebnis landet in item['megaHtml'] als String. Funktioniert rekursiv auch für Untermenüs, ist aber primär für Level-1-Navigation gedacht. |
| TocProcessor | Generiert ein hierarchisches Table-of-Contents aus Content-Element-Headern (tt_content.header) einer Seite. Liest die gewünschten Heading-Levels (1–6) aus tx_md_project_toc_levels (Fallback: H2+H3) und durchsucht nur die konfigurierten colPos (tx_md_project_toc_source_colpos oder Heuristik: mdproject_2col → colPos=1, sonst colPos=0). Berücksichtigt Container-Children (via tx_container_parent-Walk) und filtert ausgeblendete Header (header_layout=100) sowie explizit ausgeschlossene (tx_md_project_toc_exclude). Baut einen verschachtelten Tree (children-Arrays) basierend auf Heading-Hierarchie und verankert jedes Item per id="c{uid}". |
| Klasse | Zweck |
|---|---|
| MegaMenuBackendLayoutListener | Hört auf AfterRecordCreatedEvent und AfterRecordUpdatedEvent der pages-Tabelle und schaltet automatisch das Backend Layout um, wenn tx_md_megamenu_enabled geändert wird. Maps zwischen Base-Layouts (mdproject_1col, mdproject_2col, mdproject_3col) und ihren Mega-Varianten (*_mega), die eine zusätzliche Content-Spalte (colPos=910) für Mega-Menu-Inhalte bereitstellen. Unterstützt sowohl PageTS-Layouts (pagets__<key>) als auch DB-Layouts. Lässt fremde/custom Layouts unangetastet. |
Die Ordnerstruktur auf einen Blick
md_base/
├─ Classes/
│ ├─ DataProcessing/
│ │ ├─ AppearanceClassProcessor.php
│ │ ├─ BackgroundEffectProcessor.php
│ │ ├─ BackgroundMediaProcessor.php
│ │ ├─ SalAttributesProcessor.php
│ │ └─ TextColorProcessor.php
│ ├─ Middleware/
│ │ └─ HtmlMinifier.php
│ ├─ Tca/
│ │ └─ DisplayCondition/
│ │ └─ EffectSelected.php
│ └─ ViewHelpers/
│ ├─ Asset/
│ │ └─ ScssViewHelper.php
│ └─ Csv/
│ ├─ AnyViewHelper.php
│ └─ ClassListViewHelper.php
│
├─ Configuration/
│ ├─ RTE/
│ │ └─ Default.yaml
│ ├─ Sets/
│ │ └─ Base/
│ │ ├─ config.yaml
│ │ ├─ constants.typoscript
│ │ ├─ page.tsconfig
│ │ ├─ settings.definitions.yaml
│ │ └─ setup.typoscript
│ ├─ TCA/
│ │ └─ Overrides/
│ │ ├─ pages.php
│ │ └─ tt_content.php
│ ├─ RequestMiddlewares.php
│ └─ Services.yaml
│
├─ Resources/
│ ├─ Private/
│ │ ├─ Language/
│ │ │ ├─ de.locallang_db.xlf
│ │ │ └─ locallang_db.xlf
│ │ ├─ Layouts/
│ │ │ ├─ Content/
│ │ │ │ ├─ Default.html
│ │ │ │ └─ NoWrap.html
│ │ │ └─ ContentNoWrap/
│ │ │ └─ Default.html
│ │ └─ TemplateOverrides/
│ │ ├─ friendsoftypo3/
│ │ │ └─ content-blocks/
│ │ │ └─ Layouts/
│ │ │ └─ Preview.html
│ │ └─ typo3/
│ │ └─ cms-backend/
│ │ └─ Partials/
│ │ └─ PageLayout/
│ │ └─ RecordDefault/
│ │ └─ Footer.html
│ └─ Public/
│ └─ Icons/
│ └─ Extension.svg
│
├─ composer.json
├─ ext_emconf.php
├─ ext_localconf.php
├─ ext_tables.sql
└─ README.md
md_elements/
├─ Classes/
│ ├─ DataProcessing/
│ │ └─ DynamicColumnsProcessor.php
│ └─ EventListener/
│ └─ BackendAssetLoader.php
├─ Configuration/
│ ├─ TCA/
│ │ └─ Overrides/
│ │ └─ tt_content/
│ │ └─ types/
│ │ ├─ box.php
│ │ ├─ cards.php
│ │ ├─ dynamic_columns.php
│ │ ├─ modal.php
│ │ └─ …
│ ├─ TypoScript/
│ │ └─ setup.typoscript
│ └─ page.tsconfig
├─ ContentBlocks/
│ └─ ContentElements/
│ ├─ accordion/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ button-link/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ card/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ compare-slider/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ flipbook/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ icon-text/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ social-share/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ swiper/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ ├─ tabs/
│ │ ├─ config.yaml
│ │ ├─ Icon.svg
│ │ └─ templates/
│ │ ├─ Frontend.html
│ │ └─ …
│ └─ timeline/
│ ├─ config.yaml
│ ├─ Icon.svg
│ └─ templates/
│ ├─ Frontend.html
│ └─ …
├─ README.md
├─ Resources/
│ ├─ Private/
│ │ ├─ Language/
│ │ │ ├─ de.locallang_db.xlf
│ │ │ └─ locallang_db.xlf
│ │ └─ Templates/
│ │ ├─ Cards.html
│ │ ├─ DynamicColumns.html
│ │ ├─ Modal.html
│ │ └─ …
│ └─ Public/
│ ├─ Icons/
│ │ ├─ Extension.svg
│ │ └─ …
│ └─ …
├─ composer.json
├─ ext_emconf.php
├─ ext_localconf.php
└─ ext_tables.sql
md_project/
├─ Classes/
│ ├─ DataProcessing/
│ │ ├─ MegaMenuProcessor.php
│ │ └─ TocProcessor.php
│ └─ EventListener/
│ └─ MegaMenuBackendLayoutListener.php
├─ Configuration/
│ ├─ Services.yaml
│ ├─ Sets/
│ │ └─ Project/
│ │ ├─ config.yaml
│ │ ├─ constants.typoscript
│ │ ├─ page.tsconfig
│ │ ├─ settings.definitions.yaml
│ │ ├─ settings.yaml
│ │ └─ setup.typoscript
│ └─ TCA/
│ └─ Overrides/
│ ├─ pages.php
│ └─ tt_content.php
├─ README.md
├─ Resources/
│ ├─ Private/
│ │ ├─ Language/
│ │ │ ├─ de.locallang_be.xlf
│ │ │ ├─ de.locallang_db.xlf
│ │ │ ├─ locallang_be.xlf
│ │ │ └─ locallang_db.xlf
│ │ ├─ Layouts/
│ │ │ └─ Page/
│ │ │ └─ Site.html
│ │ ├─ Partials/
│ │ │ ├─ FluidStyledContent/
│ │ │ │ └─ Media/
│ │ │ │ └─ GalleryFullwidth.html
│ │ │ └─ Page/
│ │ │ ├─ BackToTop.html
│ │ │ ├─ Breadcrumbs.html
│ │ │ ├─ Footer.html
│ │ │ ├─ Header/
│ │ │ │ ├─ Brand.html
│ │ │ │ ├─ Navigation/
│ │ │ │ │ ├─ Default.html
│ │ │ │ │ ├─ Desktop.html
│ │ │ │ │ ├─ Sidebar.html
│ │ │ │ │ └─ Split.html
│ │ │ │ ├─ Offcanvas.html
│ │ │ │ ├─ ThemeToggle.html
│ │ │ │ └─ Toggler.html
│ │ │ ├─ Header.html
│ │ │ ├─ Hero.html
│ │ │ ├─ MobileMenu.html
│ │ │ ├─ Toc/
│ │ │ │ └─ Items.html
│ │ │ ├─ Toc.html
│ │ │ └─ TopMenu.html
│ │ └─ Templates/
│ │ ├─ FluidStyledContent/
│ │ │ ├─ Image.html
│ │ │ ├─ MenuAbstract.html
│ │ │ ├─ MenuSubpages.html
│ │ │ └─ Textmedia.html
│ │ └─ Page/
│ │ ├─ OneColumn.html
│ │ ├─ ThreeColumn.html
│ │ └─ TwoColumn.html
│ └─ Public/
│ ├─ Css/
│ │ ├─ glightbox.css
│ │ └─ swiper-bundle.min.css
│ ├─ Fonts/
│ │ ├─ EtelkaMediumPro.woff
│ │ ├─ EtelkaMediumPro.woff2
│ │ ├─ EtelkaTextPro.woff
│ │ └─ EtelkaTextPro.woff2
│ ├─ Icons/
│ │ ├─ Extension.svg
│ │ ├─ backendlayout-1col.svg
│ │ ├─ backendlayout-2col.svg
│ │ └─ backendlayout-3col.svg
│ ├─ Images/
│ │ ├─ a-logo.png
│ │ ├─ apple-touch-icon.png
│ │ ├─ atlas-logo.svg
│ │ ├─ atlas-sign.svg
│ │ ├─ favicon-96x96.png
│ │ ├─ favicon.ico
│ │ ├─ favicon.svg
│ │ ├─ logo-w.svg
│ │ ├─ logo.svg
│ │ ├─ mediadata-Logo2z.svg
│ │ ├─ mediadata-Logo_2-zeilig_CMYK_weiss.png
│ │ ├─ nur_symbol_weiss.png
│ │ ├─ site.webmanifest
│ │ ├─ web-app-manifest-192x192.png
│ │ └─ web-app-manifest-512x512.png
│ ├─ Js/
│ │ ├─ components/
│ │ │ ├─ back-to-top.js
│ │ │ ├─ hero-vh.js
│ │ │ └─ toc-scrollspy.js
│ │ ├─ global/
│ │ │ ├─ glightbox-init.js
│ │ │ ├─ glightbox.min.js
│ │ │ ├─ offcanvas-hamburger.js
│ │ │ ├─ theme-init.js
│ │ │ └─ theme-toggle.js
│ │ ├─ legacy/
│ │ │ └─ navigation.js
│ │ ├─ sidebar/
│ │ │ ├─ sidebar-collapse.js
│ │ │ └─ sidebar-flyout.js
│ │ └─ vendor/
│ │ ├─ bootstrap.bundle.min.js
│ │ └─ swiper-bundle.min.js
│ └─ SCSS/
│ ├─ _custom.scss
│ ├─ abstracts/
│ │ ├─ _colors.scss
│ │ ├─ _index.scss
│ │ ├─ _mixins.scss
│ │ └─ _variables.scss
│ ├─ base/
│ │ ├─ _base.scss
│ │ ├─ _fonts.scss
│ │ └─ _images.scss
│ ├─ components/
│ │ ├─ _index.scss
│ │ ├─ back-to-top/
│ │ │ ├─ _back-to-top.scss
│ │ │ └─ _index.scss
│ │ ├─ backgrounds/
│ │ │ ├─ _index.scss
│ │ │ └─ _svg-patterns.scss
│ │ ├─ dynamic-columns/
│ │ │ ├─ _dynamic-columns.scss
│ │ │ └─ _index.scss
│ │ ├─ fsc/
│ │ │ ├─ _fsc.scss
│ │ │ └─ _index.scss
│ │ ├─ glightbox/
│ │ │ ├─ _glightbox.scss
│ │ │ └─ _index.scss
│ │ ├─ hero/
│ │ │ ├─ _hero.scss
│ │ │ └─ _index.scss
│ │ ├─ navigation/
│ │ │ ├─ _index.scss
│ │ │ ├─ _navigation-desktop.scss
│ │ │ ├─ _navigation-mobile.scss
│ │ │ ├─ _navigation-sidebar.scss
│ │ │ └─ _navigation-split.scss
│ │ ├─ sidebar/
│ │ │ ├─ _index.scss
│ │ │ ├─ _sidebar-collapse.scss
│ │ │ └─ _sidebar-flyout.scss
│ │ ├─ theme-toggle/
│ │ │ ├─ _index.scss
│ │ │ └─ _theme-toggle.scss
│ │ └─ toc/
│ │ ├─ _index.scss
│ │ └─ _toc.scss
│ ├─ layout/
│ │ ├─ _grid.scss
│ │ ├─ _index.scss
│ │ └─ _spacing.scss
│ ├─ pages/
│ │ ├─ _index.scss
│ │ └─ _start.scss
│ ├─ utilities/
│ │ ├─ _helpers.scss
│ │ ├─ _index.scss
│ │ └─ _typography.scss
│ └─ vendors/
│ ├─ _bootstrap.scss
│ └─ _index.scss
├─ composer.json
├─ ext_emconf.php
├─ ext_localconf.php
└─ ext_tables.sql