Fluid Partials [IBK Wiki]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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 ''Partial'', dass einen ''Header'' mit einer ''Navigation'' generiert:

  <nav>
    <div class="row">
      <div class="col-12 col-md-12">
        <f:cObject typoscriptObjectPath="lib.navigation" />
      </div>
    </div>
  </nav>

<WRAP left tip 100%>
Hierbei ist zu beachten, dass die ''Library'' zur Darstellung der ''Navigation'' zuvor im [[typoscript_config|TypoScript Setup]] eingebunden werden muss.
</WRAP>


===== Header mit Variablen =====

Sehen Sie hier ein einfaches Beispiel für ein ''Partial'', dass eine ''Variable'' übergeben bekommt, in diesem Fall den Titel der Seite:

  <div class="row">
    <div class="col-12 col-md-12">
      {page_title}
    </div>
  </div>

<WRAP left tip 100%>
Hierbei ist zu beachten, dass die ''Variable'' page_title zuvor im [[fluid_layouts|Fluid Layout]] an den ''Partial'' übergeben werden muss.
</WRAP>


===== Header mit Slick Slider =====

Der Slick Slider ist eine recht einfach zu konfigurierende Möglichkeit, einen Slider in ein TYPO3 Webseite einzubinden. Nach der Konfiguration des [[slick_slider_layout|CSS]] und [[javascript_slider_konfiguration|JavaScript]] Frameworks kann der Slider in Fluid eingebunden werden. Bei diesem Beispiel werden die Inhalte über eine ID angesprochen.

  <div class="row">
    <div class="col-12 col-md-12 col-lg12" id="SlickSlider">
      <f:format.raw>{slider_content}</f:format.raw>    
    </div>
  </div>            
===== Blog List =====

Wichtige Elemente hier:
  * Conditions
  * Iteration in Schleifen mit Counter
  * Formatierung von Datumsangaben

  <f:if condition="{blogheadline}">
    <h2>{blogheadline}</h2>
  </f:if>
    
  <f:if condition="{kommentarheadline}">
    <h2>{kommentarheadline}</h2>
  </f:if>
    
  <f:for each="{blogs}" as="blog">
    <div class="div_kasten">
      <h2>{blog.titel}</h2>
      {blog.name}
      <f:format.date format="d.m.Y">
        {blog.datum}
      </f:format.date>, 
      <f:format.date format="H:i:s">
        {blog.datum}
      </f:format.date>
      
      <f:if condition="{blog.kommentar}">
        <f:for each="{blog.kommentar}" as="kommentar" iteration="kommentarIteration">
          <f:if condition="{kommentarIteration.index}==0">
            <f:if condition="{kommentarIteration.total}==1">
              <f:then>
                {kommentarIteration.total} Kommentar
              </f:then>
              <f:else>
                {kommentarIteration.total} Kommentare
              </f:else>
            </f:if> 
          </f:if> 
        </f:for>
      </f:if>
      
      {blog.kurzfassung}
      
      <f:link.action action="show" class="button blog-button" arguments="{blog: blog}">
        Beitrag lesen
      </f:link.action>
      
    </div>
  </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'}
      "
  />
  
TYPO3 nutzt nun beim Neuaufruf der Seite die installierte Grafikbibliothek, um eigene Versionen zu Bilder anzulegen und diese im _processed_ Ordner abzulegen. Das Endgerät hat die Auswahl zwischen den verschiedenen Bildern.
===== 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="{blogcounter}" as="count" iteration="blogIteration">
    <f:if condition="{count}=={blogoffset}">
      <f:then>
        <f:link.action 
          action="list" 
          pluginName="Tag" 
          class="button blog_button" 
          arguments="{blog: blog, offset: count, tagid: blogtaglink}">
          <strong>{count}</strong>
        </f:link.action> 
      </f:then>
      <f:else>
        <f:link.action 
          action="list" 
          pluginName="Tag" 
          class="button blog_button" 
          arguments="{blog: blog, offset: count, tagid: blogtaglink}">
          {count}
        </f:link.action> 
      </f:else>
    </f:if>
  </f:for> 
  
  
===== Form Fields =====

Beispiel für Eingabefelder in einem Formular
  
  <label for="name">
    <f:translate key="tx_ibkblog_domain_model_blog.name" />
  </label><br />
    <f:form.textfield property="name" /><br />
  <label for="email">
    <f:translate key="tx_ibkblog_domain_model_blog.email" />
  </label><br />
    <f:form.textfield property="email" /><br />
  <label for="titel">
    <f:translate key="tx_ibkblog_domain_model_blog.titel" />
  </label><br />
    <f:form.textfield property="titel" /><br />
  <label for="kurzfassung">
    <f:translate key="tx_ibkblog_domain_model_blog.kurzfassung" />
  </label><br />
    <f:form.textarea property="kurzfassung" cols="40" rows="15" /><br />
  <label for="inhalt">
    <f:translate key="tx_ibkblog_domain_model_blog.inhalt" />
  </label><br />
    <f:form.textarea property="inhalt" cols="40" rows="15" /><br />
  <label for="datum">
    <f:translate key="tx_ibkblog_domain_model_blog.datum" />
  </label><br />
    <f:form.textfield property="datum"  value="{blog.datum->f:format.date()}" /><br />
  <label for="link">
    <f:translate key="tx_ibkblog_domain_model_blog.link" />
  </label><br />
    <f:form.textfield property="link" /><br />
    

===== Search Form =====
 
Formular für eine Volltextsuche  
  
    
  <f:section name="main">
    
    <f:form action="searchList" name="search" pluginName="Blog">
    
      <fieldset class="field_search">
      
        <f:form.textfield 
          id="searchWord" 
          name="searchWord" 
          value="{searchWord}" 
          class="search-form-input" />    
          
        <f:form.submit 
          value="Im Blog suchen" 
          name="Im Blog suchen" 
          class="search-form-button" />
          
      </fieldset>
      
    </f:form>
    
  </f:section>