Fluid Pages

Das Layout der Seiten im Frontend und im Backend wird weder durch Backend Layouts noch durch das Standard Feld Layout in TYPO3 bestimmt. Beide sind ausser Kraft gesetzt und werden von Fluidpages festgelegt.

Grundkonfiguration

in ext_tables.php die Page Definitionen der Extension registrieren:

// Register page types
Tx_Flux_Core::registerProviderExtensionKey('rsyslayout_bootstrap', 'Page');

Erstellt: 08/2013| Geändert: 10/2015

Templates

Layout

Hier ein Beispiel Layout 2Col

Page

{namespace v=Tx_Vhs_ViewHelpers}

<f:comment> </f:comment>

<f:layout name="Page"/>

<f:comment> </f:comment>

<v:page.header>
   <f:render section="Resources" optional="TRUE" arguments="{_all}"/>
</v:page.header>

<f:comment> </f:comment>

<f:render section="Navigation" partial="Navigation" arguments="{_all}"/>

<f:comment> </f:comment>

<f:comment> </f:comment>


<f:render section="Header" partial="Header" optional="TRUE" arguments="{_all}"/>

<f:comment> </f:comment>


<div class="container{f:if(condition: settings.hideHeader, then: ' hidden_header')}">

   <f:comment> </f:comment>

   <f:render section="LanguageMenu" partial="LanguageMenu" optional="TRUE" arguments="{_all}"/>

   <f:comment> </f:comment>

   <f:render section="HeroUnit" partial="HeroUnit" optional="TRUE" arguments="{_all}"/>

   <f:comment> </f:comment>

   <f:render section="Breadcrumb" partial="Breadcrumb" optional="TRUE" arguments="{_all}"/>


   <f:comment> </f:comment>

   
   <f:render section="Content"/>
   

   <f:comment> </f:comment>

   <f:render section="Footer" partial="Footer"/>

</div>

Page

Die Page 2Col sieht dann z.B. so aus:

<html
    xmlns="http://www.w3.org/1999/xhtml" lang="en"
    xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
    xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
    xmlns:flux="http://fedext.net/ns/flux/ViewHelpers" >

{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}



<f:layout name="Page"/>

<f:comment> </f:comment>

<f:section name="Configuration">

    <flux:flexform id="page-developer" label="Page 2Col:<br>* 2 Spalten<br>* Seiten Navigation" description="" icon="{f:uri.resource(path: 'Backend/Images/2Col.jpg')}">

        <flux:flexform.field.checkbox name="settings.hideHeader" label="Do not show header" />

        <flux:flexform.grid>

            <flux:flexform.grid.row>
                <flux:flexform.grid.column colPos="20" colspan="12" name="Hero"/>
            </flux:flexform.grid.row>

            <flux:flexform.grid.row>
                <flux:flexform.grid.column colPos="1" colspan="3" name="Column 1"/>
                <flux:flexform.grid.column colPos="0" colspan="9" name="Main Content"/>
            </flux:flexform.grid.row>

            <flux:flexform.grid.row>
                <flux:flexform.grid.column colPos="10" colspan="12" name="Footer Content"/>
            </flux:flexform.grid.row>

        </flux:flexform.grid>
    </flux:flexform>
</f:section>

<f:comment> </f:comment>

<f:section name="Resources">
    <f:render partial="SharedResources" section="SharedResources"/>
</f:section>

<f:comment> </f:comment>

<f:section name="Content">

    <div class="row-fluid">

        <aside class="span3" role="complementary">
            <div class="dev_header">Column 1</div>
            <f:render section="SideNavigation" partial="SideNavigation" optional="TRUE" arguments="{_all}" />
            <v:page.content.render column="1"/>
        </aside>

        <div class="span9" role="main">
            <div class="dev_header">Column 0</div>
            <v:page.content.render column="0"/>
        </div>

    </div>

</f:section>

</html>

Damit kann man z.B. den Header Bereich ausblenden mit: <flux:flexform.field.checkbox name="settings.hideHeader" label="Do not show header" />. In den Seiteneigenschaften sieht das dann so aus:

Die Spalten im Backend sehen dann so aus:

