Posts Tagged ‘ FLUID

Typo3-Snippet: Fluid-Ausgabe nur auf einer bestimmten Seite

Dieses Snippet zeigt eine Ausgabe auf der Seite mit id 791:

<f:if condition="{0:data.uid} == {0:'791'}">
    <f:then>
      Ausgabe auf der Seite
    </f:then>
    <f:else>
      Ausgabe, wenn nicht auf der Seite
    </f:else>
</f:if>

LESS mit Fluid-Templates verwenden in Typo3 4.5

TIPP: Um LESS optimal mit TYPO3 Fluid-Templates nutzen zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Um Templates und Designs schneller und effektiver zu entwickeln ist es zu empfehlen LESS zu verwenden.
LESS ist eine ähnliche Technik wie SASS bietet einem viele Möglichkeiten wie bspw. Variablen-Definition, Mixins, etc., welche die CSS-Erstellung beschleunigen und die Wiederverwendbarkeit erhöhen.
Vorallem bei der Verwendung vieler neuer CSS3-Features, wo oft jeder Browser sein eigenes Statement erwartet, ist es sinnvoll LESS-Mixins einzusetzen.

Alle Infos und die Dokumentation zu LESS findet Ihr hier:
http://lesscss.org/.

Viele brauchbare Mixins findet man hier:
http://lesselements.com/.

