TypoScript PAGE Setup

Damit TYPO3 Inhalte aus der Tabelle tt_content rendern kann, müssen die Inhalte der Tabelle ans Frontend angebunden werden. Dies ist mit der folgenden Konfiguration zu bewerkstelligen

Einrichtung des Fluid Template. Mehrere Elemente für den Inhalt lesen einzelne Elemente auf der Tabelle tt_content aus, um diese in einer festgelegten Konfiguration zu rendern. Dies gilt z. B. für Accordion Elemente und Boxen, aus denen sich der Slider im Kopf einer Seite generiert. Dies hat den großen Vorteil, dass sich beide Elemente mit den üblichen Mitteln des Backend von TYPO3 redaktionell pflegen lassen. Die Ausgabe erscheint unabhängig von der Formatierung des Elements immer im gewünschten Layout.

page.10 = FLUIDTEMPLATE
page.10 {
  format = html
  file = EXT:ibkprovider/Resources/Private/Templates/Page.html
  partialRootPath = EXT:ibkprovider/Resources/Private/Partials/
  layoutRootPath = EXT:ibkprovider/Resources/Private/Layouts/  
  variables {
    page_title = TEXT
    page_title.field = subtitle // title
    
    page_content < styles.content.get
    page_content.select.where = colPos = 1
  
    blog_content < styles.content.get
    blog_content.select.where = colPos = 5
    
    page_bottom < styles.content.get
    page_bottom.select.where = colPos = 4
  
    ## Element fuer Accordion
    
    page_accordion = CONTENT
    page_accordion {
      table = tt_content
      select {
        where = colPos = 93
        orderBy = sorting
      }
      renderObj = COA
      renderObj {
        100 = TEXT
        100 {
          field = header
          required = 1
          wrap = <h3>|</h3>    
        }
      
        150 = TEXT
        150.wrap = <div>
      
        200 = FILES
        200 {
          references {
            table = tt_content
            uid.data = uid
            fieldName = assets
            required = 1
          }
          renderObj = IMAGE
          renderObj {
            file.import.data = file:current:originalUid
            titleText.data = file:current:title
            altText.data = file:current:alternative
            params = class="img-responsive"
            fieldRequired = header_link
            stdWrap.typolink.parameter.field = header_link
            stdWrap.wrap = <div class="div-accordion-bild">|</div>
          }
        }    
            
        300 = TEXT
        300.field = bodytext
        300.required = 1
        300.wrap = <p>|</p> 
          
        320 = TEXT
        320 {
          stdWrap {
            fieldRequired = header_link
            typolink {
              parameter.field = header_link
               title.field = header
               ATagParams = class="button"
            }
          }
          stdWrap.typolink.parameter.field = header_link // header
          stdWrap.wrap = <div class="button-accordion">|</div>
        }    
        
        350 = TEXT
        350.wrap = </div>
      }
    }     
      
    ## Bilder Buttons
        
    bilder_buttons = CONTENT
    bilder_buttons {
      table = tt_content
      select {
        where = colPos = 2
        orderBy = sorting
      }
      renderObj = COA
      renderObj {
      
        150 = TEXT
        150.wrap = <div class="col-md-6 col-sm-6 div-button">
    
        180 = TEXT
        180 {
          stdWrap.field = bodytext
          stdWrap {
            typolink {
            parameter.field = header_link
            title.field = bodytext
            ATagParams = class="button-layer"
          }
        }
        stdWrap.wrap = <div class="div-button-popup">|</div>
      }
      
      200 = FILES
      200 {
        references {
          table = tt_content
          uid.data = uid
          fieldName = assets
          required = 1
        }
        renderObj = IMAGE
        renderObj {
          file.import.data = file:current:originalUid
          titleText.field = description
          altText.field = description
          params = class="img-responsive"
          fieldRequired = header_link
          stdWrap.typolink.parameter.field = header_link
          stdWrap.wrap = <div class="div-button-bild">|</div>
        }
      }
      
      320 = TEXT
      320 {
        stdWrap {
          fieldRequired = header_link
          typolink {
            parameter.field = header_link
            title.field = header
            ATagParams = class="button button-navigation"
          }
        }
        stdWrap.typolink.parameter.field = header_link
        stdWrap.wrap = <div class="div-button-text">|</div>
      }
      350 = TEXT
      350.wrap = </div>
    }
  }    
}

Wenn man einzelne Datensätze in einem Fluid Template darstellen möchte, ist es notwendig, diese als Variablen im TypoScript Setup auszulesen und ihnen einen Namen zu geben. Dazu nutzt man das Objekt RECORDS, mit dem man gezielt einen Datensatz in einer bestimmten Tabelle der Datenbank auslesen kann:

inhalt_box = RECORDS
inhalt_box {
  tables = tt_content
  source = <ID des Inhaltselementes>
  dontCheckPid = 1
}

Man kann einer Seite mehrere Backend Templates zuweisen. Diese müssen Seiten Template, in diesem Fall einem Fluid Template, zugeordnet sein. Die Zuordnung der Datei geschieht anhand der UID des Datensatzes in der Tabelle backend_layout in der TYPO3 Datenbank.

page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout
  
  ## Erstes Layout - nicht notwendig da durch Fallback (Default) abgedeckt
  1 = TEXT
  1.value = EXT:ibkprovider/Resources/Private/Templates/Page.html
  
  ## Zweites Layout - Die "2" entspricht der UID in der Tabelle für Backend Layout
  2 = TEXT
  2.value = EXT:ibkprovider/Resources/Private/Templates/Startseite.html
  
  ## Fallback - wenn kein anderes Layout gefunden wurde
  default = TEXT
  default.value = EXT:ibkprovider/Resources/Private/Templates/Page.html
}

