User Tools

Site Tools


typo3

Table of Contents

TYPO3 usage and configuration

Where is the TYPO3 Documentation?

  • The real english documentation is available as an Extension here. The download link is on the linked page, at the bottom.
  • The official documentation, cluttered in Open Office .sxw Files is here
  • The more usable documentation in German language as one .pdf File is here

How to enable Typo3 Admin Panel for frontend editing?


Add the following code to TSconfig of the user or user-group, which should see the Administration Console after logging in.

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

or just add the following line into the Template > Info/Modify > Edit the whole template record > Setup-form

config.admPanel = 1

How to allow recursive deleting of a page Tree in the List module?

Add the following customization to the current user' TSConfig:

setup.override{
  recursiveDelete=1
}

RTE - RichTextEditor

The RTE is configurated in the pages TS-Config. To decide which Buttons should be displayed and in which order write the following into the root-page TS-Config.

# Buttons die gezeigt/versteckt werden
RTE.default.showButtons = textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about, latex, latexcenteredbutton
	        
RTE.default.hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste
 	
# Buttons Reihenfolge		
RTE.default.toolbarOrder = textstyle, textstylelabel, latex, latexcenteredbutton, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about

You can see all buttons by entering

showButtons = *

The TSConfig can be entered as following:

TypoScript

  • TypoScript is case sensitive.
  • The names of object types must have all letters in upper case: mypage = PAGE
  • The names of properties must always start with a small letter and must not contain any special character: OBJECT.property NOT OBJECT.Propert&#y
Functions

TypoScript has some functions, predefined in the file class.tslib_content.php like PAGE, HMENU etc.
In the code they are written in capital letters and used to retrieve DOM objects, render html items like lists…

//page object has all integers as properties. Integers are not line numbers - they determine the order in which the content will be displayed on the page in ONE LINE
page.10 = TEXT
Objects

Typo uses objects with predefined properties. The syntax to get or set the properties is.

page.10.value = TEXT

//to set more than one property of object at once
object{
 property1 = value1
 property2 = value2
}


myObject = TEXT
//reference object
10 =< myObject
//copy object
10 < myObject
//delete object
10 >

