no way to compare when less than two revisions
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | fluid_partials [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== Fluid Partials ====== | ||
+ | |||
+ | Bei Partials in TYPO3 handelt es sich im wesentlichen um Fluid Templates, die in die die Generierung bestimmter Inhalte einer Webseite ausgegliedert ist. | ||
+ | \\ Für dieses Vorgehen gibt es mehrere Gründe. Zum einen werden die einzelnen Dateien übersichtlicher. Zum anderen können die Dateien einfacher per GIT versiniert und von mehreren Entwicklern bearbeitet werden. | ||
+ | |||
+ | ===== Header mit Navigation ===== | ||
+ | |||
+ | Sehen Sie hier ein einfaches Beispiel für ein '' | ||
+ | |||
+ | <nav> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP left tip 100%> | ||
+ | Hierbei ist zu beachten, dass die '' | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Header mit Variablen ===== | ||
+ | |||
+ | Sehen Sie hier ein einfaches Beispiel für ein '' | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | {page_title} | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP left tip 100%> | ||
+ | Hierbei ist zu beachten, dass die '' | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Header mit Slick Slider ===== | ||
+ | |||
+ | Der Slick Slider ist eine recht einfach zu konfigurierende Möglichkeit, | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | ===== Blog List ===== | ||
+ | |||
+ | Wichtige Elemente hier: | ||
+ | * Conditions | ||
+ | * Iteration in Schleifen mit Counter | ||
+ | * Formatierung von Datumsangaben | ||
+ | |||
+ | <f:if condition=" | ||
+ | < | ||
+ | </ | ||
+ | | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | </ | ||
+ | | ||
+ | <f:for each=" | ||
+ | <div class=" | ||
+ | < | ||
+ | {blog.name} | ||
+ | < | ||
+ | {blog.datum} | ||
+ | </ | ||
+ | < | ||
+ | {blog.datum} | ||
+ | </ | ||
+ | | ||
+ | <f:if condition=" | ||
+ | <f:for each=" | ||
+ | <f:if condition=" | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | {kommentarIteration.total} Kommentar | ||
+ | </ | ||
+ | < | ||
+ | {kommentarIteration.total} Kommentare | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | {blog.kurzfassung} | ||
+ | | ||
+ | < | ||
+ | Beitrag lesen | ||
+ | </ | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | | ||
+ | ===== TYPO3 img srcset im Partial ===== | ||
+ | |||
+ | Wenn TYPO3 eine Seite aufbaut, nutzt es dazu ein Baukastensystem, | ||
+ | |||
+ | Für die Darstellung der Bilder ist die Datei image.html zuständig. Diese befindet sich im folgenden Verzeichnis: | ||
+ | |||
+ | [SERVER]/ | ||
+ | |||
+ | Nun könnte man diese Datei überschreiben, | ||
+ | |||
+ | Zu diesem Zweck baut man sich in der Struktur der HTML Templates der eigenen TYPO3 Installation ein eigenes Verzeichnis auf, in dem man die Image.html ablegt. Dies kann in der Provider Extension bzw. dem Site Package geschehen. Im nächsten Schritt gibt man seinem System diesen Pfad in den TypoScript Konstanten mit. Dies kann wie folgt aussehen: | ||
+ | |||
+ | styles { | ||
+ | templates { | ||
+ | partialRootPath = EXT: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | Damit bietet man dem System ein weiteres styles Objekt als Suchpfad für die Partials an. In die Image.html kann man nun den Quellcode schreiben, mit dem man das img srcset über den Fluid Viewhelper anbindet: | ||
+ | |||
+ | <f:media | ||
+ | class=" | ||
+ | file=" | ||
+ | width=" | ||
+ | height=" | ||
+ | alt=" | ||
+ | title=" | ||
+ | loading=" | ||
+ | additionalAttributes=" | ||
+ | {srcset: ' | ||
+ | {f: | ||
+ | {f: | ||
+ | {f: | ||
+ | | ||
+ | " | ||
+ | /> | ||
+ | | ||
+ | TYPO3 nutzt nun beim Neuaufruf der Seite die installierte Grafikbibliothek, | ||
+ | ===== Blog Buttons ===== | ||
+ | |||
+ | **Wichtige Elemente hier: | ||
+ | * Conditions mit Abfrage übergebener Werte | ||
+ | * Generierung von Links mit Übergabe von //Plugin// und //Action// | ||
+ | * Formatierung von Links als Buttons | ||
+ | |||
+ | <f:for each=" | ||
+ | <f:if condition=" | ||
+ | < | ||
+ | < | ||
+ | action=" | ||
+ | pluginName=" | ||
+ | class=" | ||
+ | arguments=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | action=" | ||
+ | pluginName=" | ||
+ | class=" | ||
+ | arguments=" | ||
+ | {count} | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | | ||
+ | ===== Form Fields ===== | ||
+ | |||
+ | Beispiel für Eingabefelder in einem Formular | ||
+ | | ||
+ | <label for=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <label for=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <label for=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <label for=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <label for=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <label for=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <label for=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | |||
+ | ===== Search Form ===== | ||
+ | |||
+ | Formular für eine Volltextsuche | ||
+ | | ||
+ | | ||
+ | < | ||
+ | | ||
+ | <f:form action=" | ||
+ | | ||
+ | < | ||
+ | | ||
+ | < | ||
+ | id=" | ||
+ | name=" | ||
+ | value=" | ||
+ | class=" | ||
+ | | ||
+ | < | ||
+ | value=" | ||
+ | name=" | ||
+ | class=" | ||
+ | | ||
+ | </ | ||
+ | | ||
+ | </ | ||
+ | | ||
+ | </ |