Benutzer-Werkzeuge

Webseiten-Werkzeuge


fluid_partials

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-md-12 col-sm-12">
      <f:cObject typoscriptObjectPath="lib.navigation" />
    </div>
  </div>
</nav>

Hierbei ist zu beachten, dass die Library zur Darstellung der Navigation zuvor im TypoScript Setup eingebunden werden muss.

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-md-12 col-sm-12">
    {page_title}
  </div>
</div>

Hierbei ist zu beachten, dass die Variable page_title zuvor im Fluid Layout an den Partial übergeben werden muss.

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 CSS und 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-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>

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>  
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
fluid_partials.txt · Zuletzt geändert: 25/09/2019 21:33 von Thomas Berscheid