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>
    }
  }    
}

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>
  }
}
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
  • typoscript_page_setup.txt
  • Zuletzt geändert: 04/01/2020 19:51
  • von Thomas Berscheid