Starten wir nun um ‚mal eben‘ LESS in unser Typo3 einzubinden. Folge einfach den nächsten Punkten Schritt für Schritt:

  1. Als erstes wechseln wir in den Extension-Manager und installieren die notwendigen Extensions. Ich arbeite hier gerne mit der LESS Extension cs_less, da diese einen View-Helper mitbringt, mit dem man sein LESS direkt im Fluid-Template einbinden kann. Da diese jedoch wiederum Abhängigkeiten zu anderen Extensions hat, installieren wir diese beiden zuerst. Dies wären aktuell fed (1.4.12) und flux (1.4.1). Nach dem die beiden Extensions importiert und installiert sind, nur noch schnell die cs_less Exxtension hinterher installieren
  2. Nach dem die notwendigen Extensions vorhanden sind können wir beginnen unsere LESS-Dateien zu erstellen. Die erste nennen wir styles.less und legen sie in unserem fileadmin/templates/css/-Verzeichnis ab. Danach laden wir uns die less-elements runter, und legen die Datei elements.less in das gleiche Verzeichnis.
  3. In unsere styles.less importieren wir die less-elements und wenden zum testen einfach mal Gradient auf den Body-Tag an:
    @import "elements.less";
    body {
       .gradient(#F00, #F00, #FFF);
    }
    

    .gradient() ist an dieser Stelle ein Mixin, welches von den less-elements bereitgestellt wird. Das .gradient() Mixin ist mit einer Funktion vergleichbar, welche drei Parameter erwartet. Als Rückgabe fügt diese bei der Compilierung des LESS alle erforderlichen CSS-Statements für die jeweiligen Browser in das CSS ein.
    Das Ergebnis sieht wie folgt aus:

    body {
      background:#ff0000;
      background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#ff0000),color-stop(1,#ffffff));
      background:-ms-linear-gradient(bottom,#ff0000,#ffffff);
      background:-moz-linear-gradient(center bottom,#ff0000 0%,#ffffff 100%);
    }
    
  4. Nun müssen wir nur noch den View-Helper der cs_less-Extension verwenden, um unser LESS einzubinden. An diesem Punkt gehen ich einfach mal davon aus, das eh schon Fluid als Template-Engine verwendet wird 😉
    Also öffnen wir uns die Layout-Datei unseres Fluid-Templates. Meine liegt bspw. unter /fileadmin/templates/layouts/main.html. Wir öffnen diese und fügen den folgenden Code hinzu:

    {namespace less=Tx_CsLess_ViewHelpers}
    <less:style href="fileadmin/templates/css/styles.less" />

    In der ersten Zeile definieren wir den Namespace, in dem unser View-Helper zu finden ist. Danach wird dieser einfach nur noch verwendet. Das Attribute href bekommt den Pfad zu unserer Less-Datei, alles andere passiert automatisch. Wenn man nun alle seine Styles über die LESS-Datei definiert, ist keine weitere CSS-Datei notwendig. Natürlich kann man auch normales CSS in der LESS-Datei verwenden, aber das kann man alles auf der LESS-Dokumentation nachlesen. 😉

Typo3 Multisite/MultiDomain: Fluid-Website zu bestehender TemplaVoila-Website hinzufügen

Woah.. Nachdem ich nun über zwei Stunden an einem Fluid/TemplaVoila-Problem verbracht habe, hier nun die Lösung für alle, die vielleicht mal ein ähnliches Problem haben.

Ziel war es in eine bestehende TemplaVoila-Website, eine komplette neue Website zu integrieren, welche jedoch auf Fluid als Template-Engine setzt. Alles im Allgemeinen kein Problem, da ich schon sehr lange mit Fluid arbeite und es lieben gelernt habe 😉
Das Vorgehen zur Integration der zusätzlichen Website ging nun wie gewohnt von statten:

  1. fluid und extbase über den Extension-Manager installiert
  2. Im fileadmin ein neues Verzeichnis angelegt, wo die üblichen Template-Dateien für Fluid liegen
  3. Im Typo3-Root einen neuen Shortcut für meine neuen Website-Root erstellt. Darin liegen wie gewohnt die Pages der Websites.
  4. Auf der Website-Root Seite wird nun ein neues Root-Template erstellt. Hier werden im TypoScript-Template auf dem Tab:Options die folgenden Checkboxen angehakt:
    Clear: Constants & Setup; Rootlevel
  5. Zusätzlich werden auf der Website-Root Seite die erforderlichen Backend-Templates erstellt

Alles in allem, bis auf die Einstellungen zur zweiten Website, wurden die Schritte wie in diesem Artikel ausgeführt: Create a complete Typo3 website by using the Fluid Template Engine

Nun sollte eigentlich soweit alles startklar sein, um die Inhalte einzupflegen..

Aber stop, was ist das!?

Wenn wir die Page-Properties einer Seite von uns öffnen und unter Appearance ->Backend Template eines unserer angelegten Backend-Templates auswählen wollen, ist die Select-Box leer?! Stutzig macht auch ein wenig, das dort nicht wie gewohnt das Label ‚Backend Layout (this page only)‘, sondern ‚Use Template Design‘ steht.

Nach langer Recherche, Testen und Debugging – keine Lösung in Sicht. Durch Zufall, da ich noch ein deaktiviertes WEB->Page Module wieder aktivieren wollte, bin ich dann in die Extension-Einstellungen der TemplaVoila-Extension gegangen – und siehe da: Die Extension biete Datenbank-Tabellen Updates an. Nach dem diese ausgeführt worden sind, der Cache proforma einmal geleert, sind auf mal alle vorhandenen Backend-Templates vorhanden. Auch das Label hat wieder wie gewohnt den Inhalt ‚Backend Layout (this page only)‘


Ich sag nur, Sachen gibts – die gibts gar nicht. 😉

Flow3, das neue Framework mit dem auch Typo3 5 entwickelt wird

Wow, das ist nett..

Gerade eben habe ich mir eine Video-Einführung zu Flow3 angesehen, und ich muss sagen es gefällt mir richtig gut. Absolute neue Technik, Methodiken und Programier-Paradigmen. Es ist alles komplett Objekt-Orientiert und es wird beispielsweise Aspekt-Orientierte Programmierung, Domain-Driven Design und vieles mehr angewandt. So muss es sein, da macht entwickeln erst richtig Spass 🙂

So, ich mache nun hier Schluss und erstelle mein erstes Flow3-Projekt. Also, bleibt dran und lest hier meine nächsten Artikel zu Flow3, die ganz bestimmt kommen werden 😉

Create a Typo3 Menu/Navigation and include it in a Fluid-Template

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post is the fifth part of Create a complete Typo3 website by using the Fluid Template Engine

After creating a few more sites, includes some CSS-Files and designing the main frame, we will create a main-menu for our site.

1. Navigate into ‚WEB‘->’List‘, select the root-site within the tree and create a new sub-template by clicking on the New-Icon on your main-template. (show image)
2. Enter a name and save the new sub-template. (show image)
3. Be sure that the new sub-template is listed under the main-template and edit the main-template. (show image)
4. Open the Inlcudes-tab and search in the Include Basis Template Area for your sub-template, then include it (show image) and save the changes. (show image)
5. Open the new sub-template for creating the menu-TypoScript. (show image)
The mainNavi TypoScript could look like (show image) :

lib.mainNavi = HMENU
lib.mainNavi.entryLevel=0
lib.mainNavi.1 = TMENU
lib.mainNavi.1 {
  wrap = <ul id="mainNavi">|</ul>
  expAll = 0
  NO.allWrap = <li class="mainNaviItem">|</li>
  RO < .NO
  RO = 1
  CUR < .NO
  CUR = 1
  CUR.allWrap = <li class="mainNaviItemActive">|</li>
  ACT < .CUR
}

 

6.
Now we just have to include the mainNavi TypoScript objectpath into our Fluid-Template. Therefore we navigate into ‚FILE‘->’Filelist‘ and edit the fileadmin/templates/layouts/main.html and add the f:cObject on the needed position (show image) :

  <f:cObject typoscriptObjectPath="lib.mainNavi" />

 
Our Fluid-Template now looks like:

<div id="header">
  <div id="header-top-border"></div>
  <div id="header-area"></div>
  <f:cObject typoscriptObjectPath="lib.mainNavi" />
  <div id="header-line-dark"></div>
  <div id="header-line"></div>
</div>
<div id="content"><f:render section="content" /></div>
<div id="footer">
  <div id="footer-line"></div>
  <div id="footer-text">
    <div id="footer-text-left"></div>
    <div id="footer-text-right"></div>
  </div>
  <div id="footer-bottom-border"></div>
</div>

 
Notice: Don’t forget to clear the Typo3-Cache after editing the Fluid-Template. 😉

Configure the Fluid TypoScript and create Backend-Templates

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post is the fourth part of Create a complete Typo3 website by using the Fluid Template Engine Before we can actually see the first result on the screen , we have to configure the TypoScript template. We do this again step by step 😉 1. Navigate to the ‚WEB‘->’Page‘ module and click on the Typo3-Icon in the frame next to the modules list („tree area“) and create a new site. (show image) 2. Enter a name for the Root-Site of your website (show image) 3. Navigate on the Access-tab and remove the Disable-Checkbox and save the changes subsequently. (show image) 4. Navigate into the ‚WEB‘->’Template‘ module, and create a new Template by clicking on ‚Create template for a site‘ (show image) 5. After that, click on ‚Edit the whole template record‘ (show image) 6. Enter a name for the Template and write the first TypoScript code, that will define the page (show image):

# Create and configure our site
page = PAGE
page.typeNum = 0
page.meta.DESCRIPTION = My Site
page.meta.KEYWORDS = Internet, Homepage, Typo3

7. Navigate to the Includes-tab and include the ‚CSS Styled Content‘ in the Include-static Area and then save the complete template. (show image) 8. Now we proceed to create the Backend-Templates. The Backend-Templates define the backend view, so the editor(s) can only see the content areas that are present in each template. In our default case, a Backend-Template with three columns and an alternative template with only one content area. Navigate to ‚WEB‘->’List‘ and click above the main-frame on the New-Icon, then click on ‚Backend Layout‘. (show image) 9. Enter a name for the Backend-Template and click the Edit-icon in the config-area to start the Wizard. (show image) 10. In the Wizard-Popup we create for example the Three-Column Layout. To achieve this start by clicking on the right side twice on the Plus-Icon. (show image 1, image 2) 11. Then click on each Layout-Column on the Edit-Icon an give the columns a name and a column number. (show image) In our case the columns will have the following column-numbers: Left=1, Center= 0, Right= 2. (show image)The resulting config for the threeColumnTemplate would look like this:

backend_layout {
  colCount = 3
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = leftColumn
          colPos = 1
        }
        2 {
          name = mainColumn
          colPos = 0
        }
        3 {
          name = rightColumn
          colPos = 2
        }
      }
    }
  }
}

