page

Pages are referenced by two main values. The "id" and "type".

The "id" points to the uid of the page (or the alias). Thus the page is found.

The "type" is used to define how the page should be rendered. This is primarily used with framesets. Here the frameset normally has the type=0 (or not set) and the documents in the frameset would be defined with another type, e.g. type=1 for the content-page.

You should explore the framesets of the TYPO3-sites around. Also look in the standard-templates for framesets.

It's a good habit to use type=1 for the main-page of a website with frames. With no-frames sites type is normally zero.

Another good habit is to use "page" as the top-level object name for the content-page on a website.

Most of this code is executed in the PHP script typo3/sysext/frontend/Classes/Page/PageGenerator.php.

Properties

Property Data Type stdWrap Default
1,2,3,4... cObject    
bodyTag <tag>   <body>
bodyTagAdd string    
bodyTagCObject cObject    
bodyTagMargins integer    
config ->CONFIG    
CSS_inlineStyle string    
cssInline ->CARRAY    
extOnReady ->CARRAY    
footerData ->CARRAY    
frameSet ->FRAMESET    
headerData ->CARRAY    
headTag <tag> /stdWrap   <head>
includeCSS.[array] resource    
includeCSSLibs.[array] resource    
includeJS.[array] resource    
includeJSFooter.[array] resource    
includeJSFooterlibs.[array] resource    
includeJSLibs.[array] resource    
inlineLanguageLabel (array of strings)    
inlineLanguageLabelFiles (array of strings)    
inlineSettings (array of strings)    
insertClassesFromRTE boolean    
javascriptLibs (array of strings)    
jsFooterInline ->CARRAY    
jsInline ->CARRAY    
meta ->META    
shortcutIcon resource    
stdWrap ->:ref:stdWrap <stdwrap>    
stylesheet resource    
typeNum integer   0
wrap wrap    

Property details

1,2,3,4...

Property

1,2,3,4...

Data type

cObject

Description

These properties can be used to define any number of objects, just like you can do with a COA content object.

bodyTag

Property

bodyTag

Data type

<tag>

Description

Body tag on the page

Example:

<body bgcolor="{$bgCol}">

Default

<body>

bodyTagAdd

Property

bodyTagAdd

Data type

string

Description

This content is added to the end of the bodyTag.

bodyTagCObject

Property

bodyTagCObject

Data type

cObject

Description

This is the default body tag. It is overridden by ".bodyTag", if that is set.

Note: Additionally to the body tag properties noted here, there also is the property "config.disableBodyTag", which - if set - disables body tag generation independently from what might be set here.

bodyTagMargins

Property

bodyTagMargins

Data type

integer

Description

margins in the body tag.

Property:

.useCSS = 1 (boolean) - will set a "BODY {margin: ...}" line in the in-document style declaration - for XHTML compliance.

Example:

bodyTagMargins = 4

This adds leftmargin="4" topmargin="4" marginwidth="4" marginheight="4" to the bodyTag.

config

Property

config

Data type

->CONFIG

Description

Configuration for the page. Any entries made here override the same entries in the top-level object "config".

CSS_inlineStyle

Property

CSS_inlineStyle

Data type

string

Description

This value is just passed on as CSS.

Note: To make TYPO3 actually output these styles as inline CSS (in-document CSS encapsulated in <style> tags), config.inlineStyle2TempFile must be set to 0.

cssInline

Property

cssInline

Data type

->CARRAY

Description

Use cObjects for creating inline CSS

Example:

cssInline {
    10 = TEXT
    10.value = h1 {margin:15px;}

    20 = TEXT
    20.value = h1 span {color: blue;}
}

extOnReady

Property

extOnReady

Data type

->CARRAY

Description

ExtJS specific, adds inline JavaScript, wrapped in Ext.onReady.

Example:

page.extOnReady {
   10 = TEXT
   10.value = Ext.Msg.alert("TypoScript Message","Hello World!");
}

will produce following source:

Ext.onReady(function() {Ext.Msg.alert("TypoScript Message","Hello World!"); });

