PAGEVIEW

New in version 13.1

The content object PAGEVIEW can be used in stead of FLUIDTEMPLATE to configure the HTML body of a page using Fluid templates.

This content object has very specific conventions and defaults, that requires (and allows) less configuration as compared to using FLUIDTEMPLATE.

The benefit is that following these conventions means less boilerplate code to maintain.

If you follow these conventions, a few directories and files must follow the structure outlined below.

Tip

Chapters The TYPO3 Fluid version and Display the content elements on your page of the Site Package Tutorial give practical examples on how to use the PAGEVIEW object.

Table of contents

Example: Display a page with Fluid templates

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths {
            100 = EXT:my_sitepackage/Resources/Private/PageView/
        }
        variables {
            parentPageTitle = TEXT
            parentPageTitle.data = levelfield:-1:title
        }
        dataProcessing {
            10 = page-content
            20 = menu
            20.as = mainMenu
        }
    }
}

Default variables in Fluid templates

The following variables are available by default in the Fluid template.

Additional variables can be defined with property variables.

Default variables
Name	Type
language	`\TYPO3\CMS\Core\Site\Entity\SiteLanguage`
page	`\TYPO3\CMS\Frontend\Page\PageInformation`
settings	array
site	`\TYPO3\CMS\Core\Site\Entity\Site`

language

Type: \TYPO3\CMS\Core\Site\Entity\SiteLanguage
Example: Example: Display the site title in the current language

The current SiteLanguage object, see also the SiteLanguage object.

page

Type: \TYPO3\CMS\Frontend\Page\PageInformation
Example: Example: Display the title and abstract of the current page

The current PageInformation as object. See also Frontend page information.

settings

Type: array
Example: Example: Use TypoScript constant in a Fluid template

The variable {settings} contains all TypoScript constants that are set on the current page. Settings from the site can be accessed via the site with {site.settings}

site

Type: \TYPO3\CMS\Core\Site\Entity\Site
Example: Example: Link to the root page of the current site

The current Site object. See also the Site object.

Examples for using default variables

Example: Display the site title in the current language

EXT:my_sitepackage/Resources/Private/PageView/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>The site title in the current template is: {language.websiteTitle}</p>
    </main>
</f:section>

Example: Display the title and abstract of the current page

EXT:my_sitepackage/Resources/Private/PageView/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>The title of the page with id {page.id} is: {page.pageRecord.title}. It has the
            following abstract:</p>
        <p>{page.pageRecord.abstract}</p>
    </main>
</f:section>

Example: Use TypoScript constant in a Fluid template

Let us assume, the current page loads the following TypoScript constants:

EXT:my_sitepackage/Configuration/TypoScript/constants.typoscript

page {
    uids {
        dataPrivacy = 42
        contact = 85
        imprint = 86
    }
}

EXT:my_sitepackage/Resources/Private/PageView/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>...</p>
    </main>
    <footer>
        See also our <f:page pageUid="{settings.page.uid.dataPrivacy}">data privacy policy</f:page>
    </footer>
</f:section>

Example: Link to the root page of the current site

EXT:my_sitepackage/Resources/Private/PageView/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>Go to the root page: <f:link.page pageUid="{site.rootPageId}">Home</f:link.page></p>
        <p>...</p>
    </main>
</f:section>

Properties

PAGEVIEW properties
Name	Type
cache	cache
dataProcessing.[key]	path with stdWrap
paths.[priority]	path with stdWrap
variables.[variable_name]	Content Object

cache

Type: cache

See cache function description for details.

dataProcessing.[key]

Type: path with stdWrap
Example: Example: Display a main menu and a breadcrumb on the page

Add one or multiple data processors. The sub-property options can be used to pass parameters to the processor class.

It is recommended to use the PageContentFetchingProcessor to fetch the content elements from the page, respecting the backend layout.

paths.[priority]

Type: path with stdWrap
Example: Example: Define a path that contains all templates
Example 2: Example: Define fallbacks for a template paths

Sets an array of paths for the Fluid templates, usually EXT:my_extension/Resources/Private/PageView/ or a path like EXT:my_extension/Resources/Private/PageView/MyPage.

The templates are expected in a subfolder Pages.

Fluid partials are looked up in a sub-directory called Partials, layouts in Layouts.

The name of the used page layout (Backend layout) is resolved automatically.

The paths are evaluated from highest to lowest priority.

variables.[variable_name]

Type: Content Object
Example: Example: Make additional variables available in the Fluid template

Sets variables that should be available in Fluid.

Examples

Example: Display a main menu and a breadcrumb on the page

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths {
            100 = EXT:my_sitepackage/Resources/Private/PageView/
        }
        dataProcessing {
            10 = menu
            10 {
                as = mainMenu
                titleField = nav_title // title
                expandAll = 1
            }
            20 = menu
            20 {
                as = breadcrumb
                special = rootline
                special.range = 0|-1
                includeNotInMenu = 0
            }
        }
    }
}