The resulting config for a fullSize Template would look like this:

backend_layout {
  colCount = 1
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = mainColumn
          colPos = 0
        }
      }
    }
  }
}

Notice: After creating the Backend-Templates, look for the respective Template-ID. You will find the ID at the right bottom corner, and it would look like ‚Backend Layout [2]‘. My threeColumTemplate has the ID 2, the fullSizeTemplate the ID 3. We will need the respective ID when producing the required TypoScript code. (show image) 11. Now we will write the required TypoScript code for our site. For this purpose we navigate back to ‚WEB‘->’Template‘, click on our root-site and then edit the Setup. (show image) First of all, we will assign the Typo3-Columns with the Fluid-Templates: (show image)

# Create a Fluid Template
page.10 = FLUIDTEMPLATE
page.10 {
  # Set the Template Pathes
  partialRootPath = fileadmin/templates/partials/
  layoutRootPath = fileadmin/templates/layouts/
  variables {
    # Assign the main column with our {content}-destination
    content < styles.content.get
    # Assign the left column with our {content_left}-destination
    content_left < styles.content.get
    content_left.select.where = colPos = 1
    # Assign the right column with our {content_right}-destination
    content_right < styles.content.get
    content_right.select.where = colPos = 2
  }
}

After that we assign the Backend-Template, so that we can select it later when creating pages (show image):

