Skip to content

[TASK] Update chapter on jumbotron for TYPO3 13.4 #233

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 1 commit into from
Nov 17, 2024
Merged

[TASK] Update chapter on jumbotron for TYPO3 13.4 #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions Documentation/CodeSnippets/ExtensionConfiguration/ComposerJson.rst.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
"type": "typo3-cms-extension",
"description": "Example site package from the site package tutorial",
"require": {
"typo3/cms-core": "^13.3.0|dev-main",
"typo3/cms-fluid-styled-content": "^13.3.0|dev-main"
"typo3/cms-core": "^13.4|dev-main",
"typo3/cms-fluid-styled-content": "^13.4|dev-main"
},
"homepage": "https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code",
"license": "MIT",
Expand Down
4 changes: 2 additions & 2 deletions Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
:caption: EXT:site_package/Resources/Private/Templates/Partials/Jumbotron.html
:linenos:

<f:for each="{records}" as="record">
<f:for each="{content.jumbotron.records}" as="record">
<div class="container">
<div class="p-5 mb-4 bg-body-tertiary">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">{record.header}</h1>
<p class="col-md-8 fs-4"><f:format.stripTags>{record.bodytext}</f:format.stripTags></p>
<p class="col-md-8 fs-4"><f:format.html>{record.bodytext}</f:format.html></p>
<button class="btn btn-dark btn-lg" role="button" href="#" id="exampleButton">Example button</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<f:layout name="Layout"/>
<f:section name="Main">

<f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
<f:render partial="Jumbotron" arguments="{_all}"/>

<div class="container">
<f:render partial="Content" arguments="{records: content.main.records}"/>
Expand Down
105 changes: 61 additions & 44 deletions Documentation/ContentMapping/Jumbotron.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,66 +7,83 @@
The jumbotron: Customize output of content elements
===================================================

As you can see in the static html template, the jumbotron consist of a headline
and a text:
.. contents::

.. code-block:: html
:caption: theme/index.html
.. _jumbotron-partial:

<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p> ... </p>
</div>
</div>
The jumbotron partial template
==============================

We could use a content element of type :guilabel:`Text` to store the needed
information. However the output of the default content element "Text" looks
like this:
The partial of the jumbotron that we created in step
:ref:`Split up the template into partials <t3sitepackage:partials>` still
contains static content:

.. code-block:: html
:caption: Example HTML Output

<div id="c215" class="frame frame-default frame-type-text frame-layout-0">
<header>
<h2 class="">
Hello World!
</h2>
</header>
<p>Lorem ipsum dolor sit amet, ...</p>
:caption: packages/site_package/Resources/Private/Templates/Partials/Jumbotron.html

<div class="container">
<div class="p-5 mb-4 bg-body-tertiary">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">This jumbotron contains a button to demonstrate that JavaScript is working: </p>
<button class="btn btn-dark btn-lg" role="button" href="#" id="exampleButton">Example button</button>
</div>
</div>

Also we do not want to output other types of content like images or forms.
.. _jumbotron-content-records:

Open the partial displaying the jumbotron:
:file:`Resources/Private/Partials/Page/Jumbotron.html`. We already have the
data of content elements in the column "jumbotron" in a Fluid variable called
"jumbotronContent".
Jumbotron content records
=========================

In our Fluid template the variable the variable `{content.jumbotron.records}`
already contains the content of the content elements entered in columns
`jumbotron` in the TYPO3 backend. This column was defined in the
:ref:`Page layout <t3sitepackage:content-mapping-backend-layout>`. It is provided
by the :ref:`page-content data processor <t3sitepackage:page-content-data-processor>`.

Now instead of letting extension :file:`fluid_styled_content` render the
content we will render it ourselves in this partial. Add the debug view helper
to the partial to see what the data of the jumbotronContent looks like:
Open the partial displaying the jumbotron:
:file:`Resources/Private/Partials/Page/Jumbotron.html`. Using the
:ref:`Debug ViewHelper <f:debug> <t3viewhelper:typo3-fluid-debug>` have a look
at what kind of data is passed to your partial template:

.. code-block:: html
:caption: EXT:site_package/Resources/Private/Partials/Page/Jumbotron.html

<f:debug>{content.jumbotron.records}</f:debug>
<div class="jumbotron">
<f:debug>{jumbotronContent}</f:debug>
<!-- ... -->
</div>

As you can see the data of the actually :sql:`tt_content` record can be found in
:typoscript:`data`. Now let us traverse the array and output the content
elements:
.. _jumbotron-customized-rendering:

.. code-block:: html
:caption: EXT:site_package/Resources/Private/Partials/Page/Jumbotron.html
Customized rendering of the content records
===========================================

<div class="jumbotron">
<f:for each="{jumbotronContent}" as="contentElement">
<div class="container">
<h1 class="display-3">{contentElement.data.header}</h1>
<f:format.html>{contentElement.data.bodytext}</f:format.html>
</div>
</f:for>
</div>
The variable will contain an array of :php:`\TYPO3\CMS\Core\Domain\Record`
elements. If the array is empty. Check that your page indeed has content in
the column "Jumbotron".

You could render these content elements the way that we rendered the main content
(compare :ref:`Extract the content element rendering to a
partial <t3sitepackage:content-element-partial>`). However our expected HTML
output is different from what fluid-styled-content produces out-of-the-box.

Instead of letting the system extension fluid-styled-content render the
content we will render it ourselves in this partial.

We traverse the array provided by the page-content data processor and render
the content ourselves:

.. include:: /CodeSnippets/Fluid/PartialJumbotron.rst.txt

The :ref:`For ViewHelper <f:for> <t3viewhelper:typo3fluid-fluid-for>` loops
through all content elements in column jumbotron and provides them in variable
`{record}`.

The :php-short:`\TYPO3\CMS\Core\Domain\Record` object contains the information
of the database row representing the current content element record.
For advanced usage see :ref:`Use records in Fluid <t3coreapi:record_objects_fluid>`.

Here we use the fields `header` and `bodytext` of the record. As the `bodytext`
field has a rich-text editor in the backend, we pass it through the
:ref:`Format.html ViewHelper <f:format.html> <t3viewhelper:typo3-fluid-format-html>`.
Loading