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 different representations of the same content. Your default page will most likely have type 0 while a JSON stream with the same content could go with type 1.

A 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.

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>

Default

<body>

Description

Body tag on the page

Example

<body bgcolor="{$bgCol}">

bodyTagAdd

Property

bodyTagAdd

Data type

string

Description

This content is added inside of the opening <body> tag right before the > character. This is mostly useful for adding attributes to the <body> tag.

Example

# This will lead to <body class="example">
page.bodyTagAdd = class="example"

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 disableBodyTag, which, if set, disables body tag generation independently from what might be set here.

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.[array]

Property

cssInline.[array]

Data type

cObject

Description

Allows to add inline CSS to the page <head> section. The cssInline property contains any number of numeric keys, each representing one cObject.

Example

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

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

    30 = FILE
    30.file = EXT:mysite/Resources/Public/StyleSheets/styles.css
}

footerData.[array]

Property

footerData.[array]

Data type

cObject

Description

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

The footerData property contains any number of numeric keys, each representing one cObject.

Example

footerData {
   3 = TEXT
   3.value = <script src="...."></script>

   50 = TEXT
   50.value = <!-- Hello from the comment! -->
}

headerData.[array]

Property

headerData.[array]

Data type

cObject

Description

Inserts custom content in the head section of the website.

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.

For meta tags, use the dedicated configuration page.meta.

By default, gets inserted after all the style definitions.

The headerData property contains any number of numeric keys, each representing one cObject.

Example

page.headerData {
   3 = TEXT
   3.value = <script src="...."></script>

   50 = TEXT
   50.value = <!-- Hello from the comment! -->
}

headTag

Property

headTag

Data type

<tag> / stdWrap

Default

<head>

Description

Head-tag if alternatives are wanted

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>

inline: If set, the content of the CSS file is inlined using <style> tags. Note that external files are not inlined.

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 https://...), 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 = https://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 https://...), 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.

crossorigin: Allows to set the crossorigin attribute in script tags. Is automatically set to anonymous for external JavaScript files if an .integrity is set.

defer Allows to set the HTML5 attribute defer.

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: The attribute is omitted for frontend rendering when config.doctype is not set or set to html5. Otherwise text/javascript is used as type.

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 https://...), 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.

crossorigin: Allows to set the crossorigin attribute in script tags. Is automatically set to anonymous for external JavaScript files if an .integrity is set.

defer Allows to set the HTML5 attribute defer.

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=

inlineLanguageLabelFiles

Property

inlineLanguageLabelFiles

Data type

(array of strings)

Description

Adds language labels to the page. All labels will be then be available in the Javascript object TYPO3.lang.

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"}};

jsFooterInline.[array]

Property

jsFooterInline

Data type

cObject

Description

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

The jsFooterInline property contains any number of numeric keys, each representing one cObject.

Example

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

jsInline.[array]

Property

jsInline

Data type

cObject

Description

Use array of cObjects for creating inline JavaScript.

Note:

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

The jsInline property contains any number of numeric keys, each representing one cObject.

Example

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

meta

Property

meta

Data type

array of key names (string / stdWrap)

Description

Use the scheme meta.key = value to define any HTML meta tag.

value is the content of the meta tag. If the value is empty (after trimming), the meta tag is not generated.

The key can be the name of any meta tag, for example description or keywords. If the key is refresh (case insensitive), then the http-equiv attribute is used in the meta tag instead of the name attribute.

For each key the following sub-properties are available:

httpEquivalent
If set to 1, the http-equiv attribute is used in the meta tag instead of the name attribute. Default: 0.
replace
If set to 1, the tag will replace the one set earlier by a plugin. If set to 0 (default), the meta tag generated by the plugin will be used. If there is none yet, the one from TypoScript is set.
Examples:

Simple definition:

meta.description = This is the description of the content in this document.
meta.keywords = These are the keywords.

Fetch data from the keywords field of the current or any parent page:

meta.keywords.data = levelfield:-1, keywords, slide

Make a meta.refresh entry:

meta.refresh = [seconds]; [URL, leave blank for same page]

Usage of httpEquivalent:

meta.X-UA-Compatible = IE=edge
meta.X-UA-Compatible.httpEquivalent = 1

Result:

<meta http-equiv="X-UA-Compatible" content="IE=edge">.

Meta tags with a different attribute name are supported like the Open Graph meta tags:

page {
   meta {
      X-UA-Compatible = IE=edge
      X-UA-Compatible.attribute = http-equiv
      keywords = TYPO3
      og:site_name = TYPO3
      og:site_name.attribute = property
      description = Inspiring people to share Normal
      dc.description = Inspiring people to share [DC tags]
      og:description = Inspiring people to share [OpenGraph]
      og:description.attribute = property
      og:locale = en_GB
      og:locale.attribute = property
      og:locale:alternate {
         attribute = property
         value {
            1 = fr_FR
            2 = de_DE
         }
      }
      refresh = 5; url=http://example.com/
      refresh.attribute = http-equiv
   }
}

They can be used like property used for OG tags in the example.

You may also supply multiple values for one name, which results in multiple meta tags with the same name to be rendered.

Result for og:description:

<meta property="og:description"
      content="Inspiring people to share [OpenGraph]" />

See http://ogp.me/ for more information about the Open Graph protocol and its properties.

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 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.

typeNum

Property

typeNum

Data type

integer

Default

0

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)!

wrap

Property

wrap

Data type

wrap

Description

Wraps the content of the cObject array.