# Assign the Template files with the Fluid Backend-Template
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

  # Set the default Template, our 3 column Template
  default = TEXT
  default.value = fileadmin/templates/threeColumn.html

  # Set also the first [2] Template, our 3 column Template
  2 = TEXT
  2.value = fileadmin/templates/threeColumn.html

  # Set a second [3] Template, our full size Template
  3 = TEXT
  3.value = fileadmin/templates/fullSize.html
}

12. At the end we want to create some pages to test the result of our configuration. We do this under ‚WEB‘->’Functions‘, as we will need several pages. Navigate to this module and click once again on the „New“-icon above the main frame. There we enter the name(s) of our new site(s) and click ‚Create pages‘. (show image) When the dialogue ‚You’re about to create many new pages. Are you sure you want to continue?‘ pops up, click ‚Yes‘. 13. After that we can modify our Root-Site to become a shortcut. Just click within the tree-area on the root-page icon and click edit. (show image) Select on the General-tab the Type ‚Shortcut‘ and the Shortcut Mode ‚First subpage of current page‘. (show image) 14. Now you only need to select the required Template for your pages and create page contents… and that’s about it. Edit for example the start-site and navigate to the Appearance-tab, there we select the threeColumnTemplate as Backend Layout (this page only) and Backend Layout (subpages of this page). (show image) A Backend-Page for our threeColumntemplate could now look like this: (show image) So now I’m going to create my Fluid HTML-Template in detail 🙂 I’ll be back soon and then we’ll see how to create some navigation menus and so on.. 😉 Read here the next step: Create a Typo3 Menu/Navigation and include it in a Fluid-Template

Create base HTML Fluid Templates for Typo3 4.5

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post is the third part of Creating a complete Typo3 website by using the Fluid Template Engine

Here we come to the next few steps for creating a base HTML Fluid Template, just do it point by point.
1. Navigate into the Typo3 Backend ‘FILE’->’Filelist’ Module and click on the ‘fileadmin’ tree node.
2. Click on New-Icon above the main-frame and create a folder named ‘templates’. Here you will store all your template files.
3. Navigate by using the file-tree into the new ‘templates’ directory, and create two directories named ‘layouts’ and ‘partials’. The ‘layouts’ directory is destined for the main templates, wherein the partial templates will be later included. The ‘partials’ directory will store the part templates, like the navigation, the subnavigation and so on.(show image)
4. Now, after we finish the creation of our directory structure, we create our first main-template file named ‘main.html’. Therefore we navigate into the ‘layouts’ directory and click again the New-Icon above the main frame, to create the file. (show image)
5. To edit our new template file, click on the file-icon on the left and click further on ‚Edit‘ (show image)
6. Within the editor your are now able to write the first template code. Just create a main-border-structure (show image), where are later your content templates are placed in:

<div id="header">header</div>
<div id="content"><f:render section="content" /></div>
<div id="footer">footer</div>

 

7. For our website we would create two seperate content templates. A first default content template that will have three columns, and a second template that will have the full size of the content. Therefore we create in the ‚templates‘ directory two files, a ‚threeColumn.html‘ for our default template and a ‚fullSize.html‘ as an alternative template. (show image)
Notice: If you have a fault by naming between the template files and the TypoScript, there are no references shown in the last column from the last sample image.

8. Now we will write the content templates. First, we edit the ‚threeColumn.html‘ template by click on his File-Icon. (show image)
The name of the f:layout must have the name of our in step 6 created template file, that means ‘main’. We could also create several content templates, that use different main-border-structures (as sample for style switches, or complete different website areas) that we assign to the f:layout name attribute.
The f:section defines that these templare is placed in the f:render section=”content” within the assigned main-border-structure template.

<f:layout name="main" />
<f:section name="content">
  <div id="content_left">
    <f:format.html>{content_left}</f:format.html>
  </div>
  <div id="content_main">
    <f:format.html>{content}</f:format.html>
  </div>
  <div id="content_right">
    <f:format.html>{content_right}</f:format.html>
  </div>
</f:section>

 

Our alternative content template could look like:

