PAGE¶

This defines what is rendered in the frontend.

PAGE is an object type. A good habit is to use page as the top-level object name for the content-page on a website.

TYPO3 does not initialize page by default. You must initialize this explicitly, for example:

EXT:site_package/Configuration/TypoScript/setup.typoscript

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

Most of this code is executed in the PHP script \TYPO3\CMS\Frontend\Http\RequestHandler.

Table of contens

Output of the PAGE object¶

An empty PAGE object without further configuration renders a HTML page like the following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
    This website is powered by TYPO3 - inspiring people to share!
    TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
    TYPO3 is copyright 1998-2019 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
    Information and contribution at https://typo3.org/
-->
<title>Page title</title>
<meta name="generator" content="TYPO3 CMS">
</head>
<body>
</body>
</html>

This default behaviour can be changed by setting the property Provide JSON and disable HTML headers:

EXT:site_package/Configuration/TypoScript/setup.typoscript

page.config.disableAllHeaderCode = 1

If the output represents another format different from HTML the HTTP header should also be set, for example:

EXT:site_package/Configuration/TypoScript/setup.typoscript

page.config.additionalHeaders.10.header = Content-type:application/json

Multiple pages¶

When rendering pages in the frontend, TYPO3 uses the GET parameter "type" 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 (which is the default) while a JSON stream with the same content could go with type 1.

The property typeNum defines for which type, the page will be used.

Example:

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
page.typeNum = 0
page {
   # set properties ...
}

json = PAGE
json.typeNum = 1
# ...

See An example page type used for JSON data about an example for the latter page.

In the frontend, the original URLs that are generated will include the type and an id parameter (for the page id), example (for json and page id 22):

/index.php?id=22&type=1

Guidelines¶

Good, general PAGE object names to use are:

page for the main page with content
json for a json stream with content
xml for a XML stream with content

These are just recommendations. However, especially the name page for the content bearing page is very common and most documentation will imply that your main page object is called page.

Properties¶

Properties of the PAGE object
Name	Type
1,2,3,4...	cObject
bodyTag	tag
bodyTagAdd	string
bodyTagCObject	cObject
config	->CONFIG
cssInline.[array]	cObject
footerData.[array]	cObject
headerData.[array]	cObject
headTag	tag / stdWrap
includeCSS.[array]	resource
includeCSSLibs.[array]	resource
includeJS.[array]	resource
includeJSFooter.[array]	resource
includeJSFooterlibs.[array]	resource
includeJSLibs.[array]	resource
inlineLanguageLabelFiles	(array of strings)
inlineSettings	(array of strings)
jsFooterInline.[array]	cObject
jsInline.[array]	cObject
meta	array of key names (string / stdWrap)
shortcutIcon	resource
stdWrap	stdWrap
typeNum	integer
wrap	wrap

1,2,3,4... ¶

Type: cObject

Examples

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

The content of these objects will be rendered on the page in the order of the numbers, not in the order they get defined in the TypoScript definition.

It is considered best practice to leave space between the numbers such that it will be possible to place objects before and after other objects in the future. Therefore you will often see that people use the number 10 and no number 1 is found.

bodyTag ¶

Type: tag
Default: <body>
Example: Set a class on the body tag

Body tag on the page

bodyTagAdd ¶

Type: string
Example: Add a parameter to the body tag

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.

bodyTagCObject ¶

Type: cObject

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

Note

Additionally to the body tag properties noted here,

there also is the property Properties of 'config', which, if set, disables body tag generation independently from what might be set here.

config ¶

Type: ->CONFIG

Examples

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

cssInline.[array] ¶

Type: cObject
Example: Add inline styles for the h1 tag

Allows to add inline CSS to the page <head> section. The cssInline property contains any number of numeric keys, each representing one cObject. Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.

footerData.[array] ¶

Type: cObject
Example: Add a script and a comment to the page footer

Same as Properties, 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. Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.

headerData.[array] ¶

Type: cObject

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. Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.

headTag ¶

Type: tag / stdWrap
Default: <head>

Head-tag if alternatives are wanted