footerData

Property

footerData

Data type

->CARRAY

Description

Same as headerData above, except that this block gets included at the bottom of the page (just before the closing body tag).

frameSet

Property

frameSet

Data type

->FRAMESET

Description

if any properties is set to this property, the page is made into a frameset.

headerData

Property

headerData

Data type

->CARRAY

Description

Inserts content in the head section of the website. Could e.g. be Meta tags.

While you can also use this to include stylesheet references or JavaScript, you should better use page.includeCSS and page.includeJS for such files. Features like file concatenation and file compression will not work on files, which are included using headerData.

By default, gets inserted after all the style definitions.

headTag

Property

headTag

Data type

<tag> /stdWrap

Description

Head-tag if alternatives are wanted

Default

<head>

includeCSS.[array]

Property

includeCSS.[array]

Data type

resource

Description

Inserts a stylesheet (just like the .stylesheet property), but allows setting up more than a single stylesheet, because you can enter files in an array.

The file definition must be a valid "resource" data type, otherwise nothing is inserted.

Each file has optional properties:

.allWrap: Wraps the complete tag, useful for conditional comments.

.allWrap.splitChar: Defines an alternative splitting character (default is "|" - the vertical line).

.alternate: If set (boolean) then the rel-attribute will be "alternate stylesheet".

.disableCompression: If config.compressCss is enabled, this disables the compression of this file.

.excludeFromConcatenation: If config.concatenateCss is enabled, this prevents the file from being concatenated.

.external: If set, there is no file existence check. Useful for inclusion of external files.

.forceOnTop: Boolean flag. If set, this file will be added on top of all other files.

.if: Allows to define conditions, which must evaluate to TRUE for the file to be included. If they do not evaluate to TRUE, the file will not be included. Extensive usage might cause huge numbers of temporary files to be created. See ->if for details.

.import: If set (boolean) then the @import way of including a stylesheet is used instead of <link>

.media: Setting the media attribute of the <style> tag.

.title: Setting the title of the <style> tag.

Example:

includeCSS {
  file1 = fileadmin/mystylesheet1.css
  file2 = stylesheet_uploaded_to_template*.css
  file2.title = High contrast
  file2.media = print
  ie6Style = fileadmin/css/style3.css
  ie6Style.allWrap = <!--[if lte IE 7]>|<![endif]-->
  cooliris = http://www.cooliris.com/shared/
             resources/css/global.css
  cooliris.external = 1
}

includeCSSLibs.[array]

Property

includeCSSLibs.[array]

Data type

resource

Description

Adds CSS library files to head of page.

The file definition must be a valid "resource" data type, otherwise nothing is inserted. This means that remote files cannot be referenced (i.e. using "http://..."), except by using the ".external" property.

Each file has optional properties:

.allWrap: Wraps the complete tag, useful for conditional comments.

.allWrap.splitChar: Defines an alternative splitting character (default is "|" - the vertical line).

.alternate: If set (boolean) then the rel-attribute will be "alternate stylesheet".

.disableCompression: If config.compressCss is enabled, this disables the compression of this file.

.excludeFromConcatenation: If config.concatenateCss is enabled, this prevents the file from being concatenated.

.external: If set, there is no file existence check. Useful for inclusion of external files.

.forceOnTop: Boolean flag. If set, this file will be added on top of all other files.

.if: Allows to define conditions, which must evaluate to TRUE for the file to be included. If they do not evaluate to TRUE, the file will not be included. Extensive usage might cause huge numbers of temporary files to be created. See ->if for details.

.import: If set (boolean) then the @import way of including a stylesheet is used instead of <link>

.media: Setting the media attribute of the <style> tag.

.title: Setting the title of the <style> tag.

Example:

includeCSSLibs.twitter = http://twitter.com/styles/blogger.css
includeCSSLibs.twitter.external = 1

includeJS.[array]

Property

includeJS.[array]

Data type

resource

Description

