Skip to content

[FEATURE] Introduce Fluid render.contentArea/record ViewHelpers #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
linawolf merged 2 commits into from
Apr 7, 2026
Merged

[FEATURE] Introduce Fluid render.contentArea/record ViewHelpers #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c95cfee
[TASK] [FEATURE] Introduce Fluid render.contentArea/record ViewHelpers
linawolf Mar 28, 2026
a38c701
[TASK] Language checks
sarahmccarthy123 Mar 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 54 additions & 31 deletions Documentation/Global/CObject.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
CObject ViewHelper `<f:cObject>`
================================

.. versionchanged:: 14.2
Instead of using the :html:`<f:cObject>` ViewHelper to render database records,
the new `Render.record ViewHelper <f:render.record> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-render-record>`_
ViewHelper can be used to render database records and the new
`Render.contentArea ViewHelper <f:render.contentArea> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-render-contentarea>`_
can be used to render all content elements within a column from a backend
layout.

.. typo3:viewhelper:: cObject
:display: tags,description,gitHubLink
:source: ../Global.json
Expand Down Expand Up @@ -45,36 +53,6 @@ The TypoScript could look like this:
lib.someLibObject = TEXT
lib.someLibObject.value = Hello World!

.. _typo3-fluid-cobject-content:

Displaying content elements provided by the page-content data processor
-----------------------------------------------------------------------

When using the `page-content data processor <https://docs.typo3.org/permalink/t3tsref:pagecontentfetchingprocessor>`_
to display the content elements of a
`PAGEVIEW <https://docs.typo3.org/permalink/t3tsref:cobj-pageview>`_,
the CObject ViewHelper can be used to display the actual content elements:

.. code-block:: html
:caption: packages/my_sitepackage/Resources/Private/Templates/Pages/Default.html

<f:for each="{myContent.left.records}" as="contentElement">
<f:cObject
typoscriptObjectPath="{contentElement.mainType}"
table="{contentElement.mainType}"
data="{contentElement}"
/>
</f:for>

Variable `{contentElement.mainType}` already contains the correct TypoScript path
to the TypoScript top-level object `tt_content <https://docs.typo3.org/permalink/t3tsref:tlo-tt-content>`_.

The table storing the content elements is also called `tt_content` so we can use
the same variable here. Variable `contentElement` already contains the
`Record object <https://docs.typo3.org/permalink/t3coreapi:record-objects>`_
containing the data needed to render the content element with the
CObject ViewHelper.

.. _typo3-fluid-cobject-plugin:

Use data from a plugin in TypoScript
Expand Down Expand Up @@ -127,7 +105,7 @@ content data from a Fluid template to a content object defined in TypoScript. Th
following example demonstrates this with a user counter. The user counter is in
a blog post (the blog post has a count of how many times it has been viewed.)

Add the viewhelper to your Fluid template. This can be done in 3 different
Add the Viewhelper to your Fluid template. This can be done in 3 different
ways. The basic tag syntax:

.. code-block:: html
Expand Down Expand Up @@ -251,3 +229,48 @@ easier to understand.

In summary, the cObject ViewHelper is a powerful option to embed TypoScript
expressions in Fluid templates.

.. _typo3-fluid-cobject-migration:

Migration from the `f:cObject` to dedicated ViewHelpers for special cases
=========================================================================

.. _typo3-fluid-cobject-content:

Migration: Use the `f:render.contentArea` ViewHelper
----------------------------------------------------

.. versionchanged:: 14.2
Instead of using the :html:`<f:cObject>` ViewHelper, the new
`Render.contentArea ViewHelper <f:render.contentArea> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-render-contentarea>`_
can be used to render all content elements within a column from a backend
layout.

If you are using the `page-content data processor <https://docs.typo3.org/permalink/t3tsref:pagecontentfetchingprocessor>`_
to display the content elements of a
`PAGEVIEW <https://docs.typo3.org/permalink/t3tsref:cobj-pageview>`_, switch
to the
`Render.contentArea ViewHelper <f:render.contentArea> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-render-contentarea>`_
on dropping TYPO3 v13 support:

.. code-block:: diff
:caption: packages/my_sitepackage/Resources/Private/Templates/Pages/Default.html (diff)

- <f:for each="{myContent.left.records}" as="contentElement">
- <f:cObject
- typoscriptObjectPath="{contentElement.mainType}"
- table="{contentElement.mainType}"
- data="{contentElement}"
- />
- </f:for>

+ <f:render.contentArea contentArea="{myContent.left}" />

