From 8a49064232c93032b77ff7ca002a96ea061522ed Mon Sep 17 00:00:00 2001 From: Lina Wolf <48202465+linawolf@users.noreply.github.com> Date: Wed, 20 Apr 2022 15:04:34 +0200 Subject: [PATCH] Add captions to code-blocks (#94) (#525) * [TASK] Add captions to code-blocks (#94) to make it more clear where code should go Releases: main, 11.5 * Update 4-Property-mapping.rst * Update 6-adding-the-template.rst Co-authored-by: lina.wolf Co-authored-by: Tom Warwick --- ...t-for-rendering-the-cobject-viewhelper.rst | 66 ++++++++++++++----- 1 file changed, 48 insertions(+), 18 deletions(-) diff --git a/Documentation/8-Fluid/5-using-typoscript-for-rendering-the-cobject-viewhelper.rst b/Documentation/8-Fluid/5-using-typoscript-for-rendering-the-cobject-viewhelper.rst index 81dedf6d6b..63da2eb6d1 100644 --- a/Documentation/8-Fluid/5-using-typoscript-for-rendering-the-cobject-viewhelper.rst +++ b/Documentation/8-Fluid/5-using-typoscript-for-rendering-the-cobject-viewhelper.rst @@ -11,16 +11,25 @@ The cObject ViewHelper is a very powerful ViewHelper. It connects Fluid with the options that TypoScript offers. The following line in the HTML template will be replaced with the referenced TypoScript object. -```` +.. code-block:: html + :caption: EXT:my_extension/Resources/Private/Templates/SomeTemplate.html + + Now we only have to define ``lib.title`` in the TypoScript -Setup:: +Setup: + +.. code-block:: typoscript + :caption: EXT:my_extension/Configuration/TypoScript/setup.typoscript lib.title = TEXT lib.title.value = Extbase and Fluid »Extbase and Fluid« will be outputted in the template. Now we can output an -image (e.g. headlines with unusual fonts) by changing the TypoScript to:: +image (e.g. headlines with unusual fonts) by changing the TypoScript to: + +.. code-block:: typoscript + :caption: EXT:my_extension/Configuration/TypoScript/setup.typoscript lib.title = IMAGE lib.title { @@ -51,26 +60,35 @@ count how many times it's been viewed in this example). In the Fluid template we add: -``{post.viewCount}`` +.. code-block:: html + :caption: EXT:my_extension/Resources/Private/Templates/SomeTemplate.html + + {post.viewCount} Alternatively, we can use a self-closing tag. The data is being passed with the help of the ``data`` attribute. -```` +.. code-block:: html + :caption: EXT:my_extension/Resources/Private/Templates/SomeTemplate.html + + Also advisable for this example is the inline notation, because you can easily read it from left to right: -``{post.viewCount -> f:cObject(typoscriptObjectPath: -'lib.myCounter')}`` +.. code-block:: html + :caption: EXT:my_extension/Resources/Private/Templates/SomeTemplate.html + + {post.viewCount -> f:cObject(typoscriptObjectPath: 'lib.myCounter')} Now we still have to evaluate the passed value in our TypoScript template. We can use the ``stdWrap`` attribute ``current`` to achieve this. It works like a switch: If set to 1, the value, which we passed to the TypoScript object in the Fluid template will be used. In our -example, it looks like this:: +example, it looks like this: + +.. code-block:: typoscript + :caption: EXT:my_extension/Configuration/TypoScript/setup.typoscript lib.myCounter = TEXT lib.myCounter { @@ -83,7 +101,10 @@ in bold. Now for example we can output the user counter as image instead of text without modifying the Fluid template. We simply have to use the -following TypoScript:: +following TypoScript: + +.. code-block:: typoscript + :caption: EXT:my_extension/Configuration/TypoScript/setup.typoscript lib.myCounter = IMAGE lib.myCounter { @@ -100,12 +121,17 @@ because then you can select which value to use in the TypoScript, and the values can be concatenated. You can also pass whole objects to the ViewHelper in the template: -``{post -> f:cObject(typoscriptObjectPath: -'lib.myCounter')}`` +.. code-block:: html + :caption: EXT:my_extension/Resources/Private/Templates/SomeTemplate.html + + {post -> f:cObject(typoscriptObjectPath: 'lib.myCounter')} Now, how do you access individual properties of the object in the TypoScript-Setup? You can use the property ``field`` of -``stdWrap``:: +``stdWrap``: + +.. code-block:: typoscript + :caption: EXT:my_extension/Configuration/TypoScript/setup.typoscript lib.myCounter = COA lib.myCounter { @@ -128,13 +154,18 @@ when you want to emphasize that the value is very *amount of visits* is significant in our view counter: -``{post -> f:cObject(typoscriptObjectPath: 'lib.myCounter', -currentValueKey: 'viewCount')}`` +.. code-block:: html + :caption: EXT:my_extension/Resources/Private/Templates/SomeTemplate.html + + {post -> f:cObject(typoscriptObjectPath: 'lib.myCounter', currentValueKey: 'viewCount')} In the TypoScript template you can now use both, ``current`` and ``field``, and have therefor the maximum flexibility with the greatest readability. The following TypoScript snippet outputs the same -information as the previous example:: +information as the previous example: + +.. code-block:: typoscript + :caption: EXT:my_extension/Configuration/TypoScript/setup.typoscript lib.myCounter = COA lib.myCounter { @@ -152,4 +183,3 @@ expressions in Fluid templates In the next chapter, we'll turn our attention to a function which most ViewHelper have. This function makes it possible to modify the HTML output of a ViewHelper by adding your own tag attributes. -