includeCSS.[array] ¶

Type: resource
Example: Include additional css files

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 function if for details.
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.

New in version 12.1

Additional data attributes can be configured using a key-value list.

includeCSSLibs.[array] ¶

Type: resource
Example: Include CSS libraries

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.
media: Setting the media attribute of the <style> tag.
title: Setting the title of the <style> tag.

New in version 12.1

Additional data attributes can be configured using a key-value list.

includeJS.[array] ¶

Type: resource
Example: Include JavaScript in the header

Inserts one or more (Java)Scripts in <script> tags. With Properties of 'config' 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 cross-origin attribute in script tags. It 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/.

New in version 12.1

data: Array with key/value for additional attributes to be added to the script tag.

includeJSFooter.[array] ¶

Type: resource

Add JavaScript files to footer (after files set in includeJSFooterlibs)

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

includeJSFooterlibs.[array] ¶

Type: resource

Add JavaScript library files to footer.

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

The optional properties from includeJS can be applied.

Currently one difference between includeJS and includeJSFooterlibs exists: There is no data-array as optional parameter but all keys not explicitly mentioned as parameters are used as additional attributes - behaviour is the same as in includeCSS.

EXT:site_package/Configuration/TypoScript/setup.typoscript

# This will lead to <script src="/_assets/.../Frontend/JavaScript/somefile.js?123456" data-foo="data-bar" foo="bar"></script>
page.includeJSFooterlibs {
    somefile = EXT:site_package/Resources/Public/JavaScript/somefile.js
    somefile.data-foo = data-bar
    somefile.foo = bar
}

includeJSLibs.[array] ¶

Type: resource

Adds JavaScript library files to head of page.

Same as includeJSFooterlibs, except that this block gets included inside <head>. tag).

The optional properties from includeJS can be applied.

Currently one difference between includeJS and includeJSLibs exists: There is no data-array as optional parameter but all keys not explicitly mentioned as parameters are used as additional attributes - behaviour is the same as in includeCSS.

EXT:site_package/Configuration/TypoScript/setup.typoscript

# This will lead to <script src="/_assets/.../Frontend/JavaScript/somefile.js?123456" data-foo="data-bar" foo="bar"></script>
page.includeJSLibs {
    somefile = EXT:site_package/Resources/Public/JavaScript/somefile.js
    somefile.data-foo = data-bar
    somefile.foo = bar
}

inlineLanguageLabelFiles ¶

Type: (array of strings)
Example: Make a language file available in JavaScript

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

inlineSettings ¶

Type: (array of strings)
Example: Make some values available in JavaScript

Adds settings to the page as inline javascript, which is accessible within the JavaScript object TYPO3.settings.

jsFooterInline.[array] ¶

Type: cObject
Example: Add some inline JavaScript to the page footer

Same as jsInline, 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. Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.

jsInline.[array] ¶

Type: cObject
Example: Make a cObject available in JavaScript

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. Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.

meta ¶

Type: array of key names (string / stdWrap)

Examples

Define meta tags for description and keywords
Example: Fetch data for the keyword meta tag from the page record
Example: Make a meta.refresh entry
Example set Open graph meta tags

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.

shortcutIcon ¶

Type: resource
Example: Add a favicon to the page

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.

If the file is missing no tag will be rendered.

stdWrap ¶

Type: stdWrap

Wraps the content of the cObject array with stdWrap options.

typeNum ¶

Type: integer
Default: 0

Examples

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.

wrap ¶

Type: wrap

Wraps the content of the cObject array.

Page property examples¶

Also see the dedicated chapter of how to use the PAGE object: PAGE Examples

Example: Render "Hello World"¶

Demonstrates:

page.10

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
page.20 = TEXT
page.20.value = World
page.10 = TEXT
page.10.value = Hello

This renders to :html:`HelloWorld`.

Example: Set a class on the body tag¶

Demonstrates:

page.bodyTag

EXT:site_package/Configuration/TypoScript/setup.typoscript

# This will lead to <body class="example"> if constant "bodyClass" is set accordingly.
page.bodyTag = <body class="{$bodyClass}">

