My Typo3

From TechWiki

For technical aspects regarding Typo3, e.g., installation, updating, customization, SEO, ... go to Web Technologies Typo3 section.

Contents

Getting Started

So you have installed Typo3 and when you access your page you see an ugly error message because you still need to set up your Typo3 site. This is what you have to do to get things up and running.

Login to the back end (http://www.mysite.net/typo3) and get started...

Some Useful Extensions

Typo3 strength also lies in the fact that it has a big community providing plug ins (extensions).

Under Tools -> Ext Manager you find the control page for these. Select Loaded Extensions from the drop down menu at the top of the page to see what is installed.

You should definitely have

  • CSS styled content (css_styled_content)

It's also nice to have an RTE editor

  • htmlArea RTE (rtehtmlarea)

Note however that there is a bug in TYPO3 4.x preventing Firefox 2.0.0.3 from using RTE htmlArea: fixit it (e.g., look in this blog) or update to version 4.1.1.

The Basic Idea

Typo3 requires you to create a template file, i.e., a HTML page (plus, if you like, a CSS file) containing tags which will get replaced with dynamic content. This makes Typo3 extremely powerful but also makes it hard for new users to get going.

In addition, there is a section in the back end, also called a template, which contains information,on how Typo3 should behave. It uses a scripting language called TypoScript, which again, is very powerful, but makes life harder...

In a Nutshell

New Page

In the back end go to Web -> Page and left-click the symbol (blue and green filled circle) next to the name of your site and click New and the select Create a new page.

Give the page a name (e.g., root) and uncheck the option Hide page. Now you have a page in your site.

New Template

Go to Web -> Template and select Create template for a new site. If look at your site in a browser you will see a very unimpressive web page (saying "Hello World!"), which is a lot better than the previous error messages...

Templates

Creating a HTML Template

As an example, you want something like

All the ###TAGNAMES### will be later on replaced with dynamic content. This is the purpose of the Typo3 template (see next section).

Note that for the HTML file you should add the tags

 <!--###DOKUMENT### start -->

after the <body> specifier and

 
 <!--###DOKUMENT### start -->

before the </body> specifier. Now everything outside the body will be ignored.

Go to File -> Filelist and create a new directory, e.g., design and upload the HTML and CSS files.

Creating a TypoScript Template

Basic Settings

In Web -> Template select Click here to edit whole template record. In the section 'Setup put

body = TEXT
body.wrap = <body bgcolor=black text=white link=white vlink=white alink=white>  
page.bodyTagCObject < body

page = PAGE
page.typeNum = 0
page.shortcutIcon = fileadmin/design/favicon.ico
page.stylesheet = fileadmin/design/noon.css

page.10 = TEMPLATE
page.10 {
   template = FILE
   template.file = fileadmin/design/noon.html
   workOnSubpart = DOKUMENT
}

The first paragraph allows you to specify the <body> attributes, as the ones from the HTML file are ignored. The second paragraph tells Typo3 what CSS and favicon.ico to use The third paragraph specifies the HTML template and to look for the DOKUMENT tags defined in the last section.

Replacing Tags with Dynamic Content

Note that in the following, any name used for the marks keyword must coincide with a tag specified in your HTML template. E.g.,

marks.HI-IM-A-TAG

expects your HTML file to have a tag

###HI-IM-A-TAG###

Menus

Typo3 maps your page hierarchy (Web -> Page) to nested menu structures. So once you have set up the menu, every page, regardless where it's placed, will automatically be updated into the menu.

TypoScript example in the section page.10 {}:

    marks.LEFT-NAVI = HMENU
    marks.LEFT-NAVI.entryLevel = 0
    marks.LEFT-NAVI.1 = TMENU
    marks.LEFT-NAVI.1.begin = 1
    marks.LEFT-NAVI.1 {
        NO {
            allWrap = <div class="navi">  | </div>
            ATagParams=class="navi"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active">  | </div>
            ATagParams=class="navi_active"
            beforeImg = fileadmin/design/item_blue_gray.gif
        }
    }
    marks.LEFT-NAVI.2 = TMENU
    marks.LEFT-NAVI.2 {
        NO {
            allWrap = <div class="navi" id="level1"> | </div>
            ATagParams=class="navi"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active" id="level1"> | </div>
            ATagParams=class="navi_active"
            beforeImg = fileadmin/design/item_green_gray.gif
        }
    }
    marks.LEFT-NAVI.3 = TMENU
    marks.LEFT-NAVI.3 {
        NO {
            allWrap = <div class="navi" id="level2">| </div>
            ATagParams=class="navi"
            beforeImg = fileadmin/design/item_default.gif
        }
        ACT = 1
        ACT {
            allWrap = <div class="navi_active" id="level2"> | </div>
            ATagParams=class="navi_active"
            beforeImg = fileadmin/design/item_green_gray2.gif
        }
    }

This is a quite an elaborate example, as it allows for a three-tiered menu with GIFs denoting the selected option and special HTML tags being wrapped around the menu items, which lets you define the layout in your CSS file.

Content

It is advisable to to use the above mentioned CSS Styled Content extension to output content. In Web -> Template select Click here to edit whole template record and scroll down to the section Include static (from extensions) and select CSS Styled Content.

Now you can edit the Setup section and add an independent block, e.g., after the page.10 {} part:

styles.content.get = CONTENT
styles.content.get {
    table = tt_content
    select.orderBy = sorting
    select.where = colPos=0
}

Now add this line to your page.10 {} block:

marks.CONT < styles.content.get

CMS

Frontend Editing

Config

The idea of CMS is to isolate the content from any specific format or requirement. Frontend editing, allows users to edit content in the actual web page, without having to bother with Typo3, i.e. its backend.

As frontend editing is done by backend users, you need to allow an option, so the backend login at www.myTypo3Site.ch/typo3 offers the frontend editing option. To this aim, edit typo3conf/localconf.php and add:

$TYPO3_CONF_VARS['BE']['interfaces'] = 'frontend, backend';

Admin Panel

To have fully functional frontend editing, you need to enable the admin panel to the TypoScript template:

config.admPanel = 1

Backend User

Now you need a new backend user: Tools -> User Admin and click the plus symbol on the Usernames line. In the TSconfig section you need to add:

admPanel {
  enable.edit = 1
  module.edit.forceNoPopup = 0
  module.edit.forceDisplayFieldIcons = 1
  module.edit.displayIcons = 1
  module.edit.forceDisplayIcons = 1
  hide = 1
}

Note that its is advisable to create a backend group with the required permissions and then add the new backend user to the group. To create a group go to Web -> Page and left-click the world symbol (page root) and select New.

To allow a backen user to mount the filesystem, add a new Filemount and set:

PATH: .
BASE select relative

Now you need to set the permissions for the backend user. In Web -> Access -> User overview edit your root page and add the backend group to the GROUP drop down list and make the permissions recursive.

To allow frontend editors to create new pages and new content, add the following to your TypoScript template:

page.20 = EDITPANEL
page.20 {
  label = Neuer Seiteninhalt einfügen
  line = 5
  newRecordFromTable = tt_content
}

Frontend User

You can have users login to the page and view restricted content. These users are frontend users, as they don't login via www.myTypo3Site.ch/typo3.

Create a new page ("Web" -> "Page") and select it to be a SysFolder. Left-click on the new page in the hierarchical view and select "Website usergroup" and then "Website user" and select the usergroup.

To be done: embed a login form for the frontend user into a page.

Special Stuff

Navigation Path

Add this to your page.10 {} block in the Settings section, where your HTML file has a tag ###PATH### marked.

   marks.PATH = HMENU
   marks.PATH.entryLevel = 0
   marks.PATH.special = rootline
   marks.PATH.1 = TMENU
   marks.PATH.1.begin = 2
   marks.PATH.1.NO.allWrap = | / |*||*| |

Multi-Language support

Installation

Typo3 is great at supporting multiple languages. The idea is, that every page (Web -> Page) can have multiple language entries as content.

If you followed the above recipe for adding content, you can add this line

select.languageField = sys_language_uid

to your styles.content.get {} block.

Add this

config.linkVars = L
config.sys_language_uid = 0
config.language = en 

[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = de
[global]

to the Setup section, e.g., before body = TEXT.

Finally add this

    marks.LANGUAGES = PHP_SCRIPT
    marks.LANGUAGES {
        file = fileadmin/scripts/lang.php
        NO{
            allWrap =  <li class="plain"> | </li>
        }
        ACT = 1
        ACT {
            allWrap =  <li class="selected"> | </li>
        }
    }

to your page.10 {} block in the Settings section, assuming a tag in your HTML file called ###LANGUAGES###. In addition, you need to upload the lang.php file to a directory called scripts (or wherever, if you adjust the settings). This file is taken from "Einstieg in Typo3", A. Stöckl und F. Bongers, Galileo Press, 2005.

lang.php:

<?php
 $query = "SELECT * FROM pages_language_overlay WHERE pid=".$GLOBALS["TSFE"]->id.$GLOBALS["TSFE"]->sys_page->enableFields("pages_language_overlay")." GROUP BY sys_language_uid";

$res = mysql(TYPO3_db,$query);
$langArr=array();
while($row=mysql_fetch_assoc($res)) {
     $langArr[$row["sys_language_uid"]]=$row["title"];
}

$flags = array();
if ($GLOBALS["TSFE"]->sys_language_uid==0) {
    // Englisch ist aktiv - Deutsch anzeigen
    $flags[] = '<a href="index.php?id='.$GLOBALS["TSFE"]->id.'&L=1" target=_top><img src="fileadmin/design/linkTransparent.gif"><span class="lang">Deutsch</span></a>';
} elseif ($GLOBALS["TSFE"]->sys_language_uid==1) {
    // Deutsch ist aktiv - Englisch anzeigen
    $flags[] = '<a href="index.php?id='.$GLOBALS["TSFE"]->id.'&L=0" target=_top><img src="fileadmin/design/linkTransparent.gif"><span class="lang">English</span></a>';
}

$content = implode("",$flags);
?>

Note that if you have problems uploading php files, you need to allow this file extension. Edit /.../typo3conf/localconf.php to include

// Allow php scripts to be uploaded and integrated in the backend
$TYPO3_CONF_VARS['BE']['fileExtensions']['webspace']['allow'] = 'php';
$TYPO3_CONF_VARS['BE']['fileExtensions']['webspace']['deny'] = ``;
$TYPO3_CONF_VARS['BE']['fileDenyPattern'] = ``;

Setup

Click on the symbol (supposedly a globe) of your website in the tree listing and select New and Website language and create new language, e.g., Deutsch.

Now you can select any page and choose Languages from the drop down list located at the top right of the (Web -> Page) page. Then select Make new translation of this page with Deutsch chosen from the small drop down list to the right. Now choose an alternative name for the page (this will be shown in the menu). When you view the page, there is a new column of content for the new language.

Language Dependant Elements

If you have a tag in your HTML template called ###ABC### and you want it to display text in different languages, edit the page.10 section in the TypoScript template

    marks.ABC = TEXT
    marks.ABC {
    	value = Willkommen
    	wrap = <div class="titel"><b> | </b></div>
    }

edit the language specific block (note that it should be located at the end of your template)

 [globalVar = GP:L = 0]
    ...
    page.10.marks.ABC {
    	value = Welcome
    	wrap = <div class="titel"><b> | </b></div>
    }
 [global]

PHP Scripts

Install the extension called Page PHP Content (page_php_content). As this file doesn't appear to be available anymore, go here tx3 file.


To replace HTML template tags with PHP scripts, use

   # Counter
   marks.TAG = PHP_SCRIPT_EXT
       marks.VISITORS {
       file = fileadmin/dir/my.php
   }

in your page.10 template block.

If you want to insert PHP scripts as content in some page, create new page content and choose Type to be PHP Script (Text is default).

Note that if you have problems uploading php files, you need to allow this file extension. Edit /.../typo3conf/localconf.php to include

// Allow php scripts to be uploaded and integrated in the backend
$TYPO3_CONF_VARS['BE']['fileExtensions']['webspace']['allow'] = 'php';
$TYPO3_CONF_VARS['BE']['fileExtensions']['webspace']['deny'] = ``;
$TYPO3_CONF_VARS['BE']['fileDenyPattern'] = ``;

Adding Login Form

Create Sysfolder with Forntend users. Modify the Typo3 template's Constants section with

styles.content.loginform.pid = XXX

where XXX is the PID number of the Sysfolder.

In the Setup part before page.10 {:

tt_content.login.20.dataArray.10.label.data >
tt_content.login.20.dataArray.20.label.data >
tt_content.login.20.dataArray.10.label = User
tt_content.login.20.dataArray.20.label = Password 

tt_content.login.20.commentWrap.wrap =
tt_content.login.20.REQ.labelWrap.wrap =
tt_content.login.20.COMMENT >
tt_content.login.20.COMMENT.layout = <span></span>

At the end of the Setup part, add:

page.10.marks.LOGIN < tt_content.login.20

Finally, add a

###LOGIN###

tag to your HTML template.

Fotoboek without Imagemagick

  • Extension "jb_gd_resize" when GD2 is installed
  • change directory to fotos in localconf.php:
$TYPO3_CONF_VARS["FE"]["addAllowedPaths"] = 
"/data/.../typo3photos, /data/.../morephotos ";

Thanx Pascal...

Typo3 Example Sites

Typo3_Example_Sites

Problems

Installing Extensions

If you get

TYPO3 Fatal Error: Extension key "div" was NOT loaded! (t3lib_extMgm::extPath)

after installing an extension, go to your typo3config directory and edit localconf.php at the line

$TYPO3_CONF_VARS['EXT']['extList'] ...

and delete the name of the extension you just loaded from the list.

Then delete the temp files in that directory called

temp_CACHED_...

Now your site is up and running again. From typo3forum.net.

I experienced this with the rss_aggregator_0.0.4.t3x extension.