Posts Tagged ‘ FLUID

Typo3-Snippet: Fluid-Output on a special page

This snippet displays something on page with id 791:

<f:if condition="{0:data.uid} == {0:'791'}">
    <f:then>
      Display on page 791
    </f:then>
    <f:else>
      Display on other pages
    </f:else>
</f:if>

(Deutsch) LESS mit Fluid-Templates verwenden in Typo3 4.5

TIP: To use LESS optimal fluid with TYPO3 templates, I recommend using the Fluid-Template-Manager (short FTM).

(Deutsch) 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, the new Framework that is also used for developing Typo3 5

Wow, that’s nice ..

Just now I watched a video introduction to Flow3, and I must say I really like it. Absolute new technology, methodologies and programming paradigms. Everything is completely object-oriented and it is for example Aspect Oriented Programming, Domain-Driven Design and much more is applied. So it must be, then makes developing fun 🙂

So, I’m finished here now and going to create my first Flow3 project. So stay tuned and read my next article here about Flow3 that are definitely coming 😉

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

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short 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

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short 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

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short FTM).

Notice: This Post are the third part of Create 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

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short 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, when you get 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

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short FTM).

Today i will check out the new Template Engine Fluid, that’s to be the default Template Engine in Typo3 Version 5.

So, why Fluid? The fifth version of Typo3 aspires the separation of the logic and the appearance, therefore have the Typo3 developers the system from the ground up renovated. Cause a view in a Model-View-Controller system, can much more provide as a relatively static system, as the conventional subparts and markers can do.

First of all, because i just have to develop a complete new website, we will do all the needed activities from the start. 😉
Now we will split these ‘little’ project in some subparts:

 
We beginning with download the current Typo3 sourcecode from http://typo3.org/download/, extracted the sourcecode and uploaded these to the destination Server.

If the upload progress is done, we create a file named ‘ENABLE_INSTALL_TOOL’ and copy it also on the webspace into the ‘typo3conf’ directory.

After that, navigate with your browser into the Typo3 Install-Tool:

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

 
The first message i’ve receive, is:

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

 
Ok… I give these file more permissions and try it again 😉

And further i adjust also the ‘typo3conf’ and ‘typo3temp’ diretory permissions. Now the Install-Tool should be displayed (show image), and we do the following steps:

1. Enter your Database Connection (show image)
2. Select or create a database (show image)
3. If the ‘fileadmin’ and the ‘uploads’ directory not already have the required permission, adjust it (show image)
4. Choose the blank package, because we didn’t need the default configuration (show image)

That’s it, now you have finished the Typo3 installation (show image)

To login into the Typo3 Backend, navigate to the backend page (show image):

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

 
There you can login with the default user, that is:
Name: admin
Password: password

Now where you are logged in, the first thing you should do is to change the password! After that, don’t forget to change also the Install-Tool password 😉

Read here the next step: Import the ExtBase and the Fluid Template Engine into Typo3 4.5