[TASK] Documentation for FluidStyledContent and CSSStyledContent changes 40/51640/11
authorBenjamin Kott <benjamin.kott@wfp2.com>
Sun, 12 Feb 2017 13:54:41 +0000 (14:54 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Tue, 14 Feb 2017 13:49:08 +0000 (14:49 +0100)
Resolves: #79719
Related: #79622
Releases: master
Change-Id: Id4c7cd1c659df35fb1484d40d079f3d6b1074e20
Reviewed-on: https://review.typo3.org/51640
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-CSSStyledContentAndTypoScript.rst [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-CSSStyledContentBulletContentElementAdjustments.rst [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-SectionFrameForCSSStyledContentReplacedWithFrameClass.rst [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-TypoScriptStandardHeaderHasBeenRemovedFromFluidStyledContent.rst [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/8.6/Feature-79622-IntroducingFrameClassForFluidStyledContent.rst [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/8.6/Feature-79622-IntroducingTableClassForFluidStyledContent.rst [new file with mode: 0644]

diff --git a/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-CSSStyledContentAndTypoScript.rst b/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-CSSStyledContentAndTypoScript.rst
new file mode 100644 (file)
index 0000000..8bef971
--- /dev/null
@@ -0,0 +1,65 @@
+.. include:: ../../Includes.txt
+
+====================================================
+Breaking: #79622 - CSS Styled Content and TypoScript
+====================================================
+
+See :issue:`79622`
+
+Description
+===========
+
+In order to streamline CSS Styled Content and Fluid Styled Content several options
+of CSS Styled Content have been dropped without replacement.
+
+Options Dropped:
+- TCA image_compression
+- TCA image_effects
+- TCA image_noRows
+- TypoScript IMAGE noRows dropped
+- TypoScript IMAGE noCols dropped
+- TypoScript IMAGE noRowsStdWrap dropped
+- TypoScript IMGTEXT captionAlign dropped
+
+
+Impact
+======
+
+The options mentioned above will have no effect.
+
+
+Affected Installations
+======================
+
+All Installations that use the options mentioned above.
+
+
+Migration
+=========
+
+Image Compression
+-----------------
+
+Use global image compression configuration of TYPO3 instead of deciding
+compression on content element level.
+
+
+Image Effects
+-------------
+
+Use CSS to apply effects on Images.
+
+
+No Rows
+-------
+
+Use CSS to style the output.
+
+
+Caption Alignment
+-----------------
+
+Use CSS to align the caption text to your preference.
+
+
+.. index:: Frontend, TypoScript
diff --git a/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-CSSStyledContentBulletContentElementAdjustments.rst b/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-CSSStyledContentBulletContentElementAdjustments.rst
new file mode 100644 (file)
index 0000000..6513038
--- /dev/null
@@ -0,0 +1,33 @@
+.. include:: ../../Includes.txt
+
+========================================================================
+Breaking: #79622 - CSS Styled Content Bullet Content Element Adjustments
+========================================================================
+
+See :issue:`79622`
+
+Description
+===========
+
+In order to streamline the options and enhance compatibility across CSS Styled
+Content and Fluid Styled Content the bullet content element has been partly
+refactored.
+
+The bullet content elements of CSS Styled Content now also uses the field
+`bullets_type` instead of `layout` to match the behavior of Fluid Styled Content.
+
+
+Affected Installations
+======================
+
+Installations that use the CSS Styled Content element bullets.
+
+
+Migration
+=========
+
+Run the upgrade wizard in the install tool to migrate the layout field to the
+dedicated database field `bullets_type`.
+
+
+.. index:: FlexForm, Frontend, TCA, TypoScript
diff --git a/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-SectionFrameForCSSStyledContentReplacedWithFrameClass.rst b/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-SectionFrameForCSSStyledContentReplacedWithFrameClass.rst
new file mode 100644 (file)
index 0000000..cbe8572
--- /dev/null
@@ -0,0 +1,106 @@
+.. include:: ../../Includes.txt
+
+=================================================================================
+Breaking: #79622 - Section Frame for CSS Styled Content replaced with Frame Class
+=================================================================================
+
+See :issue:`79622`
+
+Description
+===========
+
+The functionality provided by `Section Frame` has been streamlined with Fluid Styled
+Content and is now available as `Frame Class`. Previously, integers have been
+stored in the Database that required a mapping of non speaking values.
+
+The new introduced speaking values provide a more valuable use, for example
+in Fluid Styled Content the values are used directly without mapping.
+
+For CSS Styled Content the original behaviour has been mapped to the new keys in the
+database and the option `invisible` has been dropped.
+
+
+Compatibility Table
+-------------------
+
+===============   ===============   ===============   ===================================   =======================
+Name              Previous Key      New Key           CSS Class                             Additional Effects
+===============   ===============   ===============   ===================================   =======================
+Default           0                 default           csc-frame csc-frame-default           -
+Invisible         1                 (dropped)         -                                     -
+Ruler Before      5                 ruler-before      csc-frame csc-frame-ruler-before      -
+Ruler After       6                 ruler-after       csc-frame csc-frame-ruler-after       -
+Indent            10                indent            csc-frame csc-frame-indent            -
+Indent, 33/66%    11                intent-left       csc-frame csc-frame-indent-left       -
+Indent, 66/33%    12                indent-right      csc-frame csc-frame-indent-right      -
+No Frame          66                none              (none)                                No Frame is rendered
+===============   ===============   ===============   ===================================   =======================
+
+
+TypoScript Before
+-----------------
+
+.. code-block:: typoscript
+
+   tt_content.stdWrap.innerWrap.cObject.key.field = section_frame
+   tt_content.stdWrap.innerWrap.cObject.5 =< tt_content.stdWrap.innerWrap.cObject.default
+   tt_content.stdWrap.innerWrap.cObject.5.20.10.value = csc-frame csc-frame-ruler-before
+
+
+TypoScript After
+----------------
+
+.. code-block:: typoscript
+
+   tt_content.stdWrap.innerWrap.cObject.key.field = frame_class
+   tt_content.stdWrap.innerWrap.cObject.ruler-before =< tt_content.stdWrap.innerWrap.cObject.default
+   tt_content.stdWrap.innerWrap.cObject.ruler-before.20.10.value = csc-frame csc-frame-ruler-before
+
+
+Affected Installations
+======================
+
+Installations that use the CSS Styled Content.
+
+
+Migration
+=========
+
+Default fames can be automaticly upgraded to the new field and values. Custom
+values will be prefixed with `custom-<key>` and will also be transferred to the
+new field.
+
+Note that custom values must be added again to the field configuration, and the
+mapping in the TypoScript rendering definition for CSS Styled Content needs also
+to adapt.
+
+
+Add custom frame
+----------------
+
+.. code-block:: typoscript
+
+   TCEFORM.tt_content.frame_class {
+      addItems {
+         custom-1 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:customFrame
+      }
+   }
+
+.. code-block:: php
+
+   $GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['items'][] = [
+      0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:customFrame
+      1 = custom-1
+   ];
+
+
+Adapt rendering definition
+--------------------------
+
+.. code-block:: typoscript
+
+   tt_content.stdWrap.innerWrap.cObject.custom-1 =< tt_content.stdWrap.innerWrap.cObject.default
+   tt_content.stdWrap.innerWrap.cObject.custom-1.20.10.value = csc-frame csc-frame-custom-1
+
+
+.. index:: Frontend, TypoScript
diff --git a/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-TypoScriptStandardHeaderHasBeenRemovedFromFluidStyledContent.rst b/typo3/sysext/core/Documentation/Changelog/8.6/Breaking-79622-TypoScriptStandardHeaderHasBeenRemovedFromFluidStyledContent.rst
new file mode 100644 (file)
index 0000000..50b5fa7
--- /dev/null
@@ -0,0 +1,188 @@
+.. include:: ../../Includes.txt
+
+========================================================================================
+Breaking: #79622 - TypoScript Standard Header has been removed from Fluid Styled Content
+========================================================================================
+
+See :issue:`79622`
+
+Description
+===========
+
+The TypoScript standard header rendering definition `lib.stdHeader` has been
+introduced in CSS Styled Content to reference it across multiple content
+elements to simplify maintenance.
+
+For Fluid Styled Content a workaround for compatibility with CMS 7 has been introduced
+to simplify migration. However, it only renders the header and misses all frames,
+and additional are options necessary to generate a streamlined rendering
+output if the content element layout was not implemented correctly.
+
+
+Example
+-------
+
+
+TypoScript Configuration
+^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. code-block:: typoscript
+
+   tt_content.simple_content = COA
+   tt_content.simple_content {
+      10 < lib.stdHeader
+      20 = TEXT
+      20.field = bodytext
+   }
+
+
+Generated Output
+^^^^^^^^^^^^^^^^
+
+.. code-block:: html
+
+   <header>
+      <h1>Nunc vel libero dignissim</h1>
+   </header>
+   <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus
+      vel lectus vel placerat. Suspendisse non metus sed lorem sagittis
+      consequat non vel nulla.
+   </p>
+
+
+Expected Output
+^^^^^^^^^^^^^^^
+
+.. code-block:: html
+
+   <div id="c53" class="frame frame-default frame-type-header frame-layout-0">
+      <a id="c62"></a>
+      <header>
+         <h1>Nunc vel libero dignissim</h1>
+      </header>
+      <p>
+         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus
+         vel lectus vel placerat. Suspendisse non metus sed lorem sagittis
+         consequat non vel nulla.
+      </p>
+      <p>
+         <a href="#top">Top</a>
+      </p>
+   </div>
+
+
+Impact
+======
+
+Content elements using lib.stdHeader will miss the header in the frontend output.
+
+
+Affected Installations
+======================
+
+All installations that have content elements relying on lib.stdHeader and use
+Fluid Styled Content as content rendering definition.
+
+
+Migration
+=========
+
+To fully embrace support for Fluid Styled Content the setup needs to be changed.
+This is a very simple example, it is highly recommended to migrate content
+elements and plugins to only use fluid. The default fluid layout has all
+information necessary to render the header, frame and everything else
+correctly. That means that you do not need to care about streamlined rendering.
+
+
+Example for Content Element with TypoScript Rendering
+-----------------------------------------------------
+
+If you need TypoScript to process the rendering of your content element the
+recommended way is to use a variable to pass the rendering to fluid.
+
+
+TypoScript Setup
+^^^^^^^^^^^^^^^^
+
+.. code-block:: typoscript
+
+   tt_content.simple_content =< lib.fluidContent
+   tt_content.simple_content {
+      templateName = SimpleContent
+      templateRootPaths.12022017 = EXT:my_simple_content/Resources/Private/Templates/
+      variables.content = COA
+      variables.content {
+         10 = TEXT
+         10.field = bodytext
+      }
+   }
+
+
+Fluid Template
+^^^^^^^^^^^^^^
+
+.. code-block:: html
+
+   <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+   <f:layout name="Default" />
+   <f:section name="Main">
+      <f:format.raw>{content}</f:format.raw>
+   </f:section>
+   </html>
+
+
+Recommended Content Element Rendering
+-------------------------------------
+
+It's highly recommended to migrate content elements to embrace fluid and
+streamline the rendering definitions.
+
+
+TypoScript Setup
+^^^^^^^^^^^^^^^^
+
+.. code-block:: typoscript
+
+   tt_content.simple_content =< lib.fluidContent
+   tt_content.simple_content {
+      templateName = SimpleContent
+      templateRootPaths.12022017 = EXT:my_simple_content/Resources/Private/Templates/
+   }
+
+
+Fluid Template
+^^^^^^^^^^^^^^
+
+.. code-block:: html
+
+   <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+   <f:layout name="Default" />
+   <f:section name="Main">
+      <f:format.html>{data.bodytext}</f:format.html>
+   </f:section>
+   </html>
+
+
+Customize header rendering
+--------------------------
+
+Section in the default layout are optional and have fallbacks. To change
+for example the header rendering, place a `Header` section in a template
+and place your adjustments. For unsetting the header simply place an empty `Header`
+section.
+
+.. code-block:: html
+
+   <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+   <f:layout name="Default" />
+   <f:section name="Header">
+      <h1>{data.header}</h1>
+   </f:section>
+   <f:section name="Main">
+      <f:format.html>{data.bodytext}</f:format.html>
+   </f:section>
+   </html>
+
+
+.. index:: Frontend, TypoScript
diff --git a/typo3/sysext/core/Documentation/Changelog/8.6/Feature-79622-IntroducingFrameClassForFluidStyledContent.rst b/typo3/sysext/core/Documentation/Changelog/8.6/Feature-79622-IntroducingFrameClassForFluidStyledContent.rst
new file mode 100644 (file)
index 0000000..633f0e8
--- /dev/null
@@ -0,0 +1,76 @@
+.. include:: ../../Includes.txt
+
+==================================================================
+Feature: #79622 - Introducing Frame Class for Fluid Styled Content
+==================================================================
+
+See :issue:`79622`
+
+Description
+===========
+
+In CSS Styled Content it is possible to provide additional CSS classes
+for the wrapping container element. This feature is now available
+for Fluid Styled Content, too.
+
+The default layout of Fluid Styled Content is now passing the value of
+`Frame Class` directly to the template and prefixes the value by default
+with `frame-<key>`.
+
+
+Implementation in Fluid Styled Content
+--------------------------------------
+
+.. code-block:: html
+
+   <div id="c{data.uid}" class="frame frame-{data.frame_class} ...">
+      ...
+   </div>
+
+
+Explaination of Keys and Effects of Frame Classes
+-------------------------------------------------
+
+===============   ===============   =====================   ==================================================
+Name              Key               CSS Class               Additional Effects
+===============   ===============   =====================   ==================================================
+Default           default           frame-default           -
+Ruler Before      ruler-before      frame-ruler-before      A ruler is added after the output.
+Ruler After       ruler-after       frame-ruler-after       A ruler is added after the output.
+Indent            indent            frame-indent            Margin of 15% is added to the left and right side.
+Indent, 33/66%    intent-left       frame-indent-left       Margin of 33% is added to the left side.
+Indent, 66/33%    indent-right      frame-indent-right      Margin of 33% is added to the right side.
+No Frame          none              (none)                  No Frame is rendered.
+===============   ===============   =====================   ==================================================
+
+Please note that you need to include the optional static template "Fluid Styled
+Content Styling" to have a visual effect on the new added CSS classes.
+
+
+Edit Predefined Options
+-----------------------
+
+.. code-block:: typoscript
+
+   TCEFORM.tt_content.frame_class {
+      removeItems = default,ruler-before,ruler-after,indent,indent-left,indent-right,none
+      addItems {
+         superframe = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superframe
+      }
+   }
+
+.. code-block:: php
+
+   $GLOBALS['TCA']['tt_content']['columns']['frame_class']['config']['items'][] = [
+      0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superframe
+      1 = superframe
+   ];
+
+
+Impact
+======
+
+`Frame Class` is now available to all Fluid Styled Content elements.
+
+
+.. index:: Fluid, Frontend
diff --git a/typo3/sysext/core/Documentation/Changelog/8.6/Feature-79622-IntroducingTableClassForFluidStyledContent.rst b/typo3/sysext/core/Documentation/Changelog/8.6/Feature-79622-IntroducingTableClassForFluidStyledContent.rst
new file mode 100644 (file)
index 0000000..4b3c084
--- /dev/null
@@ -0,0 +1,103 @@
+.. include:: ../../Includes.txt
+
+==================================================================
+Feature: #79622 - Introducing Table Class for Fluid Styled Content
+==================================================================
+
+See :issue:`79622`
+
+Description
+===========
+
+In CSS Styled Content it is possible to provide additional CSS classes
+for the rendering of the table content element. This feature is now
+available for Fluid Styled Content, too.
+
+The default layout of the Fluid Styled Content element table is now passing
+the value of `Table Class` directly to the template and prefixes the value
+by default with `ce-table-<key>`.
+
+
+Implementation in Fluid Styled Content
+--------------------------------------
+
+.. code-block:: html
+
+   <table class="ce-table{f:if(condition: data.table_class, then: ' ce-table-{data.table_class}')}">
+      ...
+   </table>
+
+
+Explaination of Keys and Effects of Table Classes
+-------------------------------------------------
+
+===============   ===============   =====================   ==============================================
+Name              Key               CSS Class               Additional Effects
+===============   ===============   =====================   ==============================================
+Default           (empty)           (none)                  (none)
+Stiped            striped           ce-table-striped        Odd rows will be highlighted
+Bordered          bordered          ce-table-bordered       A border will be displayed around the table
+===============   ===============   =====================   ==============================================
+
+Please note that you need to include the optional static template "Fluid Styled
+Content Styling" to have a visual effect on the new added CSS classes.
+
+
+Default styling for optional "Fluid Styled Content Styling"
+-----------------------------------------------------------
+
+.. code-block:: css
+
+   /* Table */
+   .ce-table {
+      width: 100%;
+      max-width: 100%;
+   }
+   .ce-table th,
+   .ce-table td {
+      padding: 0.5em 0.75em;
+      vertical-align: top;
+   }
+   .ce-table thead th {
+      border-bottom: 2px solid #dadada;
+   }
+   .ce-table th,
+   .ce-table td {
+      border-top: 1px solid #dadada;
+   }
+   .ce-table-striped tbody tr:nth-of-type(odd) {
+      background-color: rgba(0,0,0,.05);
+   }
+   .ce-table-bordered th,
+   .ce-table-bordered td {
+      border: 1px solid #dadada;
+   }
+
+
+Edit predefined options
+-----------------------
+
+.. code-block:: typoscript
+
+   TCEFORM.tt_content.table_class {
+      removeItems = striped,bordered
+      addItems {
+         supertable = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:supertable
+      }
+   }
+
+.. code-block:: php
+
+   $GLOBALS['TCA']['tt_content']['columns']['table_class']['config']['items'][] = [
+      0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:supertable
+      1 = supertable
+   ];
+
+
+Impact
+======
+
+`Table Class` is now available for the Fluid Styled Content table content element.
+
+
+.. index:: Fluid, Frontend