Variable `{contentElement.mainType}` already contains the correct TypoScript path
to the TypoScript top-level object `tt_content <https://docs.typo3.org/permalink/t3tsref:tlo-tt-content>`_.

The table storing the content elements is also called `tt_content`, so we can use
the same variable here. Variable `contentElement` will already contain the
`Record object <https://docs.typo3.org/permalink/t3coreapi:record-objects>`_
containing the data needed to render the content element with the
CObject ViewHelper.
104 changes: 99 additions & 5 deletions Documentation/Global/Render/ContentArea.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.. This reStructured text file has been automatically generated, do not change.
.. Source: https://github.com/TYPO3/typo3/blob/main/typo3/sysext/fluid/Classes/ViewHelpers/Render/ContentAreaViewHelper.php

:edit-on-github-link: https://github.com/TYPO3/typo3/edit/main/typo3/sysext/fluid/Classes/ViewHelpers/Render/ContentAreaViewHelper.php
:navigation-title: render.contentArea

.. include:: /Includes.rst.txt
Expand All @@ -12,5 +8,103 @@
Render.contentArea ViewHelper `<f:render.contentArea>`
======================================================

.. versionadded:: 14.2
Instead of using the :html:`<f:cObject>` and :html:`<f:for>` ViewHelpers to
render content areas, use the new :html:`<f:render.contentArea>` ViewHelper.

This ViewHelper can be used to render a content area provided by the
`page-content data processor <https://docs.typo3.org/permalink/t3tsref:pagecontentfetchingprocessor>`_.

It is commonly used with the `PAGEVIEW <https://docs.typo3.org/permalink/t3tsref:cobj-pageview>`_
TypoScript content object.

Theme creators are encouraged to use the :html:`<f:render.contentArea>` ViewHelper
to allow other extensions to modify the output via event listeners.

.. typo3:viewhelper:: render.contentArea
:source: /Global.json
:display: tags,gitHubLink
:noindex:

.. contents:: Table of contents

.. _typo3-fluid-render-contentarea-example:

Rendering all content elements within a backend layout column
=============================================================

The most common use case for the `<f:render.contentArea>` is to render all
content elements within a column from a backend layout.

.. tabs::

.. group-tab:: Fluid

.. code-block:: html
:caption: packages/my_sitepackage/Resources/Private/Templates/Page/Default.html

<f:render.contentArea contentArea="{content.main}"/>

Or using inline syntax:

.. code-block:: html
:caption: packages/my_sitepackage/Resources/Private/Templates/Page/Default.html

{content.main -> f:render.contentArea()}

.. group-tab:: TypoScript

.. code-block:: typoscript
:caption: packages/my_sitepackage/Configuration/Sets/main/setup.typoscript

page = PAGE
page {
10 = PAGEVIEW
10 {
paths.10 = EXT:my_sitepackage/Resources/Private/Templates/
dataProcessing.10 = page-content
}
}

For an example of how to configure the backend layout in page TSconfig
and further data processor options, see
`Example: Use the page-content data processor to display the content
<https://docs.typo3.org/permalink/t3tsref:pagecontentfetchingprocessor-example>`_.

.. _typo3-fluid-render-contentarea-example-recordas:

Using the "recordAs" argument to wrap each content element
==========================================================

Using the :ref:`recordAs <t3viewhelper:viewhelper-argument-typo3-cms-fluid-viewhelpers-render-contentareaviewhelper-recordas>`
argument, `<f:render.contentArea>` can be combined with the
`Render.record ViewHelper <f:render.record> <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-render-record>`_
to wrap each content element:

.. code-block:: html
:caption: packages/my_sitepackage/Resources/Private/Templates/Page/Default.html

<div id="sidebar">
<f:render.contentArea contentArea="{content.left}" recordAs="record">
<div id="sidebarItem{record.uid}">
<f:render.record record="{record}" />
</div>
</f:render.contentArea>
</div>

.. _typo3-fluid-render-contentarea-event:

Intercepting the rendering of content areas via an event
========================================================

Developers can intercept the rendering of content areas in Fluid templates using
:php:`\TYPO3\CMS\Fluid\Event\ModifyRenderedContentAreaEvent` to modify output.

.. _typo3-fluid-render-contentarea-arguments:

Arguments of the `<f:render.contentArea>` ViewHelper
====================================================

.. typo3:viewhelper:: render.contentArea
:source: ../../Global.json
:source: /Global.json
:display: arguments-only
Loading