<f:layout name="main" />
<f:section name="content">
  <div id="content_main_full">
    <f:format.html>{content}</f:format.html>
  </div>
</f:section>

That’s it for now, from the HTML Fluid templates. 😉

Do you have understand every point?! If not, feel free to write me a comment 🙂

Read here the next step: Configure the Fluid TypoScript and create Backend-Templates

Import the ExtBase and the Fluid Template Engine into Typo3 4.5

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post are the second part of Create a complete Typo3 website by using the Fluid Template Engine

To be able to use Fluid within Typo3 4.5, we must install the Extension named ‚fluid‘. ‚fluid‘ itself is dependent on the Extension ‚extbase‘, so we must install the ‚extbase‘ Extension first.

In order for that we have to do the following steps within the Typo3 Backend:
1. Navigate to „ADMIN TOOLS‘ -> ‚Extension Manager‘ (show image)
2. Navigate in the topmost select box to ‚Import Extensions‘
3. Search about ‚extbase‘ (show image)
4. Install the ‚extbase‘ by clicking on the brick stone (show image)
5. In the next step, click ‚make all updates‘

So, if you become the message ‚The extension „extbase“ has been installed.‘ we can continue with the fluid extension:
7. Navigate once again in the topmost select box to ‚Import Extensions‘
8. Search about ‚fluid‘ (show image)
9. Install the ‚fluid‘ by clicking on the brick stone (show image)

That’s it. If you become again the message ‚The extension „fluid“ has been installed.‘ you have successfully integrate the Fluid Template Engine. 😉

Read here the next step: Create fluid base templates

Create a complete Typo3 website by using the Fluid Template Engine

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Heute möchte ich einmal die neue Template-Engine Fluid ausprobieren, welche die Standard Template-Engine im Typo3 5 werden soll.

Aber warum Fluid? In der fünften Version von Typo3 wird noch mehr Trennung zwischen Logik und Darstellung angestrebt, dafür haben die Typo3-Entwickler das System von Grund auf überarbeitet.
So wird bspw. ein Model-View-Controller-System integriert das viel mehr leisten kann, als das relativ statisches System, wie das der herkömmliche Sub-Templates und Marker.

Da ich eh gerade eine komplett neue Typo3 Website zu entwickeln habe, wollten wir alle zu erledigende Punkte von Anfang an durchführen. 😉
Als erstes teilen wir dieses Projekt in ein paar Teilprojekte:

 
Wir beginnen mit dem Download des aktuellen Typo3 Quellcodes von der Seite http://typo3.org/download/, entpacken den Quellcode dann und laden Ihn auf den Ziel-Server.

Wenn der Upload abgeschlossen ist, erstellen wir eine Datei namens ‘ENABLE_INSTALL_TOOL’ und kopieren diese ebenfalls auf den Webspace in das Verzeichnis ‘typo3conf’.

Danach navigiere mit einem Browser zu Typo3-Installtool:

http://your-domain.com/typo3/install/index.php

 
Die erste Nachricht die ich erhalte ist:

Error
TYPO3 Fatal Error: /var/www/virtual/***/dev/htdocs/typo3conf/localconf.php is not writable!

 
Ok…Ich gebe dieser Datei ein wenig mehr Rechte und probiere es noch einmal 😉

Des weiteren passe ich folgend noch die Rechte der Verzeichnisse ‚typo3conf‘ und ‚typo3temp‘ an.
Jetzt sollte das Installtool angezeigt werden und wir können die folgenden Schritte durchführen:

 
1. Gebe die Datenbank-Zugangsdaten ein

 
2. Erstelle oder wähle eine Datenbank aus

 
3. Wenn das ‚fileadmin‘ und das ‚uploads‘ Verzeichnis noch nicht die erforderlichen Zugriffsrechte hat, setze diese

 
4. Wähle das leere Paket, weil wir diese Standard-Konfiguration nicht brauchen

 

Das war’s, schon haben wir unsere Typo3-Installation abgeschlossen

 

Zu Einloggen in das Typo3 Backend navigiere einfach zur folgenden Seite:

http://your-domain.com/typo3/


 
Dort kann man sich dann mit dem Standard-Login anmelden, der wie folgt lautet:
Name: admin
Password: password

Jetzt wo du eingeloggt bist sollte die erste Aktion die Änderung des Passworts sein. Danach vergesse aber auch nicht, das Passwort des Installtools zu verändern 😉

Lese hier wie es weiter geht: ExtBase Extension und die Fluid Template Engine in Typo3 4.5 integrieren