Inserts one or more (Java)Scripts in <script> tags. With moveJsFromHeaderToFooter set to TRUE all files will be moved to the footer. The file definition must be a valid "resource" data type, otherwise nothing is inserted. This means that remote files cannot be referenced (i.e. using "http://..."), except by using the ".external" property.

Each file has optional properties:

.allWrap: Wraps the complete tag, useful for conditional comments.

.allWrap.splitChar: Defines an alternative splitting character (default is "|" - the vertical line).

.async: Allows the file to be loaded asynchronously.

.disableCompression: If config.compressJs is enabled, this disables the compression of this file.

.excludeFromConcatenation: If config.concatenateJs is enabled, this prevents the file from being concatenated.

.external: If set, there is no file existence check. Useful for inclusion of external files.

.forceOnTop: Boolean flag. If set, this file will be added on top of all other files.

.if: Allows to define conditions, which must evaluate to TRUE for the file to be included. If they do not evaluate to TRUE, the file will not be included. Extensive usage might cause huge numbers of temporary files to be created. See ->if for details.

.type: Setting the MIME type of the script (default: text/javascript).

.integrity: Adds the integrity attribute to the script element to let browsers ensure subresource integrity. Useful in hosting scenarios with resources externalized to CDN's. See SRI for more details. Integrity hashes may be generated using https://srihash.org/.

Example:

includeJS {
  file1 = fileadmin/helloworld.js
  file1.type = application/x-javascript
  # Include a second file, but only if myConstant is set
  # in the TS constants field.
  file2 = javascript_uploaded_to_template*.js
  file2.if.isTrue = {$myConstant}
}

includeJSFooter.[array]

Property

includeJSFooter.[array]

Data type

resource

Description

Same as includeJS above, except that this block gets included at the bottom of the page (just before the closing body tag).

includeJSFooterlibs.[array]

Property

includeJSFooterlibs.[array]

Data type

resource

Description

Same as includeJSLibs, except that this block gets included at the bottom of the page (just before the closing body tag).

includeJSLibs.[array]

Property

includeJSLibs.[array]

Data type

resource

Description

Adds JS library files to head of page.

The file definition must be a valid "resource" data type, otherwise nothing is inserted. This means that remote files cannot be referenced (i.e. using "http://..."), except by using the ".external" property.

Each file has optional properties:

.allWrap: Wraps the complete tag, useful for conditional comments.

.allWrap.splitChar: Defines an alternative splitting character (default is "|" - the vertical line).

.async: Allows the file to be loaded asynchronously.

.disableCompression: If config.compressJs is enabled, this disables the compression of this file.

.excludeFromConcatenation: If config.concatenateJs is enabled, this prevents the file from being concatenated.

.external: If set, there is no file existence check. Useful for inclusion of external files.

.forceOnTop: Boolean flag. If set, this file will be added on top of all other files.

.if: Allows to define conditions, which must evaluate to TRUE for the file to be included. If they do not evaluate to TRUE, the file will not be included. Extensive usage might cause huge numbers of temporary files to be created. See ->if for details.

.integrity: Adds the integrity attribute to the script element to let browsers ensure subresource integrity. Useful in hosting scenarios with resources externalized to CDN's. See SRI for more details. Integrity hashes may be generated using https://srihash.org/.

Example:

includeJSLibs.twitter = http://twitter.com/javascripts/blogger.js
includeJSLibs.twitter.external = 1
includeJSLibs.twitter.integrity = sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg=

inlineLanguageLabel

Property

inlineLanguageLabel

Data type

(array of strings)

Description

Adds language labels to the page.

Has "LLL:" support. You can either add a constant or a locallang reference using page.inlineLanguageLabel.[key].

Example:

inlineLanguageLabel {
   label1 = 123
   label2 = 456
}

will produce following source:

TYPO3.lang = {"label1":"123","label2":"456"};

inlineLanguageLabelFiles

Property

inlineLanguageLabelFiles

Data type

(array of strings)

Description

Adds language labels to the page.

Available sub-properties:

selectionPrefix: Only label keys that start with this prefix will be included. Default: ''.

