Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
fluid_partials [14/11/2020 10:20] Thomas Berscheid [Header mit Navigation] |
fluid_partials [09/02/2021 10:35] Thomas Berscheid [TYPO3 img srcset im Partial] |
||
---|---|---|---|
Zeile 27: | Zeile 27: | ||
<div class=" | <div class=" | ||
- | <div class=" | + | <div class=" |
{page_title} | {page_title} | ||
</ | </ | ||
Zeile 42: | Zeile 42: | ||
<div class=" | <div class=" | ||
- | <div class=" | + | <div class=" |
< | < | ||
</ | </ | ||
Zeile 96: | Zeile 96: | ||
</ | </ | ||
| | ||
+ | | ||
+ | ===== 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 ===== | ===== Blog Buttons ===== | ||