fluid_partials

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
Letzte Überarbeitung Beide Seiten der Revision
fluid_partials [14/11/2020 10:21]
Thomas Berscheid [Header mit Variablen]
fluid_partials [09/02/2021 10:34]
Thomas Berscheid [TYPO3 img srcset im Partial]
Zeile 42: Zeile 42:
  
   <div class="row">   <div class="row">
-    <div class="col-md-12 col-lg12" id="SlickSlider">+    <div class="col-12 col-md-12 col-lg12" id="SlickSlider">
       <f:format.raw>{slider_content}</f:format.raw>           <f:format.raw>{slider_content}</f:format.raw>    
     </div>     </div>
Zeile 96: Zeile 96:
   </f:for>   </f:for>
      
 +  
 +===== TYPO3 img srcset im Partial =====
 +
 +Wenn TYPO3 eine Seite aufbaut, nutzt es dazu ein Baukastensystem, aus dem die einzelnen Bestandteile der Inhaltselemente zusammengebaut werden. Ein Teil dieser HTML Templates liest Bilddaten aus und stellt den entsprechenden Quellcode bereit, damit dieser <IMG>-Tag in die Webseite eingebaut werden kann. Dieses Bild kann man per CSS stufenlos skalieren. Allerdings hat dies zur Folge, dass man auf allen Plattformen dasselbe Bild vom Webserver lädt. Auf einem Smartphone braucht man aber kein hochauflösendes Bild. Um dieses Dilemma zu lösen, hat man den IMG srcset eingeführt. Dieses HTML-Element bietet dem Endgerät mehrere Bilder zur Auswahl an. Der Browser entscheidet dann, welches Bild das passende ist. Dieses System kann man in TYPO3 nachrüsten.
 +
 +Für die Darstellung der Bilder ist die Datei image.html zuständig. Diese befindet sich im folgenden Verzeichnis: 
 +
 +  [SERVER]/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering
 +
 +Nun könnte man diese Datei überschreiben, was aber nicht sinnvoll ist, da man die TYPO3 Installation auf der eigenen Webseite nun nicht mehr so einfach updaten kann. Das Konzept der Suchpfade in der Templating Engine Fluid für TYPO3 bietet aber die Option, dass man eine eigene Datei als Kopie zu diesem Zweck anlegt und diese dem System anbietet. 
 +
 +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:extension/Resources/Private/Content/Partials/
 +    } 
 +  }
 +
 +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="image-embed-item"
 +    file="{file}"
 +    width="{dimensions.width}"
 +    height="{dimensions.height}"
 +    alt="{file.alternative}"
 +    title="{file.title}"
 +    loading="{settings.media.lazyLoading}"
 +    additionalAttributes="
 +      {srcset: '{f:uri.image(image: file, maxWidth: 576)} 576w,
 +        {f:uri.image(image: file, maxWidth: 768)} 768w,
 +        {f:uri.image(image: file, maxWidth: 992)} 992w,
 +        {f:uri.image(image: file, maxWidth: 1200)} 1200w',
 +         sizes: '(min-width: 1200px) 50vw, 100vw'}
 +      "
 +  />
 ===== Blog Buttons ===== ===== Blog Buttons =====
  
  • fluid_partials.txt
  • Zuletzt geändert: 09/02/2021 10:35
  • von Thomas Berscheid