PAGE & 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, e.g.:

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/sysext/frontend/Classes/Page/PageGenerator.php.

Multiple pages¶

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.

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:

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

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

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.

Examples¶

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

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
   templateName = Default
   layoutRootPaths {
      10 = EXT:sitepackage/Resources/Private/Layouts
   }
   partialRootPaths {
      10 = EXT:sitepackage/Resources/Private/Partials
   }
   templateRootPaths {
      10 = EXT:sitepackage/Resources/Private/Templates
   }
   variables {
      foo = TEXT
      foo.value = bar
   }
}

Properties¶

Property	Data Type	Default
1,2,3,4...	cObject
bodyTag	<tag>	<body>
bodyTagAdd	string
bodyTagCObject	cObject
config	->CONFIG
CSS_inlineStyle	string
cssInline.[array]	cObject
footerData.[array]	cObject
headerData.[array]	cObject
headTag	<tag> / stdWrap	<head>
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 strings)
shortcutIcon	resource
stdWrap	stdWrap
typeNum	integer	0
wrap	wrap

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.

The content of these objects will be rendered on the page.

Example

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
    # ...
}

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 & 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 {
= TEXT
value = h1 {margin:15px;}

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

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

footerData.[array]¶

Property

footerData.[array]

Data type

cObject

Description

Same as headerData.[array], 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.