Und im Partial Header kann man dann folgendes einbauen:

<f:if condition="{settings.hideHeader} == 0">
Header
</f:if>

Erstellt: 07/2013| Geändert: 10/2015

Neues Layout anlegen

Zm Anlegen eines weiteren Layouts genügt es in Resources/Private/Template/Page/ eine neue Datei anzulegen mit korrekter Struktur (siehe obiges Beispiel). Schon ist die Seite verfügbar zur Auswahl im Backend.

Idealerweise noch ein schönes Icon (Vorschau des Designs) erstellen und einbinden sowie noch ins Typoskript von page.bodyTagCObject eintragen, damit der Body Tag das neue Design als Klasse erhält (siehe nächster Abschnitt).

Erstellt: 08/2013| Geändert: 10/2015

Layout in body tag

Um im css zu wissen welches Layout aktiv ist wollte ich den body Tag wrappen mit dem aktiven Layout. Das war nicht ganz einfach. Die uid der Seite habe ich auch gleich mit in den Wrap aufgenommen. Hier das magische Typoskript:

page.bodyTagCObject = CASE
page.bodyTagCObject {

        key.data = levelfield:-1, tx_fed_page_controller_action, slide
        key.substring = 22,20

        # Define the default value
        default = TEXT
        default.value = <body>

        # Copy the default value to 0
        0 < .default

        # make the default wrap
        default_wrapped = COA
        default_wrapped.wrap = <body class="pid-|">
        default_wrapped.10 = TEXT
        default_wrapped.10.data = field:uid
        default_wrapped.10.insertData = 1
        default_wrapped.20 = TEXT
        default_wrapped.20.value = default
        default_wrapped.20.wrap = |

        # define for each layout
        2Col < .default_wrapped
        2Col.20.value = layout-2Col

        Developer < .default_wrapped
        Developer.20.value = layout-Developer
}

Im Feld tx_fed_page_controller_action steht das Layout, allerdings ist der Wert nicht als Typoskript Variable tauglich: z.B.: rsyslayout_bootstrap->2Col. Deshalb das key.substring = 22,20 - damit wird der linke Teil weggeschnitten. Das Beispiel oben ist für die beiden Layouts mit den Namen 2Col und Developer.

Erstellt: 08/2013| Geändert: 10/2015

View Helpers Syntax Highlighting und Autocomplete

Um beim Editieren der Fluid Templates für die View Helpers Syntax Highlighting und Autocomplete zur Verügung zu haben habe ich in Eclipse den XSD - XML Schema Definition SDK installiert. Die Updatesite ist für Juno - download.eclipse.org/releases/juno. Dort das Modul Modelling.

In den Preferences kann man dann die XSD Files bekannt machen:

Ein Eintrag sieht dann folgendermaßen aus:

Die Datei *.xsd kann man laden unter den Pfaden in der folgenden Definition:

Obiges ist dann auch in jedem Page Template von mir enthalten und damit gibt es Hilfe und Autocomplete zu den ViewHelpern.

Erstellt: 08/2013| Geändert: 10/2015

Bugs

Keine Spalten im Backend

Wenn ich Seiten importiere von einer anderen TYPO3 Instanz, werden im Backend keine Spalten angezeigt in die man Content eingeben könnte. Grund: es wurde ein Backend Layout mit importiert.

Abhilfe

Folgende SQL ausführen:

UPDATE pages SET backend_layout_next_level = 0, backend_layout = 0

Fehlende Dateien bei Export/Import

Beim Export und Import in eine andere TYPO3 Instanz, werden die Bilder nicht mit übernommen. Fakt ist, daß TYPO3 6.1 beim Export die Bilder nicht mit in die t3d Datei packt. Man kann trotzdem Importieren und dann von Hand die Ordner fileadmin/_migrated und fileadmin/media (ein Ordner aus dem ich im Original die Bilder für den Content ablege).

Erstellt: 08/2013| Geändert: 10/2015

Fluid Pages

Grundkonfiguration

Layout

Page

Page

Keine Spalten im Backend

Abhilfe

Fehlende Dateien bei Export/Import

Suche