Example: Add a parameter to the body tag¶

Demonstrates:

page.bodyTagAdd

EXT:site_package/Configuration/TypoScript/setup.typoscript

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

Example: Add inline styles for the h1 tag¶

Demonstrates:

page.cssInline

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

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

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

Example: Add a script and a comment to the page footer¶

Demonstrates:

page.footerData

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

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

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

Example: Add a script tag and a comment to the head tag¶

Demonstrates:

page.headerData

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

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

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

Example: Include additional css files¶

Demonstrates:

page.includeCSS

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

page.includeCSS {
    styles = EXT:site_package/Resources/Public/Css/styles.css

    print = EXT:site_package/Resources/Public/Css/print.css
    print.title = High contrast
    print.media = print

    additional = EXT:site_package/Resources/Public/Css/additional_styles.css
    additional.data-foo = bar

    ie6 = EXT:site_package/Resources/Public/Css/ie6.css
    ie6.allWrap = <!--[if lte IE 7]>|<![endif]-->

    example = https://example.org/some_external_styles.css
    example.external = 1
}

Example: Include CSS libraries¶

Demonstrates:

page.includeCSSLibs

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

page.includeCSSLibs {
    bootstrap = https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
    bootstrap.external = 1

    additional = EXT:site_package/Resources/Public/Css/additional_styles.css
    additional.data-foo = bar
}

Example: Include JavaScript in the header¶

Demonstrates:

page.includeJS

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

page.includeJS {
    helloworld = EXT:site_package/Resources/Public/JavaScript/helloworld.js
    helloworld.type = application/x-javascript

    # Include the file only if myConstant is set in the TS constants field.
    conditional = EXT:site_package/Resources/Public/JavaScript/conditional.js
    conditional.if.isTrue = {$myConstant}

    # Include another file for consent management
    # A data attribute enriches the tag with additional information
    # which can be used in the according JavaScript.
    # This results in "<script data-consent-type="essential" ...></script>"
    consent = EXT:site_package/Resources/Public/JavaScript/consent.js
    consent.data.data-consent-type = essential

    # Another attribute can also be defined also with the "data" key.
    # This results in "<script other-attribute="value" ...></script>"
    consent.data.other-attribute = value

    jquery = https://code.jquery.com/jquery-3.4.1.min.js
    jquery.external = 1
    jquery.integrity = sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh
}

Example: Make a language file available in JavaScript¶

Demonstrates:

page.inlineLanguageLabelFiles

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

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

Example: Make some values available in JavaScript¶

Demonstrates:

page.inlineSettings

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

page.inlineSettings {
    setting1 = Hello
    setting2 = GoOnTop
}

Will produce following source

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

Example: Add some inline JavaScript to the page footer¶

Demonstrates:

page.jsFooterInline

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

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

Example: Make a cObject available in JavaScript¶

Demonstrates:

page.jsFooterInline

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

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

Example: Define meta tags for description and keywords¶

Demonstrates:

page.meta

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

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

Example: Fetch data for the keyword meta tag from the page record¶

Demonstrates:

page.meta

If the page record is not set search up the root line of pages.

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

page.meta {
    keywords.data = levelfield:-1, keywords, slide
}

Example: Make a meta.refresh entry¶

Demonstrates:

page.meta

EXT:site_package/Configuration/TypoScript/setup.typoscript

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

Example set Open graph meta tags¶

Demonstrates:

page.meta

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

EXT:site_package/Configuration/TypoScript/setup.typoscript

page = PAGE
# [...]

page.meta {
    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=https://example.org/
    refresh.attribute = http-equiv
}

Note

Since the dot (.) has a meaning in TypoScript, it must be escaped with a backslash if used in a meta key.

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 https://ogp.me/ for more information about the Open Graph protocol and its properties.

Example: Add a favicon to the page¶

Demonstrates:

page.shortcutIcon

EXT:site_package/Configuration/TypoScript/setup.typoscript

page.shortcutIcon = EXT:site_package/Resources/Public/Images/favicon.ico