[TASK] Update chapter on jumbotron for TYPO3 13.4 (#247)

Releases: main, 13.4

Co-authored-by: lina.wolf <[email protected]>

Author: github-actions[bot]

Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt

@@ -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>

Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt

@@ -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}"/>

Documentation/ContentMapping/Jumbotron.rst

@@ -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>`.