The page template could look like this:

EXT:my_sitepackage/Resources/Private/PageView/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <f:render partial="Navigation/MainNavigation.html" arguments="{mainMenu: mainMenu}"/>
    <main role="main">
        <f:render partial="Navigation/Breadcrumb.html" arguments="{breadcrumb: breadcrumb}"/>
        <p>...</p>
    </main>
</f:section>

With the following partials:

        EXT:my_sitepackage/Resources/Private/PageView/Partials/Navigation/Breadcrumb.html
    

<f:if condition="{breadcrumb}">
    <ol class="breadcrumb">
        <f:for each="{breadcrumb}" as="item">
            <li class="breadcrumb-item{f:if(condition: item.current, then: ' active')}" >
                <a class="breadcrumb-link" href="{item.link}" title="{item.title}">
                    <span class="breadcrumb-text">{item.title}</span>
                </a>
            </li>
        </f:for>
    </ol>
</f:if>

And

        EXT:my_sitepackage/Resources/Private/PageView/Partials/Navigation/MainNavigation.html
    

<ul class="nav nav-pills">
    <f:for each="{mainMenu}" as="menuItem">
        <li class="nav-item {f:if(condition: menuItem.hasSubpages, then: 'dropdown')}">
            <f:if condition="{menuItem.hasSubpages}">
                <f:then>
                    <!-- Item has children -->
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                        {menuItem.title}
                    </a>
                    <div class="dropdown-menu">
                        <f:for each="{menuItem.children}" as="menuItemLevel2">
                            <f:link.page pageUid="{menuItemLevel2.data.uid}"
                                         class="dropdown-item {f:if(condition: menuItemLevel2.active, then: 'active')}">
                                {menuItemLevel2.title}
                            </f:link.page>
                        </f:for>
                    </div>
                </f:then>
                <f:else>
                    <!-- Item has no children -->
                    <f:link.page pageUid="{menuItem.data.uid}" class="nav-link {f:if(condition: menuItem.active, then:'active')}">
                        {menuItem.title}
                    </f:link.page>
                </f:else>
            </f:if>
        </li>
    </f:for>
</ul>

Example: Define a path that contains all templates

This is a basic definition of a PAGEVIEW object with only one path to the templates:

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page.10 = PAGEVIEW
page.10.paths.100 = EXT:my_sitepackage/Resources/Private/PageView/

The content of the folder could look like this:

EXT:my_sitepackage/Resources/Private/PageView/
- Layouts
  - Default.html
  - WithoutHeader.html
- Pages
  - Default.html
  - StartPage.html
  - TwoColumns.html
  - With_sidebar.html
- Partials
  - Footer.html
  - Sidebar.html
  - Menu.html

Note

If the name of the backend layout starts with a lowercase letter, the first letter of the template name is transformed into upper case.

However the template name is not necessarily transferred into CamelCase.

So for backend layout named "with_sidebar", the template file is then resolved to EXT:my_sitepackage/Resources/Private/PageView/Pages/With_sidebar.html.

If the backend layout is named "TwoColumns" it is resovled to EXT:my_sitepackage/Resources/Private/PageView/Pages/TwoColumns.html.

For all these templates partial are expected in folder EXT:my_sitepackage/Resources/Private/PageView/Pages/Partials and layouts in EXT:my_sitepackage/Resources/Private/PageView/Pages/Layouts.

Example: Define fallbacks for a template paths

You can use the directories defined in paths.[priority] to define fallback directories for the templates:

page = PAGE
page {
    10 = PAGEVIEW
    10.paths {
        100 = EXT:my_basic_sitepackage/Resources/Private/PageView/
        200 = EXT:my_general_sitepackage/Resources/Private/PageView/
        300 = EXT:my_special_sitepackage/Resources/Private/PageView/
    }
}

The template for a page with a certain backend layout is first searched in EXT:my_special_sitepackage/Resources/Private/PageView/Pages/ then in EXT:my_general_sitepackage/Resources/Private/PageView/Pages/ and last in EXT:my_basic_sitepackage/Resources/Private/PageView/Pages/.

Example: Make additional variables available in the Fluid template

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths {
            100 = EXT:my_sitepackage/Resources/Private/PageView/
        }
        variables {
            parentPageTitle = TEXT
            parentPageTitle.data = levelfield:-1:title
            another_variable =< lib.anotherVariable
        }
    }
}

The following variables are now available in the Fluid template:

EXT:my_sitepackage/Resources/Private/PageView/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <f:render partial="Navigation/MainNavigation.html" arguments="{_all}"/>

    <main role="main">
        <p>The current parent page has the title {parentPageTitle}</p>
        <p>Another variable is {another_variable}</p>
    </main>
</f:section>