Eine sehr beliebte Extension zur Einbindung unterschiedlicher Layouts in TYPO3 Webseiten ist die Extension Gridelements. Diese wird auf dem gewohnten Weg über das TYPO3 Extension Repository (TER) oder den Composer installiert. Die Installation ist hier ausführlich beschrieben.

Bei der Einbindung von Grid Elements kommt es immer wieder zu Problemen. Dabei ist diese recht einfach zu händeln.

Sobald man ein Backend Layout für Grid Elements erzeugt und Spaltennummern vergeben hat, kann man anhand dieser Daten die Einbindung in TypoScript schreiben:

tt_content.gridelements_pi1.20.10.setup {
    
  ## Die 1 entspricht der UID des Grid Elements Layout
  1 < lib.gridelements.defaultGridSetup
  1 {
    columns {
      ## Die 101 entspricht der ColPos
      101 < .default
      101.wrap = <div class="col-md-4 col-xs-12">|</div>
   
      102 < .default
      102.wrap = <div class="col-md-4 col-xs-12">|</div>

      103 < .default
      103.wrap = <div class="col-md-4 col-xs-12">|</div>
    }
    wrap = <div class="row">|</div>
  }
}

TypoScript bietet die Möglichkeit, Variablen zu definieren und diese in jeder Seite darzustellen.

Wir können unsere Inhalte als PAGE Objekt aufbauen und einzelne Datensätze ansprechen. Hier wird ein Datensatz des Inhaltselements mit der UID 1 ausgeselen:

page.10 = FLUIDTEMPLATE
page.10 {
  [...]
  variables {
    inhalt = RECORDS
    inhalt {
      source = 1
      tables = tt_content
    }
  }
}

Wir können auch mehrere Inhaltselemente darstellen, in diesem Fall die Datensätze 1 bis 3:

variables {
  inhalt = RECORDS
  inhalt {
    source = 1,2,3
    tables = tt_content
  }
}  

Aber vielleicht möchten wir die Inhaltselemente gelegentlich wechseln und dann ist es natürlich ein erheblicher Aufwand, jedesmal am TypoScript Setup der Webseite zu arbeiten? Dafür gibt es eine Lösung!

Wir können bei der Bearbeitung unseres Basis Templates Constants definieren, die wir einfach im Backend bearbeiten. So können wir die Datensätze vorgeben, die wir aus der Tabelle tt_content auslesen möchten:

content.box.sources = 1,2,3 

Um beim Beispiel von oben zu bleiben - Das Auslesen der Konstanten im TypoScript Setup sieht dann wie folgt aus:

variables {
  inhalt = RECORDS
  inhalt {
    source = {$content.box.sources}
    tables = tt_content
  }
}