TYPO3 v15 dev-main snapshot ()

2026-08-10 22:31:21 +02:00
commit be71cfa708
199 changed files with 4138 additions and 0 deletions
@@ -0,0 +1,12 @@
+.. include:: /Includes.rst.txt
+
+.. _adding-your-own-content-elements:
+
+================================
+Adding Your Own Content Elements
+================================
+
+.. attention::
+
+   This page has been merged into :ref:`TYPO3 Explained <t3coreapi:adding-your-own-content-elements>`
+   since Core version 8.7.
@@ -0,0 +1,46 @@
+..  include:: /Includes.rst.txt
+
+..  _constant-editor:
+
+===============
+Constant Editor
+===============
+
+..  versionchanged:: 13.1
+    :ref:`Site sets <site-sets>` have been introduced. The
+    :ref:`settings of the site set <site-set-fluid-styled-content-settings>`
+    superseded using TypoScript constants. Using TypoScript constants is
+    still possible for compatibility reasons.
+
+..  tip::
+    If :ref:`Site sets <t3coreapi:site-sets>` are used, the constant editor might be disabled. You can then edit
+    the settings in the :ref:`settings-editor`.
+
+..  include:: /Images/AutomaticScreenshots/TypoScript/ConstantEditor.rst.txt
+
+..  rst-class:: bignums-xxl
+
+1.  The :guilabel:`Constant Editor` can be found in the
+    :guilabel:`Sites > TypoScript` module.
+
+2.  Select the page in the page tree which contains the root Typoscript record
+    of your website.
+
+3.  Select :guilabel:`Constant Editor` in the dropdown at the top of the
+    :guilabel:`Sites > TypoScript` module.
+
+4.  In the dropdown list select the category :guilabel:`CONTENT`.
+
+5.  This will give you a list with all the constants of this extension.
+    All constants are described and can be edited by clicking the pencil in
+    front of the current value or by editing the available field.
+
+6.  Do not forget to save the new values. The new values will be stored in the
+    "Constants" field of the root template of your website.
+
+..  note::
+    If you use the :guilabel:`Constant Editor` the configuration gets written
+    to the database and cannot be kept under version control. You can cut all
+    values from the constants field of the root TypoScript record and move them
+    to a file in your site package extension. This way you can keep the values
+    under version control.
@@ -0,0 +1,30 @@
+.. include:: /Includes.rst.txt
+
+.. _configuration:
+
+=============
+Configuration
+=============
+
+Configuring content elements can be done for the frontend and the backend.
+
+The appearance of the content elements can be changed by overriding the
+:ref:`default settings <site-set-fluid-styled-content-settings>` provided
+by the site set :ref:`"Fluid Styled Content" <site-set-fluid-styled-content>`.
+
+You can also :ref:`override the Fluid
+templates <overriding-fluid-templates>` provided by this extension.
+
+For the backend, fields can be shown or hidden, depending on the fields you are using or
+the fields an editor is allowed to use. Configuration like this is done using
+*Page TSconfig* or *User TSconfig*.
+
+.. toctree::
+   :titlesonly:
+   :glob:
+
+   Sets/Index
+   SettingsEditor/Index
+   ConstantEditor/Index
+   TypoScript/Index
+   OverridingFluidTemplates/Index
@@ -0,0 +1,75 @@
+:navigation-title: Overriding templates
+
+.. include:: /Includes.rst.txt
+
+.. _overriding-fluid-templates:
+
+==============================
+Overriding the Fluid templates
+==============================
+
+At :ref:`typoscript` we have described the way content elements are rendered.
+
+By default these settings are done in the :file:`setup.typoscript` file which can be found in the
+:file:`EXT:fluid_styled_content/Configuration/TypoScript/` folder.
+
+.. _overriding-fluid-templates-using-site-sets:
+
+Using the site settings
+=======================
+
+..  versionadded:: 13.1
+    You can now use :ref:`site settings <t3coreapi:sitehandling-settings>` to
+    override the template paths.
+
+In order to override the templates used in `fluid_styled_content` you need a
+custom :ref:`site package <t3sitepackage:start>`.
+
+You can override the default template paths from the
+:ref:`site-set-fluid-styled-content` in your site configuration:
+
+..  literalinclude:: _site-settings.yaml
+    :caption: EXT:site_package/Configuration/Sets/SitePackage/settings.yaml
+
+Now copy the Fluid templates that you want to override into your site package at
+the path configured in the site settings.
+
+.. _overriding-fluid-templates-using-lib-fluidcontent:
+
+Using lib.contentElement
+========================
+
+..  versionchanged:: 13.1
+    It is recommended to use
+    :ref:`site settings <overriding-fluid-templates-using-site-sets>` instead of
+    :typoscript:`lib.contentElement` to override the template paths.
+
+This option gives you the ability to add another `templateRootPath` and can be defined
+the same as `partialRootPaths` and `layoutRootPaths`:
+
+.. code-block:: typoscript
+
+   lib.contentElement {
+      templateRootPaths {
+         200 = EXT:your_extension_key/Resources/Private/Templates/
+      }
+      partialRootPaths {
+         200 = EXT:your_extension_key/Resources/Private/Partials/
+      }
+      layoutRootPaths {
+         200 = EXT:your_extension_key/Resources/Private/Layouts/
+      }
+   }
+
+A content element is using a `templateName`, which is defined in :file:`setup.typoscript`. You
+can override this value, but the template from the extension *fluid_styled_content* will
+not be loaded as its name is still the default value.
+
+.. code-block:: typoscript
+
+   tt_content {
+      bullets {
+         templateName = ChangedName
+      }
+   }
+
@@ -0,0 +1,5 @@
+styles:
+  templates:
+    templateRootPath: EXT:my_site_package/Resources/Private/Extensions/FluidStyledContent/Templates/
+    partialRootPath: EXT:my_site_package/Resources/Private/Extensions/FluidStyledContent/Partials/
+    layoutRootPath: EXT:my_site_package/Resources/Private/Extensions/FluidStyledContent/Layouts/
@@ -0,0 +1,38 @@
+:navigation-title: Fluid Styled Content
+
+.. include:: /Includes.rst.txt
+
+.. _site-set-fluid-styled-content:
+
+===============================
+Site set "Fluid Styled Content"
+===============================
+
+..  versionadded:: 13.1
+    :ref:`Site sets <t3coreapi:site-sets>` have been added to the extension :composer:`typo3/cms-fluid-styled-content`.
+    See :ref:`include-site-set` on how to use them.
+
+The site set "Fluid Styled Content" includes all TypoScript required to
+display the :ref:`content elements <content-elements>` provided by
+:composer:`typo3/cms-fluid-styled-content`.
+
+Some settings in these content elements like image positions or space settings
+require certain CSS styles. If you want to use the default CSS styles provided
+by TYPO3, include :ref:`site-set-fluid-styled-content-css` in addition to this
+site set.
+
+If you depend on this site set directly instead of :ref:`site-set-fluid-styled-content-css`
+you should provide the missing CSS yourself or disable all `tt_content` fields
+via page TSconfig that lose their function due to missing CSS.
+
+..  _site-set-fluid-styled-content-settings:
+
+Settings provided by site set "Fluid Styled Content"
+====================================================
+
+These settings can be adjusted in the :ref:`settings-editor`.
+
+..  typo3:site-set-settings:: PROJECT:/Configuration/Sets/FluidStyledContent/settings.definitions.yaml
+    :name: fluid-styled-content
+    :type:
+    :Label: Settings of "Fluid Styled Content"
@@ -0,0 +1,25 @@
+:navigation-title: Fluid Styled Content CSS
+
+.. include:: /Includes.rst.txt
+
+.. _site-set-fluid-styled-content-css:
+
+===================================
+Site set "Fluid Styled Content CSS"
+===================================
+
+..  versionadded:: 13.1
+    :ref:`Site sets <t3coreapi:site-sets>` have been added to the extension :composer:`typo3/cms-fluid-styled-content`.
+    See :ref:`include-site-set` on how to use them.
+
+This site set depends on the :ref:`site-set-fluid-styled-content`. Additionally it
+includes the :confval:`_CSS_DEFAULT_STYLE <t3tsref:plugin-css-default-style>`.
+
+The styles provided by this site set enable the display of settings in content
+elements, including frame styles like `.frame-space-before-large`, styles
+for headlines like `.ce-headline-center` and styles for images like
+`.ce-intext.ce-left`.
+
+If you do not depend on this site set you should provide the according CSS yourself
+or disable all fields in the TCA table that lose their function due to missing
+CSS styles.
@@ -0,0 +1,41 @@
+.. include:: /Includes.rst.txt
+
+.. _site-sets:
+
+=========
+Site sets
+=========
+
+..  versionadded:: 13.1
+    :ref:`Site sets <t3coreapi:site-sets>` have been added to the extension
+    :composer:`typo3/cms-fluid-styled-content`.
+    See :ref:`include-site-set` on how to use them.
+
+The extension :composer:`typo3/cms-fluid-styled-content` offers two site sets
+that can be included via the Site module or required by your
+:ref:`site package's site set <t3sitepackage:site_set>`.
+
+The settings provided by these sets can be adjusted in the :ref:`settings-editor`.
+
+..  card-grid::
+    :columns: 1
+    :columns-md: 2
+    :gap: 4
+    :class: pb-4
+    :card-height: 100
+
+    ..  card:: :ref:`"Fluid Styled Content" <site-set-fluid-styled-content>`
+
+        The site set "Fluid Styled Content" includes all TypoScript required to
+        display the content elements provided by `fluid_styled_content`.
+
+    ..  card:: :ref:`"Fluid Styled Content CSS" <site-set-fluid-styled-content-css>`
+
+        This site set extends the :ref:`"Fluid Styled Content" <site-set-fluid-styled-content>`
+        site set with default CSS.
+
+..  toctree::
+    :glob:
+    :hidden:
+
+    *
@@ -0,0 +1,23 @@
+..  include:: /Includes.rst.txt
+
+..  _settings-editor:
+
+===============
+Settings editor
+===============
+
+When the :ref:`site sets of fluid_styled_content <include-site-set>` are included,
+the settings provided by those sets become available in the editor.
+
+You can find the available site settings in module
+:guilabel:`Sites > Setup > Settings`
+
+You can change individual settings here. If the site settings are writable
+you can hit the :guilabel:`Save` button and the settings will be written
+directly to the site settings.
+
+If the settings are not writable you can click the :guilabel:`YAML export`
+button to export the settings. These can then be added by a developer with
+sufficient rights.
+
+The available settings are also described in detail in :ref:`site-sets`.
@@ -0,0 +1,96 @@
+.. include:: /Includes.rst.txt
+
+.. _typoscript:
+
+==========
+TypoScript
+==========
+
+At the section :ref:`include-site-set` you have already added the TypoScript by
+depending on the site set.
+
+The TypoScript of the site set includes files located
+in the directory :file:`EXT:fluid_styled_content/Configuration/TypoScript/`.
+
+.. figure:: /Images/ExternalScreenshots/TypoScriptFileStructure.png
+   :alt: Structure of the TypoScript files
+
+   Structure of the TypoScript files
+
+In this folder there are two files:
+
+*   :file:`constants.typoscript` - This file is only used when for compatibility
+    reasons the TypoScript is included via import or `TypoScript` module in the
+    outdated fashion.
+*   :file:`setup.typoscript` - This file will first include some other files
+    which are located in the :file:`Setup/` folder in the same directory. More
+    about these files later.
+
+In the folder :file:`ContentElement/` there are files which are included by the file
+:file:`setup.typoscript` as mentioned above. These files contain the rendering definitions of all
+content elements that are provided by the TYPO3 Core. These are:
+
+-   :file:`Bullets.typoscript` - Configuration for content element "Bullet List"
+
+-   :file:`Div.typoscript` - Configuration for content element "Divider"
+
+-   :file:`Header.typoscript` - Configuration for content element "Header Only"
+
+-   :file:`Html.typoscript` - Configuration for content element "Plain HTML"
+
+-   :file:`Image.typoscript` - Configuration for content element "Image"
+
+-   :file:`List.typoscript` - Configuration for content element "General Plugin"
+
+-   :file:`MenuAbstract.typoscript` - Configuration for content element "Menu of subpages of selected pages including abstracts"
+
+-   :file:`MenuCategorizedContent.typoscript` - Configuration for content element "Content elements for selected categories"
+
+-   :file:`MenuCategorizedPages.typoscript` - Configuration for content element "Pages for selected categories"
+
+-   :file:`MenuPages.typoscript` - Configuration for content element "Menu of selected pages"
+
+-   :file:`MenuRecentlyUpdated.typoscript` - Configuration for content element "Recently updated pages"
+
+-   :file:`MenuRelatedPages.typoscript` - Configuration for content element "Related pages (based on keywords)"
+
+-   :file:`MenuSection.typoscript` - Configuration for content element "Section index (page content marked for section menus)"
+
+-   :file:`MenuSectionPages.typoscript` - Configuration for content element "Menu of subpages of selected pages including sections"
+
+-   :file:`MenuSitemap.typoscript` - Configuration for content element "Sitemap"
+
+-   :file:`MenuSitemapPages.typoscript` - Configuration for content element "Sitemaps of selected pages"
+
+-   :file:`MenuSubpages.typoscript` - Configuration for content element "Menu of subpages of selected pages"
+
+-   :file:`Shortcut.typoscript` - Configuration for content element "Insert records"
+
+-   :file:`Table.typoscript` - Configuration for content element "Table"
+
+-   :file:`Text.typoscript` - Configuration for content element "Regular Text Element"
+
+-   :file:`Textmedia.typoscript` - Configuration for content element "Text and Media"
+
+-   :file:`Textpic.typoscript` - Configuration for content element "Text and Images"
+
+-   :file:`Uploads.typoscript` - Configuration for content element "File Links"
+
+Since we move away from TypoScript as much as possible, these rendering
+definitions only declare the following:
+
+-   Can :ref:`FLUIDTEMPLATE <t3tsref:cobj-fluidtemplate>` be used immediately or
+    do we need data processing first?
+
+    A processor is sometimes used to do some data manipulation before all the data is sent
+    to the Fluid template.
+
+-   Assigning the Fluid template file for each type of content element separately.
+
+In the folder :file:`Helper/` there are files which are included by the file
+:file:`setup.typoscript` as mentioned above. These are:
+
+-   :file:`ContentElement.typoscript` - Default configuration for content
+    elements using :ref:`FLUIDTEMPLATE <t3tsref:cobj-fluidtemplate>`
+
+-   :file:`ParseFunc.typoscript` - Creates persistent ParseFunc setup for non-HTML content
@@ -0,0 +1,35 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-bullets:
+
+===========
+Bullet list
+===========
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/BulletTypicalPageContent.rst.txt
+
+With this content element you can provide unordered and ordered bullet lists, but also a
+definition list, in the frontend.
+
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/BulletsBackend.rst.txt
+
+The type of list can be defined with the field :guilabel:`Type of bullets`.
+
+The content is added in the field :guilabel:`Bullet List`, where each new line
+is a new bullet.
+
+.. code-block:: none
+
+   Bullet 1
+   Bullet 2
+   Bullet 3
+
+For definition lists you use one line for a single definition which starts with the term,
+followed by the description, separated by a vertical bar "|".
+
+.. code-block:: none
+
+   Term 1|Description 1
+   Term 2|Description 2
+   Term 3|Description 3
@@ -0,0 +1,12 @@
+.. include:: /Includes.rst.txt
+
+
+.. _content-element-div:
+
+=======
+Divider
+=======
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/DividerPageContent.rst.txt
+
+Nothing more than a horizontal rule.
@@ -0,0 +1,15 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-header:
+
+======
+Header
+======
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/HeaderTypicalPageContent.rst.txt
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/HeaderBackend.rst.txt
+
+The content element "Header" will render a header, which can be linked. There is the
+possibility to add a subheader and a date. The fields used for this content elements are
+the same as :ref:`content-elements-general-header`, but with a field for the subheader.
@@ -0,0 +1,14 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-html:
+
+====
+HTML
+====
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/HTMLPageContent.rst.txt
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/HtmlBackend.rst.txt
+
+Insert HTML directly using this content element.
+
@@ -0,0 +1,116 @@
+.. include:: /Includes.rst.txt
+
+.. _content-elements:
+
+====================
+The content elements
+====================
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/TypicalPageContent.rst.txt
+
+This chapter describes the default set of content elements provided by TYPO3's
+Core. It will show you a description and screenshots of the backend fields.
+
+.. _content-elements-general:
+
+General fields
+==============
+
+These are fields which are used by (almost) every content element.
+
+
+.. _content-elements-general-header:
+
+Header
+------
+
+Almost every content element can contain a header, which consists of the following parts:
+
+Header
+   The text of the header
+
+Type
+   The type of heading (heading 1, heading 2, heading 3 ... or if the header is hidden).
+   When not choosing an option, the default heading will be used, which can be configured
+   at :ref:`constant-editor`.
+
+Date
+   Have the possibility to group the header with a date
+
+Link
+   Link wrapping the header text. This can be a TYPO3 CMS page, an external page, an email
+   address or a link to a file.
+
+The header fields can be found in the :guilabel:`General` tab of a content element.
+
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/HeaderBackend.rst.txt
+
+
+.. _content-elements-general-show-in-section-menus:
+
+Show in Section Menus
+----------------------
+
+Using this option will only be visible when using menu's based on sections. This will be
+described in the chapter :ref:`content-element-menu`.
+
+This field can be found in the :guilabel:`Appearance` tab.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/ShowInSectionMenus.rst.txt
+
+A :guilabel:`Section Menu`, which is in turn a content element itself
+produces an output including the headlines of all content elements
+with the flag :guilabel:`Show in Section Menus` set.
+
+.. _content-elements-general-link-to-top:
+
+Append with Link to Top of Page
+-------------------------------
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/AppendWithLinkToTopOfPage.rst.txt
+
+When checked, this will render a link below the content element to bring the visitor the
+top of the page. This will be very convenient for your visitors when having long pages.
+
+.. _content-elements-general-access:
+
+Access
+------
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/AccessTab.rst.txt
+
+These fields define if and when a visitor has access to this content element. The access
+fields all reside in the :guilabel:`Access` tab:
+
+Visibility of content element
+   By checking this option the content element will not be visible to any visitor.
+
+Publish Date
+   The date on which the content has to be published, which means making visible at a
+   certain date.
+
+Expiration Date
+   The date on which the content will be expired, which means the content will be hidden
+   on a certain date
+
+Usergroup Access Rights
+   Here you can select whether the content element only is available to a certain
+   frontend user group, if it has to be visible only when the visitor is logged in or if
+   it has to be hidden at a login.
+
+.. toctree::
+   :maxdepth: 5
+   :titlesonly:
+   :glob:
+
+   Header/Index
+   TextMedia/Index
+   Bullets/Index
+   Table/Index
+   Uploads/Index
+   Menu/Index
+   Shortcut/Index
+   List/Index
+   Div/Index
+   Html/Index
@@ -0,0 +1,18 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-list:
+
+=============
+Insert plugin
+=============
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/PluginContentElements.rst.txt
+
+Extensions often provide plugins to render frontend output. They are essentially the
+same as content elements. When an extension depends on a plugin, select the
+plugin in this content element. The fields might change depending on the plugin.
+
+For example, the system extension *indexed_search* provides the *Indexed Search*
+plugin which does not offer any additional fields:
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/PluginBackend.rst.txt
@@ -0,0 +1,96 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-menu:
+
+=====
+Menus
+=====
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/MenuContentElements.rst.txt
+
+In websites, menus are often created outside the content element scope, because they have
+to reappear within every page. These could be the main menu, a sub menu, a bread crumb or
+a language menu. However, there are situations where you would like to create a menu
+specifically on one page. The following content elements will give you some options to render
+a menu. These available content elements are:
+
+Menu of selected pages
+   The menu consists of links to the selected pages in the TYPO3 CMS backend.
+
+Menu of subpages of selected pages
+   The menu consists of links to the subpages of the selected pages in the TYPO3 CMS
+   backend.
+
+Menu of subpages of selected pages including abstracts
+   The same as above, but showing the abstract of these pages as well, when not empty.
+
+Menu of subpages of selected pages including sections
+   This will render a menu of the subpages of the selected pages. Below each subpage an
+   extra menu will be showing the titles of content elements which belong to that certain
+   subpage, which have the option "Show in Section Menus" in the :guilabel:`Appearance` tab enabled.
+   This makes it possible for the website visitor to jump to the selected content element,
+   within that page, immediately.
+
+Sitemap
+   Render a full sitemap of the website, starting at the root page.
+
+Sitemaps of selected pages
+   Render one or more sitemaps at once. The starting point of each site map will be a
+   single selected page.
+
+Section index (page content marked for section menus)
+   Menu of content elements within the selected page, which have the option "Show in
+   Section Menus" in the :guilabel:`Appearance` tab enabled. This makes it possible for the website
+   visitor to jump to the selected content element, within that page, immediately.
+
+Recently updated pages
+   Shows a list of pages which are updated in the last 7 days. Updated only means a
+   change in the page properties, not the content on the page.
+
+Related pages (based on keywords)
+   Shows a list of the selected page and all other pages, which have one or more keywords,
+   entered in the page properties, in common.
+
+Pages for selected categories
+   Displays a menu of all pages which have been assigned one or more of the selected
+   categories.
+
+Content elements for selected categories
+   Displays a menu of all content elements which have been assigned one or more of the
+   selected categories.
+
+The availability of links in each type of menu will depend on access rights. If a website
+visitor has no access to a certain part (with a frontend login), the link will not be
+shown.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/MenuBackend.rst.txt
+
+In case no pages are selected, the menu will be rendered from the
+current page where the menu is put on.
+
+Styling of the current page in a menu
+======================================
+
+.. versionadded:: 12.0
+    All menu content elements related to page navigation reflect the "current"
+    state of a page now.
+
+If the current page is displayed within a menu the aria attribute
+:html:`aria-current="page"` is added to the a-tag of a menu-item.
+
+For styling with CSS the attribute of the link can be used:
+
+.. code-block:: css
+    :caption: EXT:site_package/Public/Css/menu.css
+
+    [aria-current="page"] {
+       /* Special style for the current page link */
+    }
+    [aria-current="page"]:hover {
+       /* Special style for the current page link when hovered */
+    }
+    [aria-current="page"]::before {
+       /* Special virtual element for additions like chevrons, etc. */
+    }
+
+The default styling of contains no style for the current page.
@@ -0,0 +1,28 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-shortcut:
+
+==============
+Insert Records
+==============
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/InsertRecordsPageContent.rst.txt
+
+Ever have content on one page that you want to reference on another page? But you don't want to have to
+maintain both and keep them both in sync? And you don't want to show the whole content from one
+page on another. Using insert records you can add one content element from a page or all
+the content elements from a page. You can also add content elements from several pages.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/InsertRecordsBackend.rst.txt
+
+Just select the content elements you want to display and if necessary, put them in the
+right order.
+
+In the frontend the referenced content elements will show up the same as the original one
+(if the styling is not different for that page)
+
+.. note::
+
+   This is the only content element still using a small amount of TypoScript in the rendering
+   process. This is done because you can add different rendering for records from
+   different tables. Take a look at :typoscript:`tt_content.shortcut.20`.
@@ -0,0 +1,42 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-table:
+
+=====
+Table
+=====
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/TableTypicalPageContent.rst.txt
+
+The :guilabel:`Table` content element can be used to display tabular data.
+
+.. hint::
+    In the database the data is saved as comma separated values (CSV), a
+    plain text format for storing table data (numbers and text). This format
+    can be used to import data from external sources.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/TableBackend.rst.txt
+
+By default the :guilabel:`Field delimiter` is a vertical bar "|", the
+:guilabel:`Text enclosure` set to **none**.
+
+A :guilabel:`Table caption` can be provided as a heading for the table.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/TableAppearanceBackend.rst.txt
+
+Also some appearance options are available for the table. These can be found in the
+:guilabel:`Appearance` tab:
+
+Columns
+   The maximum amount of columns. Even when more columns are defined in the
+   :guilabel:`Table content` field, the table will only show the maximum amount of columns.
+
+Table class
+   Some predefined classes to style the table output.
+
+Table header position
+   The first row or the first column can be used as a table header.
+
+Use table footer
+   The last row will be used to group the table's footer area (which may be a summary, an
+   addition of column values, or some call to action based on the preceding content).
@@ -0,0 +1,36 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-textmedia:
+
+=============
+Text & Images
+=============
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/TextMediaTypicalPageContent.rst.txt
+
+This content element allows you to combine text and images. Additionally there
+is also a content element for :guilabel:`Text & Media` where you can use videos
+or Audio. There are also separate content elements for :guilabel:`Text`
+or :guilabel:`Images` individually. These offer no advantage over the content element
+:guilabel:`Text & Images` except that some fields are missing and the backend form
+is less cluttered.
+
+The text can be entered in the rich text editor of the :guilabel:`General`
+tab.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/RteBackend.rst.txt
+
+The media elements can be added in the :guilabel:`Images` tab. In this tab
+there is also the option to turn the *enlarge on click* behaviour on for images.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/MediaBackend.rst.txt
+
+Multiple images and movies are combined as a gallery, which can be configured
+using the :guilabel:`Gallery Settings`. In some installations there are
+specific settings for width or height for each element, if a border
+should be shown around each element, the position of the gallery in relation
+to the text and the amount of columns which should be used for the gallery.
+
+The maximum width of the gallery can be different when the gallery is on
+top or bottom of the text, or inside the text. This can be set using the
+:ref:`constant-editor`.
@@ -0,0 +1,39 @@
+.. include:: /Includes.rst.txt
+
+.. _content-element-uploads:
+
+==========
+File links
+==========
+
+.. include:: /Images/AutomaticScreenshots/ContentOverview/FileLinksPageContent.rst.txt
+
+This content element gives you the opportunity to offer downloadable files to the visitors
+of your website.
+
+.. include:: /Images/AutomaticScreenshots/ContentElements/UploadsBackend.rst.txt
+
+You can add or select single files but also use a file collection. A file collection can
+be one of the following:
+
+-   A static selection of files
+-   A folder within a storage, holding the files
+-   A file selection by category
+
+When combining both methods, single files and file collections, all files from these
+methods will be presented to the website visitor.
+
+At the bottom of the tab :guilabel:`General` you will find several options how
+the files will be presented:
+
+Display file/icon/thumbnail
+   In this dropdown you can select if you only want to show the file name, the file name
+   and a corresponding icon, based on the file extension, or the file name with a
+   thumbnail, if it is possible for TYPO3 CMS to generate a thumbnail from the file.
+
+Display file size information
+   Will show the file size calculated from the amount of bytes and presented as a human
+   readable string with the proper unit (B, KB, MB ...).
+
+Display description
+   Will display the description of each file, if available.
@@ -0,0 +1,83 @@
+.. include:: /Includes.rst.txt
+
+.. _include-default-typoscript:
+.. _using-the-rendering-definitions:
+
+=======================
+Use TypoScript includes
+=======================
+
+..  versionchanged:: 13.1
+    If you included the :ref:`site sets <include-site-set>`, skip this step.
+
+To use the default rendering definitions provided by *fluid_styled_content*, you
+have to add the extension's TypoScript set to your root TypoScript record.
+
+When you are using a site package you can add the following lines to your site
+packages constants.typoscript and setup.typoscript:
+
+.. code-block:: typoscript
+    :caption: my_sitepackage/Configuration/TypoScript/constants.typoscript
+
+    # Import the default constants of EXT:fluid_styled_content
+    @import 'EXT:fluid_styled_content/Configuration/TypoScript/constants.typoscript'
+
+.. code-block:: typoscript
+    :caption: my_sitepackage/Configuration/TypoScript/setup.typoscript
+
+    # Import the default setup of EXT:fluid_styled_content
+    @import 'EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript'
+
+    # Import the default CSS of EXT:fluid_styled_content
+    @import 'EXT:fluid_styled_content/Configuration/TypoScript/Styling/setup.typoscript'
+
+This is the recommended way as the import of TypoScript can be kept under
+version control this way.
+
+Alternative: Include the TypoScript set in the root TypoScript record
+=====================================================================
+
+It is also still possible to include the TypoScript set directly into
+a TypoScript record. However there are draw backs:
+The import is then stored in the database and not the file system and cannot be
+kept under version control.
+
+.. include:: /Images/AutomaticScreenshots/TypoScript/EditTemplateRecord.rst.txt
+
+.. rst-class:: bignums-xxl
+
+1.  Go to the module :guilabel:`Sites > TypoScript`.
+
+2.  In the page tree, select the page which contains the root TypoScript
+    record of your website.
+
+3.  Select :guilabel:`Edit TypoScript Record` in the dropdown at the top of the
+    :guilabel:`Sites > TypoScript` module.
+
+4.  Click the :guilabel:`Edit the whole TypoScript record`. This will
+    open all the settings of the root TypoScript record:
+
+.. include:: /Images/AutomaticScreenshots/TypoScript/IncludeTypoScriptTemplate.rst.txt
+
+Go to the tab :guilabel:`Includes` and select
+:guilabel:`Fluid Content Elements` in the
+:guilabel:`Available items` under :guilabel:`Include TypoScript sets`.
+The selection will move to the :guilabel:`Selected items`.
+
+TYPO3 is now using the rendering definitions of *fluid_styled_content* for
+the default set of content elements. This is essentially unstyled HTML5 markup.
+
+You can additionally select :guilabel:`Fluid Content Elements CSS (optional)`.
+This TypoScript set adds some CSS styling to make sure all
+the parts of a content elements have some styling, this will include alignment and positioning.
+This set of styles will not add any colors, make any changes to typography or anything else related to
+your website's visual style. This TypoScript set is optional, as it is common for integrators to
+override the basic styling.
+
+Save the TypoScript record by using the save button at the top of the module.
+
+Next step
+=========
+
+:ref:`Display the content elements <inserting-content-page-template>` in your
+site package template.
@@ -0,0 +1,75 @@
+.. include:: /Includes.rst.txt
+
+.. _inserting-content-page-template:
+
+=======================================
+Inserting content in your page template
+=======================================
+
+To get the different columns from the backend displayed in the frontend
+you can use predefined :ref:`CONTENT <t3tsref:cobj-content>` objects or
+the :ref:`DatabaseQueryProcessor <t3tsref:DatabaseQueryProcessor>`.
+
+It is advised to make all your changes in a custom extension, visit the
+:doc:`site package documentation <t3sitepackage:Index>` to find out more.
+
+.. _inserting-content-page-template-fluidtemplate:
+
+Based on the FLUIDTEMPLATE content object (cObj)
+================================================
+
+.. code-block:: typoscript
+
+   lib.dynamicContent = COA
+   lib.dynamicContent {
+      10 = LOAD_REGISTER
+      10.colPos.cObject = TEXT
+      10.colPos.cObject {
+         field = colPos
+         ifEmpty.cObject = TEXT
+         ifEmpty.cObject {
+            value.current = 1
+            ifEmpty = 0
+         }
+      }
+      20 = CONTENT
+      20 {
+         table = tt_content
+         select {
+            orderBy = sorting
+            where = {#colPos}={register:colPos}
+            where.insertData = 1
+         }
+      }
+      90 = RESTORE_REGISTER
+   }
+
+   page = PAGE
+   page {
+      10 = FLUIDTEMPLATE
+      10 {
+         templateName = Default
+         templateRootPaths {
+            0 = EXT:example_package/Resources/Private/Templates/Page/
+         }
+         partialRootPaths {
+            0 = EXT:example_package/Resources/Private/Partials/Page/
+         }
+         layoutRootPaths {
+            0 = EXT:example_package/Resources/Private/Layouts/Page/
+         }
+      }
+   }
+
+.. code-block:: html
+
+   <f:layout name="Default" />
+   <f:section name="Main">
+      <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
+   </f:section>
+
+Next step
+=========
+
+You can start :ref:`adding content elements <content-elements>` or make further
+:ref:`configurations <configuration>`.
@@ -0,0 +1,18 @@
+.. include:: /Includes.rst.txt
+
+.. _first_steps:
+
+===========
+First steps
+===========
+
+
+.. toctree::
+    :maxdepth: 5
+    :titlesonly:
+    :glob:
+
+    SiteSets
+    DefaultTemplate
+    DisplayContent
+
@@ -0,0 +1,65 @@
+:navigation-title: Site set inclusion
+
+..  include:: /Includes.rst.txt
+
+..  _include-site-set:
+
+======================================
+Include one of the available site sets
+======================================
+
+..  versionadded:: 13.1
+    :ref:`Site sets <t3coreapi:site-sets>` have been introduced and are the recommended method to include
+    TypoScript. If you do not want to use site sets, you can still use
+    :ref:`TypoScript includes <include-default-typoscript>` to include the
+    default TypoScript.
+
+To use the default rendering definitions provided by *fluid_styled_content*, you
+should add one of the two :ref:`site sets <site-sets>` provided by this extension
+to your :ref:`site configuration <include-site-set-site>`
+or depend on it in your :ref:`site package's site set <include-site-set-sitepackage>`.
+
+..  _include-site-set-site:
+
+Add the site set to your site configuration
+===========================================
+
+This is the recommended way to include the "Fluid Styled Content" site set into
+basic TYPO3 sites without a custom site package. See also
+:ref:`site sets <t3coreapi:site-sets>`.
+
+.. figure:: /Images/ManualScreenshots/SiteSet.png
+
+   Add the site set of Fluid Styled Content
+
+When saving, the GUI then automatically updates your site configuration:
+
+..  literalinclude:: _site_config.diff
+    :caption: config/sites/my-site/config.yaml (diff)
+
+..  _include-site-set-sitepackage:
+
+Add the site set to your custom site package
+============================================
+
+If your installation has a custom :ref:`site package <t3sitepackage:start>`,
+it is recommended to depend on the "Fluid Styled Content CSS" site set with your
+site package's site set:
+
+..  literalinclude:: _site_package_config.yaml
+    :caption: EXT:my_site_package/Configuration/Sets/MySet/config.yaml
+
+Edit the settings
+=================
+
+..  _include-site-set-editor:
+
+All settings of this extension are now available in the :ref:`settings-editor`.
+
+..  _include-default-site-set-next:
+
+Next step
+=========
+
+:ref:`Display the content elements <inserting-content-page-template>` in your
+site package template.
@@ -0,0 +1,6 @@
+  base: https://example.ddev.site
+ dependencies:
+   - typo3/fluid-styled-content-css
+  languages:
+    -
+      title: English
@@ -0,0 +1,4 @@
+name: myvendor/my-site-package
+label: My sitepackage set
+dependencies:
+  - typo3/fluid-styled-content-css
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/AccessTab.png
+   :class: with-shadow
+
+   The Access tab with all its fields
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/AppendWithLinkToTopOfPage.png
+   :class: with-shadow
+
+   The field "Append with link to top of page"
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/BulletsBackend.png
+   :class: with-shadow
+
+   The most important fields of the content element 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/BulletsFrontend.png
+   :class: with-shadow
+
+   Bullet list examples in the frontend 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/HeaderBackend.png
+   :class: with-shadow
+
+   The content element "Header" in the backend
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/HeaderFrontend.png
+   :class: with-shadow
+
+   Header examples in the frontend 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/HeaderWithLinkFrontend.png
+   :class: with-shadow
+
+   Header with link
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/HtmlBackend.png
+   :class: with-shadow
+
+   The content element :guilabel:`Plain HTML` in the backend
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/InsertRecordsBackend.png
+   :class: with-shadow
+
+   The content element :guilabel:`Insert Records`
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/MediaBackend.png
+   :class: with-shadow
+
+   TextImages in the content element :guilabel:`Text & Images`
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/MenuBackend.png
+   :class: with-shadow
+
+   The most important fields of the content element 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/MenuFrontend.png
+   :class: with-shadow
+
+   Menu example in the frontend 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/PluginBackend.png
+   :class: with-shadow
+
+   The plugin :guilabel:`Indexed Search`
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/RteBackend.png
+   :class: with-shadow
+
+   The content element rich text editor in the content element :guilabel:`Text`
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/SectionMenuFrontend.png
+   :class: with-shadow
+
+   Section menu examples in the frontend 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/ShowInSectionMenus.png
+   :class: with-shadow
+
+   The field "Show In Section Menu's"
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/TableAppearanceBackend.png
+   :class: with-shadow
+
+   The content element :guilabel:`Table` in the backend, tab :guilabel:`Appearance`
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/TableBackend.png
+   :class: with-shadow
+
+   The content element :guilabel:`Table` in the backend
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/TableFrontend.png
+   :class: with-shadow
+
+   :guilabel:`Table` examples in the frontend 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/TextImagesFrontend.png
+   :class: with-shadow
+
+   :guilabel:`Text & Images` examples in the frontend 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/UploadsBackend.png
+   :class: with-shadow
+
+   The content element :guilabel:`Uploads` in the backend
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentElements/UploadsFrontend.png
+   :class: with-shadow
+
+   :guilabel:`Uploads` examples in the frontend 
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/BulletTypicalPageContent.png
+   :class: with-shadow
+
+   Typical page content: Bullet List
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/DividerPageContent.png
+   :class: with-shadow
+
+   Divider page content
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/FileLinksPageContent.png
+   :class: with-shadow
+
+   Typical page content: File Links
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/HTMLPageContent.png
+   :class: with-shadow
+
+   Plain HTML page content
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/HeaderTypicalPageContent.png
+   :class: with-shadow
+
+   Typical page content: Header
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/InsertRecordsPageContent.png
+   :class: with-shadow
+
+   Insert records page content
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/MenuContentElements.png
+   :class: with-shadow
+
+   Menu content elements
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/PluginContentElements.png
+   :class: with-shadow
+
+   Plugin content elements
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/SpecialContentElements.png
+   :class: with-shadow
+
+   Special content elements
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/TableTypicalPageContent.png
+   :class: with-shadow
+
+   Typical page content: Table List
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/TextMediaTypicalPageContent.png
+   :class: with-shadow
+
+   Typical page content: Text, Images and Media
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/ContentOverview/TypicalPageContent.png
+   :class: with-shadow
+
+   Typical page content
@@ -0,0 +1,7 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/Introduction/BackendExample.png
+   :class: with-shadow
@@ -0,0 +1,9 @@
+.. =========================================================
+.. Automatically generated by the TYPO3 Screenshots project.
+.. https://github.com/TYPO3-Documentation/t3docs-screenshots
+.. =========================================================
+
+.. figure:: /Images/AutomaticScreenshots/TypoScript/ConstantEditor.png
+   :class: with-shadow
+
+   Include the Fluid Content Elements TypoScript file
--- a/Show More
+++ b/Show More