From 7631738e67ba416a67699372ef4ce4ed401709d6 Mon Sep 17 00:00:00 2001 From: "lina.wolf" Date: Sun, 10 Nov 2024 12:33:13 +0100 Subject: [PATCH] [TASK] Update chapter on jumbotron for TYPO3 13.4 Releases: main, 13.4 --- .../ComposerJson.rst.txt | 4 +- .../Fluid/PartialJumbotron.rst.txt | 4 +- .../Fluid/TemplateDefault.rst.txt | 2 +- Documentation/ContentMapping/Jumbotron.rst | 105 ++++++++++-------- 4 files changed, 66 insertions(+), 49 deletions(-) diff --git a/Documentation/CodeSnippets/ExtensionConfiguration/ComposerJson.rst.txt b/Documentation/CodeSnippets/ExtensionConfiguration/ComposerJson.rst.txt index 0dbf0f5b..df5ef6e1 100644 --- a/Documentation/CodeSnippets/ExtensionConfiguration/ComposerJson.rst.txt +++ b/Documentation/CodeSnippets/ExtensionConfiguration/ComposerJson.rst.txt @@ -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", diff --git a/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt b/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt index 9c4e0713..000e7874 100644 --- a/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt +++ b/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt @@ -5,12 +5,12 @@ :caption: EXT:site_package/Resources/Private/Templates/Partials/Jumbotron.html :linenos: - +

{record.header}

-

{record.bodytext}

+

{record.bodytext}

diff --git a/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt b/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt index 1900bd43..242fb78f 100644 --- a/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt +++ b/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt @@ -8,7 +8,7 @@ - +
diff --git a/Documentation/ContentMapping/Jumbotron.rst b/Documentation/ContentMapping/Jumbotron.rst index 8957d5a5..c9d1cf4a 100644 --- a/Documentation/ContentMapping/Jumbotron.rst +++ b/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: -
-
-

Hello, world!

-

...

-
-
+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 ` still +contains static content: .. code-block:: html - :caption: Example HTML Output - -
-
-

- Hello World! -

-
-

Lorem ipsum dolor sit amet, ...

+ :caption: packages/site_package/Resources/Private/Templates/Partials/Jumbotron.html + +
+
+
+

Custom jumbotron

+

This jumbotron contains a button to demonstrate that JavaScript is working:

+ +
-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 `. It is provided +by the :ref:`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 ` 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 + {content.jumbotron.records}
- {jumbotronContent}
-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 +=========================================== -
- -
-

{contentElement.data.header}

- {contentElement.data.bodytext} -
- -
+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 `). 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 ` 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 `. + +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 `.