Page has all integers as properties. Integers mean the output order, in which the assigned values will be displayed on the page (order - not rows!
E.g.

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD10!

page.20 = TEXT
page.20.value = HELLO WORLD20!

page.21 = TEXT
page.21.value = HELLO WORLD21!

page.30 = TEXT
page.30.value = HELLO WORLD30!

results in : “HELLO WORLD10!HELLO WORLD20!HELLO WORLD21!HELLO WORLD30!”

Branch

Typo uses objects with predefined properties. The syntax to get or set the properties is.

[browser = msie] && [system = mac]
  //here is the true code
[ELSE]
  //here is the else code
[GLOBAL]

//rest

Own branches can be defined in typo3conf/localconf.php. by using php

Constants

Constants can be defined in the Constants field of the Template area.

Constant can be retrieved as following

10.value = {$myCOnstant}

Design Templates


HTML documents, where some some places can be marked by subparts. Typo3 will then dynamically replace those subparts by content.

markers

CAN'T be embedded into HTML comments. Therefore should only use subparts. Markers look like that

###MARKERNAME###
subparts
  • CAN be embedded into HTML comments, composed of two parts.
  • Subparts can't be empty
  • Subparts are not markers - markers (###MARKERNAME###) are like subparts, but they contain from one piece and cant be embedded in HTML comments.

Markers look like that

<!-- ###MARKERNAME### start-->
Default input
<!-- ###MARKERNAME### end-->

Templates

Written in Typoscript in Backend Template> Edit the whole template record > Setup

Including CSS or Javascript in typoscript
Include any Code into the header

Sometimes you may need to include a <script> tag which is not empty, or something else.

      page = PAGE
      page.headerData.10 = TEXT
      page.headerData.10.value (
      	<script type="text/javascript" src="fileadmin/templates/main/js/mathjax/MathJax.js">
	MathJax.Hub.Config({
	  config: ["default.js"],
	  jax: ["input/MathML"]
	});
	</script>
      )

Use MySQL from TypoScript

Retrieving page properties from page table

E.g. to read the title field from the database, wether the name of the DB Table, not the Database has to be specified. The value of the title-DB-field for the current page can be retrieved as following:

page.10.marks.OUTPUT= TEXT 
page.10.marks.OUTPUT{
   field = title
}

or

page.10.marks.RIGHT = TEXT 
page.10.marks.RIGHT.data = field:title

which will result in the following SQL statement

SELECT title FROM pages WHERE uid=23
Retrieving properties from other tables

To specify more complicated queries use the CONTENT object, e.g.

1 = CONTENT
1.table = tt_content
1.select {
pidInList = this
orderBy = sorting
}

\\How to generate a menu dynamically, from the available backend pages?

HMENU

Is not a renderable Typo3 objects, but one which contains menuitems by levels 1,2,3 … To each level a concrete menu like TMENU or GMENU can be attached.

IFSUB

There are items, which

Change Menu entries, add custom tags

To do this write a php function function($I,$conf) in a file and include from the template(backend, setup)

1. Creating the function is described below
2. Including of the created file with the function from the Backend works as following
# lib to sort out emty-pages menu-links.
includeLibs.noemptymenuitems = fileadmin/templates/main/_alibraries/skipMenuLinksToEmptyPages.php
3. The defined function will be used inside of the menu objects as folowing
FIRSTNAV = HMENU
FIRSTNAV.TMENU.1.IProcFunc = user_function_skipMenuLinksToEmptyPages
FIRSTNAV.TMENU.2.IProcFunc = user_function_skipMenuLinksToEmptyPages
Example of the menu changing function:

checks whether there is any content on the site

  • if yes - menuentry is displayed with a link to thesite
  • if not - then
  • * if there is a class=“dir” in ATagParams menuentry is displayed as text
  • * if there is no class=“dir” menuentry is deleted at all
<?php
/**
 * Used in the menu item state example of the "testsite" package at page-path "/Intro/TypoScript examples/Menu object examples/Menu state test/"
 *
 * @param	array		The menu item array, $this->I (in the parent object)
 * @param	array		TypoScript configuration for the function. Notice that the property "parentObj" is a reference to the parent (calling) object (the tslib_Xmenu class instantiated)
 * @return	array		The processed $I array returned (and stored in $this->I of the parent object again)
 * @see tslib_menu::userProcess(), tslib_tmenu::writeMenu(), tslib_gmenu::writeMenu()
 */
function user_function_skipMenuLinksToEmptyPages($I,$conf)	{
	$muid = $I['uid'];
	$firstLinkTag = $I['parts']['ATag_begin'];
	$wraper = $I['val']['wrapItemAndSub'];
	
	//check whether the site with the current pid is not empty
    $query = "SELECT * FROM tt_content WHERE pid=$muid";
	$res = $GLOBALS['TYPO3_DB']->sql(TYPO3_db, $query);
    $rowarr =  mysql_fetch_array($res);
    
	//if the page, which current menuitem links is empty
	if($rowarr==false){
		//the current page is empty - hide its links
		
		//check if the link has a class="dir" property - links have this property, if the current menuitem has subentries
		 if( strpos($firstLinkTag, 'class="dir"') <> false ){
			//exchange link by span, for this empty menuitem with subitems in the main menu
			$I['parts']['ATag_begin']="<span class=\"dir\" title=\"$mtitle\"  >";
			$I['parts']['ATag_end']='</span>';
			
		 }else if(strpos($wraper, 'class="dir"') <> false){
		 	//exchange link by span, for this empty menuitem with subitems in the second menu
		 	$I['parts']['ATag_begin']="<span title=\"$mtitle\"  >";
			$I['parts']['ATag_end']='</span>';
		 }
	}
	return $I;
}
?>

Extension development

  • Placing custom modules - and customized material in general! - in the typo3conf/ folder is clever because the typo3conf/ folders content is not touched and can thus be upgraded easily by simply overriding the files when a new version is released
  • Always prepend your user defined modules with a “u” like in “uPhotomarathon”
Including something into the head of a plugin page, like CSS or JS

$this→prefixId can be replaced by any key, but it should be unique Typo3 wide. Its a good Idea to take $this→prefixId which gives the unique Typo3 key.

$GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = '<script src="path/exhibit-api.js" type="text/javascript"></script>';
API for extension development
Command used in class.tx_bibtexbrowser_pi1.php what id does
t3lib_extMgm::extPath($MYEXTENSIONKEY) Z:/home/or.temporary/www/typo3conf/ext/latex/
t3lib_extMgm::extRelPath($MYEXTENSIONKEY) ../typo3conf/ext/latex/
t3lib_extMgm::siteRelPath($MYEXTENSIONKEY) typo3conf/ext/latex/
function isLoaded($key,$exitOnError=0) checks if plugin is loaded
$GLOBALS[“TSFE”]→JSeventFuncCalls[“onload”][“txfhdmediamap”]=“alert('bla');”; calls the JS function alert(“bla”) when the document loads
$GLOBALS['TSFE']→additionalJavaScript[$headkey.'31']='function xorx(){alert(“xorx”)};' defines the JS function xorx in the doc src
$GLOBALS['TSFE']→set_no_cache(); disables cache for a website, where your extension is used
Flexfields

Flexfields define the backend-GUI, on the page, where the plugin is inserted. Flexfields are html fields, defined in an xml file which is normally named flexform_ds.xml

Localization (l10n)

1. First install new website language by choosing the page-root (earth or typo3 symbol) in the Web > List module and clicking the add new record > Website Language. Do not add the default language.

2. Add the following to the localconf.php file to enforce utf-8 encoding in the backend.

// For backend charset
$TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';

3. add something like that to the typoscript template:

# language
   config.linkVars = L
   config.uniqueLinkVars = 1
   config.sys_language_mode = content_fallback
   config.sys_language_overlay =1
   config.sys_language_uid = 0
   config.language = de
   config.locale_all = de_DE
   #config.sys_language_overlay = hideNonTranslated

   # deutsch
   [globalVar = GP:L = 0]
   config {
      #typo internal code
      language = de            
      
      #country code, win:"german", linux:"de_DE"
      locale_all = de_DE
      
      #set xml:lang manually
      htmlTag_langKey = de   
      
      #internal id of this language, 0 default
      sys_language_uid = 0   
   }
   [global]

   # english
   [globalVar = GP:L = 1]
   config {
      language = en
      locale_all = en_US
      htmlTag_langKey = en
      sys_language_uid = 1
      treeLevel = 1
   }
   [global]

and the following to generate a language menu

   LANGUAGES= HMENU
   LANGUAGES{
      # deutsch und englisch
      special = language
      special.value = 0,1
      1 = TMENU
      1 {
      NO = 1
      NO.stdWrap.cObject = TEXT
      NO.stdWrap.cObject {
         value = Deutsch || Englisch
         lang.en = German || English
      }
      ACT < .NO
      ACT.doNotLinkIt=1
      ACT.stdWrap.cObject {
         value = DEUTSCH || Englisch 
         lang.en = German || ENGLISH
      }
      USERDEF1 < .NO
      USERDEF1.stdWrap.cObject {
         value = DEUTSCH || -
         lang.en = - || ENGLISH
      }
      USERDEF2 < .NO
      USERDEF2.stdWrap.cObject {
         value = (DEUTSCH) || Englisch
         lang.en = German || (ENGLISH)
      }
      }
   }

4. Add the following to the User TSConfig for default language to be named and displayed with a flag and a name (here “Deutsch” and “de.gif”)

#default language label in backend
mod.SHARED.defaultLanguageLabel=Deutsch

#default language flag file in gfx/flags/
mod.SHARED.defaultLanguageFlag=de.gif




If there are double content entries, after localization - add the following to the CONTENT TypoScript, to filter thecontent:

select.languageField = sys_language_uid

e.g

   CONTENTSECTION=CONTENT
   CONTENTSECTION{
	table = tt_content
	select.orderBy = sorting
	select.where = colPos = 0
	select.languageField = sys_language_uid
   }

5. To activate the browser-language detection install the extension rlmp_language_detection which requires the static_info_tables extension.

When both extensions rlmp_language_detection and static_info_tables are installed, configure the default language in the Teplate Setup (e.g. german):

# language in rlmp_language_detection plugin
plugin.tx_rlmplanguagedetection_pi1 {
   defaultLang = de
   useOneTreeMethod = 1
}

ATTENTION: To work, the extension rlmp_language_detection requires all extra languages to be named as defined in ISO_639 two letter code, like the en on the picture:

Speaking URL

The URL can be configured to be more human and search engine friendly by using the realurl extension. The following configuration is for multiple languages: Language 0 is German, Language 1 is English.

1. Extension

Install the realurl extension

2. Typoscript template

Add the following typoscript to the template.

 
## REALURL ##
config {
	simulateStaticDocuments = 0
	tx_realurl_enable = 1
} 
config.baseURL = http://or.temporary/
[globalString = ENV:HTTP_HOST = or.nu]
	config.baseURL = http://or.nu/
[globalString = ENV:HTTP_HOST = orsite.co.cc]
	config.baseURL = http://orsite.co.cc/
[global]
3. Edit ext_localconf.php

Configure the extension in the \typo3conf\ext\realurl\ext_localconf.php

$TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT'] = array(
	'init' => array(
		'enableCHashCache' => 1
	),
	'preVars' => array(
		array(
			'GETvar' => 'L',
			'valueMap' => array(
				'de' => '0',
				'en' => '1',
				),
			'valueDefault' => 'de',
			# 'noMatch' => 'bypass',
		),
		array(
			'GETvar' => 'no_cache',
			'valueMap' => array(
				'no_cache' => 1,
			),
			'noMatch' => 'bypass',
		),
	),
	'fileName' => array (
		'index' => array(
			'backend.php' => array(
				'keyValues' => array (
					'type' => 100,
				)
			),
			'print' => array(
				'keyValues' => array(
					'type' => 98,
				)
			),
		),
	),
	'postVarSets' => array(
		'_DEFAULT' => array (
			'article' => array(
				array(
					'GETvar' => 'tx_ttnews[tt_news]',
				),
				array(
					'GETvar' => 'tx_ttnews[backPid]',
				),
			),
			'category' => array(
				array(
					'GETvar' => 'tx_ttnews[cat]',
				),
			),
			'neste' => array(
				array(
					'GETvar' => 'tx_ttnews[pointer]',
				),
			),
		),
	),
	'pagePath' => array(
		'type' => 'user',
		'userFunc' => 'EXT:realurl/class.tx_realurl_advanced.php:&tx_realurl_advanced->main',
		'spaceCharacter' => '-',
		'languageGetVar' => 'L',
		'expireDays' => 3
	),
);
4. htaccess

Add the following configuration to the .htaccess in the root folder of typo3.

RewriteEngine On

RewriteRule ^typo3$ - [L]
RewriteRule ^typo3/.*$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule .* index.php

Backend customization by TYPOSCRIPT

Here the Backend customizations are done for a specific user inside of the TSConfig:

Hide columns

Left 1 Normal 0 Right 2 Border 3

#shows only columns Normal and Right
mod.SHARED.colPos_list = 0,2
Language

If multiple languages are used on the side - cusomize the default language

#default language label in backend
mod.SHARED.defaultLanguageLabel=Deutsch

#default language flag file in gfx/flags/
mod.SHARED.defaultLanguageFlag=de.gif
Allow recursive deleting of pages

If multiple languages are used on the side - cusomize the default language

setup.override.recursiveDelete=1

Backend customization by BACKEND LAYOUT

Since Typo 4.5 it is possible to customize the column names and positions in the backend:

1. First create a new Backend column Layout:

by choosing the root page Web>List module

and adding a new Backend Layout

by choosing a Title and clicking the Wizard button

and creating a custom column layout, by using the following column numbers:

Column Column Number
NORMAL0
LEFT1
RIGHT2
BORDER3

finally add th layout to the chosen page in the web>page module by clicking edit page properties > Appearence and choosing the predefined Layout

so that the backend will look as following, if you defined a top column and a bottom column

localconf.php

In the file localconf.php, which is found the the Typo3 root directory, some global configurations are done in Typo3. Here the changes of system arrays like $TYPO3_CONF_VARS… are done.

Set the encoding
// For backend charset
$TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';

Indexed search is an extension, which can check the site content and provide a searchbox. It needs severalt extensions to work fine:

  1. indexed_search
  2. crawler
  3. macina_searchbox

Install them all and configure them as given below.

1. Search results site

Create a special page, where the search results will be displayed. Check it's pid. Assuming the pid is 133. You wil need this below. Hide the result page in the menu, so that it is not listed as a menu entry.

2. Add the results plugin to the results site

Add the general plugin named Indexed search to the results site.

3. new search results template

Create a new search results template. Examples can be found in \typo3\sysext\indexed_search\pi\ Assuming that a new template is named
fileadmin/templates/search/search.html
You wil need this below.

3. Entry into the main template

Use the pid and the path to the template.

# search - enable indexed search
   config.index_enable = 1
# search - set the search-result page id
   plugin.tx_macinasearchbox_pi1.pidSearchpage = 133
# set a new template for search results
   plugin.tx_indexedsearch.templateFile = fileadmin/templates/search/search.html
3. Retrieve the information from your site by using crawler

Site crawler (crawler)

1. Create an index configuration

Use the List module on the root page. Click “Add new record” to add a new Crawler Configuration.

2. Crawl the site

Use the Info module on the page you want to crawl (root?). Choose the Site crawler in the upper dropdown. Choose the crawler configuration, created in the step 2. Click crawl site to start crawling.

3. Add a backend user

The crawler needs a backend user named “_cli_crawler” to work fine. Add the user by using the User Admin module. The password is not important.

The searchbox can be added by using the macina_searchbox extension.

To add the searchbox somewhere into the design template.

1. Add a new section somewhere into the template
<!-- ###SEARCHSECTION### start--> Searchbox will be here <!-- ###SEARCHSECTION### end-->
   SEARCHSECTION >
   SEARCHSECTION < plugin.tx_macinasearchbox_pi1
typo3.txt · Last modified: 2020/12/27 20:35 by 127.0.0.1