stripFromSelectionName: A string that will be removed from any included label key. Default: ''.

errorMode: Error mode if the file could not be found: 0 - syslog entry, 1 - do nothing, 2 - throw an exception. Default: 0

Example:

inlineLanguageLabelFiles {
   someLabels = EXT:myExt/Resources/Private/Language/locallang.xlf
   someLabels.selectionPrefix = idPrefix
   someLabels.stripFromSelectionName = strip_me
   someLabels.errorMode = 2
}

inlineSettings

Property

inlineSettings

Data type

(array of strings)

Description

ExtJS specific, adds settings to the page.

Example:

page.inlineSettings {
   setting1 = Hello
   setting2 = GoOnTop
}

will produce following source:

TYPO3.settings = {"TS":{"setting1":"Hello","setting2":"GoOnTop"}};

insertClassesFromRTE

Property

insertClassesFromRTE

Data type

boolean

Description

If set, the classes for the Rich Text Editor configured in Page TSconfig are inserted as the first thing in the Style-section right after the setting of the stylesheet.

.add_mainStyleOverrideDefs: [* / list of tags ]. Will add all the "RTE.default. mainStyleOverride_add" - tags configured as well.

Note: Instead of using this property, most likely the RTE should be configured by stylesheets!

javascriptLibs

Property

javascriptLibs

Data type

(array of strings)

Description

This allows to include the JavaScript libraries that are shipped with the TYPO3 Core.

javascriptLibs {
   # include jQuery (boolean)
   jQuery = 1
   # Change the version
   # (possible values: latest|1.7.2|…, default: latest)
   # Note: jQuery.source has to be a CDN like "google"
   # when jQuery.version is not "latest"
   jQuery.version = latest
   # Include from local or different CDNs
   # (possible values: local|google|jquery|msn, default: local)
   jQuery.source = local
   # Set jQuery into its own scope to avoid conflicts (boolean)
   jQuery.noConflict = 1
   # Change the namespace when noConflict is activated
   # and use jQuery with "TYPO3.###NAMESPACE###(…);"
   # (string, default: jQuery)
   jQuery.noConflict.namespace = ownNamespace

     # includes ExtJS
   ExtJs = 1
     # include ext-all-notheme.css
   ExtJs.css = 1
     # include default theme
   ExtJs.theme = 1
     # includes ExtJS debug file (uncompressed)
   ExtJs.debug = 1
}

jsFooterInline

Property

jsFooterInline

Data type

->CARRAY

Description

Same jsInline above, except that the JavaScript gets inserted at the bottom of the page (just before the closing body tag).

jsInline

Property

jsInline

Data type

->CARRAY

Description

Use cObjects for creating inline JavaScript

Example:

page.jsInline {
        10 = TEXT
        10.stdWrap.dataWrap = var pageId = {TSFE:id};
}

Note:

With config.removeDefaultJS = external, the inline JavaScript is moved to an external file.

meta

Property

meta

Data type

->META

shortcutIcon

Property

shortcutIcon

Data type

resource

Description

Favicon of the page. Create a reference to an icon here!

Browsers that support favicons display them in the address bar of the browser, next to the name of the site in lists of bookmarks and next to the title of the page in the tab.

Note: The file must be a valid ".ico" file (icon file).

Note: The reference to this file will only be included in the output of your website, if the file actually exists! Should the file be missing, the tag will not be rendered.

stdWrap

Property

stdWrap

Data type

->stdWrap

Description

Wraps the content of the cObject array with stdWrap options.

stylesheet

Property

stylesheet

Data type

resource

Description

Inserts a stylesheet in the <HEAD>-section of the page;

<link rel="stylesheet" href="[resource]">

typeNum

Property

typeNum

Data type

integer

Description

This determines the typeId of the page. The &type= parameter in the URL determines, which page object will be rendered. The value defaults to 0 for the first found PAGE object, but it must be set and be unique as soon as you use more than one such object (watch this if you use frames on your page)!

Default

0

wrap

Property

wrap

Data type

wrap

Description

Wraps the content of the cObject array.