TYPO3 v15 dev-main snapshot ()

This commit is contained in:
2026-08-10 22:31:21 +02:00
commit be71cfa708
199 changed files with 4138 additions and 0 deletions
+1
View File
@@ -0,0 +1 @@
/vendor/
@@ -0,0 +1,81 @@
<?php
declare(strict_types=1);
/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/
namespace TYPO3\CMS\FluidStyledContent\ViewHelpers\Link;
use Psr\Http\Message\ServerRequestInterface;
use TYPO3\CMS\Core\Resource\FileInterface;
use TYPO3\CMS\Core\TypoScript\TypoScriptService;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
/**
* ViewHelper for creating a link for an image popup.
*
* ```
* <ce:link.clickEnlarge image="{image}" configuration="{settings.images.popup}"><img src=""></ce:link.clickEnlarge>
* ```
*
* @internal this is not part of TYPO3 Core API.
*/
final class ClickEnlargeViewHelper extends AbstractViewHelper
{
/**
* @var bool
*/
protected $escapeOutput = false;
public function __construct(
private readonly TypoScriptService $typoScriptService,
) {}
public function initializeArguments(): void
{
$this->registerArgument('image', FileInterface::class, 'The original image file', true);
$this->registerArgument(
'configuration',
'array',
'TypoScript properties for the "imageLinkWrap" function',
true
);
}
public function render(): string
{
/** @var FileInterface $image */
$image = $this->arguments['image'];
$request = $this->renderingContext->getAttribute(ServerRequestInterface::class);
$contentObjectRenderer = GeneralUtility::makeInstance(ContentObjectRenderer::class);
$contentObjectRenderer->setRequest($request);
$contentObjectRenderer->start($request->getAttribute('frontend.page.information')->getPageRecord(), 'pages');
$contentObjectRenderer->setCurrentFile($image);
$objDataBackup = null;
if ($this->renderingContext->getVariableProvider()->exists('data')) {
$objDataBackup = $contentObjectRenderer->data;
$contentObjectRenderer->data = $this->renderingContext->getVariableProvider()->get('data');
}
$configuration = $this->typoScriptService->convertPlainArrayToTypoScriptArray($this->arguments['configuration']);
$content = $this->renderChildren();
$configuration['enable'] = true;
$result = $contentObjectRenderer->imageLinkWrap((string)$content, $image, $configuration);
if ($objDataBackup) {
$contentObjectRenderer->data = $objDataBackup;
}
return $result;
}
}
+8
View File
@@ -0,0 +1,8 @@
services:
_defaults:
autowire: true
autoconfigure: true
public: false
TYPO3\CMS\FluidStyledContent\:
resource: '../Classes/*'
@@ -0,0 +1 @@
name: typo3/fluid-styled-content
@@ -0,0 +1,152 @@
<?xml version="1.0" encoding="UTF-8"?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file source-language="en" datatype="plaintext" original="EXT:fluid_styled_content/Configuration/Sets/FluidStyledContent/labels.xlf" date="2024-09-05T08:00:00Z" product-name="fluid_styled_content">
<header/>
<body>
<trans-unit id="label">
<source>Fluid Styled Content</source>
</trans-unit>
<trans-unit id="categories.fsc">
<source>Fluid Styled Content</source>
</trans-unit>
<trans-unit id="categories.fsc.templates">
<source>Templates</source>
</trans-unit>
<trans-unit id="categories.fsc.content">
<source>Content Elements</source>
</trans-unit>
<trans-unit id="settings.styles.content.defaultHeaderType">
<source>Default Header type</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.defaultHeaderType">
<source>Enter the number of the header layout to be used by default</source>
</trans-unit>
<trans-unit id="settings.styles.content.shortcut.tables">
<source>List of accepted tables</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.lazyLoading">
<source>Default settings for browser-native image lazy loading</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.image.lazyLoading">
<source>Can be `lazy` (browsers could choose to load images later), `eager` (load images right away) or `auto` (browser will determine whether the image should be lazy loaded or not)</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.lazyLoading.enum.lazy">
<source>Lazy</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.lazyLoading.enum.eager">
<source>Eager</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.lazyLoading.enum.auto">
<source>Auto</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.imageDecoding">
<source>Default settings for an image decoding hint to the browser</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.image.imageDecoding">
<source>Can be `sync` (synchronously for atomic presentation with other content), `async` (asynchronously to avoid delaying presentation of other content), `auto` (no preference in decoding mode) or an empty value to omit the usage of the decoding attribute (same as `auto`)</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.imageDecoding.enum.sync">
<source>Sync</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.imageDecoding.enum.async">
<source>Asynchronous</source>
</trans-unit>
<trans-unit id="settings.styles.content.image.imageDecoding.enum.auto">
<source>Auto</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.maxW">
<source>Max Image/Media Width</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.maxW">
<source>This indicates that maximum number of pixels (width) a block of media elements inserted as content is allowed to consume</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.maxWInText">
<source>Max Image/Media Width (Text)</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.maxWInText">
<source>Same as above, but this is the maximum width when text is wrapped around an block of media elements. Default is 50% of the normal Max Media Item Width</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.columnSpacing">
<source>Advanced, Column space</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.columnSpacing">
<source>Horizontal distance between media elements in a block in content elements of type "Media &amp; Images". If you change this manually in your CSS, you need to adjust this setting accordingly</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.rowSpacing">
<source>Advanced, Row space</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.rowSpacing">
<source>Vertical distance after each media elements row in content elements of type "Text &amp; Media". If you change this manually in your CSS, you need to adjust this setting accordingly</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.textMargin">
<source>Advanced, Margin to text</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.textMargin">
<source>Horizontal distance between an imageblock and text in content elements of type "Text &amp; Images"</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.borderColor">
<source>Media element border, color</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.borderColor">
<source>Bordercolor of media elements in content elements when "Border"-option for an element is set</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.borderWidth">
<source>Media element border, thickness</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.borderWidth">
<source>Thickness of border around media elements in content elements when "Border"-option for element is set</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.borderPadding">
<source>Media element border, padding</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.borderPadding">
<source>Padding left and right to the media element, around the border</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.linkWrap.width">
<source>Click-enlarge Media Width</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.linkWrap.width">
<source>This specifies the width of the enlarged media element when click-enlarge is enabled</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.linkWrap.height">
<source>Click-enlarge Media Height</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.linkWrap.height">
<source>This specifies the height of the enlarged media element when click-enlarge is enabled</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.linkWrap.newWindow">
<source>Advanced, New window</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.linkWrap.newWindow">
<source>If set, every click-enlarged media element will open in it's own popup window and not the current popup window (which may have a wrong size for the media element to fit in)</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.linkWrap.lightboxEnabled">
<source>Lightbox click-enlarge rendering</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.linkWrap.lightboxEnabled">
<source>Whether media elements with click-enlarge checked should be rendered lightbox-compliant</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.linkWrap.lightboxCssClass">
<source>Lightbox CSS class</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.linkWrap.lightboxCssClass">
<source>Which CSS class to use for lightbox links (only applicable if lightbox rendering is enabled)</source>
</trans-unit>
<trans-unit id="settings.styles.content.textmedia.linkWrap.lightboxRelAttribute">
<source>Lightbox rel="" attribute</source>
</trans-unit>
<trans-unit id="settings.description.styles.content.textmedia.linkWrap.lightboxRelAttribute">
<source>Which `rel=""` attribute to use for lightbox links (only applicable if lightbox rendering is enabled)</source>
</trans-unit>
<trans-unit id="settings.styles.templates.templateRootPath">
<source>Path of Fluid Templates for all defined content elements</source>
</trans-unit>
<trans-unit id="settings.styles.templates.partialRootPath">
<source>Path of Fluid Partials for all defined content elements</source>
</trans-unit>
<trans-unit id="settings.styles.templates.layoutRootPath">
<source>Path of Fluid Layouts for all defined content elements</source>
</trans-unit>
</body>
</file>
</xliff>
@@ -0,0 +1,100 @@
categories:
fsc: ~
fsc.templates:
parent: fsc
fsc.content:
parent: fsc
settings:
styles.content.defaultHeaderType:
default: 2
type: int
category: fsc.content
styles.content.shortcut.tables:
default: tt_content
type: string
category: fsc.content
styles.content.image.lazyLoading:
default: lazy
type: string
enum:
- lazy
- eager
- auto
category: fsc.content
styles.content.image.imageDecoding:
default: ''
type: string
enum:
- sync
- async
- auto
category: fsc.content
styles.content.textmedia.maxW:
default: 600
type: int
category: fsc.content
styles.content.textmedia.maxWInText:
default: 300
type: int
category: fsc.content
styles.content.textmedia.columnSpacing:
default: 10
type: int
category: fsc.content
styles.content.textmedia.rowSpacing:
default: 10
type: int
category: fsc.content
styles.content.textmedia.textMargin:
default: 10
type: int
category: fsc.content
styles.content.textmedia.borderColor:
default: '#000000'
type: color
category: fsc.content
styles.content.textmedia.borderWidth:
default: 2
type: int
category: fsc.content
styles.content.textmedia.borderPadding:
default: 0
type: int
category: fsc.content
styles.content.textmedia.linkWrap.width:
default: 800m
type: string
category: fsc.content
styles.content.textmedia.linkWrap.height:
default: 600m
type: string
category: fsc.content
styles.content.textmedia.linkWrap.newWindow:
default: false
type: bool
category: fsc.content
styles.content.textmedia.linkWrap.lightboxEnabled:
default: false
type: bool
category: fsc.content
styles.content.textmedia.linkWrap.lightboxCssClass:
default: lightbox
type: string
category: fsc.content
styles.content.textmedia.linkWrap.lightboxRelAttribute:
default: 'lightbox[{field:uid}]'
type: string
category: fsc.content
styles.templates.templateRootPath:
default: ''
type: string
category: fsc.templates
styles.templates.partialRootPath:
default: ''
type: string
category: fsc.templates
styles.templates.layoutRootPath:
default: ''
type: string
category: fsc.templates
@@ -0,0 +1 @@
@import 'EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript'
@@ -0,0 +1,4 @@
name: typo3/fluid-styled-content-css
label: Fluid Styled Content CSS
dependencies:
- typo3/fluid-styled-content
@@ -0,0 +1 @@
@import 'EXT:fluid_styled_content/Configuration/TypoScript/Styling/setup.typoscript'
@@ -0,0 +1,14 @@
<?php
defined('TYPO3') or die();
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
'fluid_styled_content',
'Configuration/TypoScript/',
'Fluid Content Elements'
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
'fluid_styled_content',
'Configuration/TypoScript/Styling/',
'Fluid Content Elements CSS (optional)'
);
@@ -0,0 +1,31 @@
# Bullet List:
# A single bullet list.
#
# CType: bullets
tt_content.bullets =< lib.contentElement
tt_content.bullets {
templateName = Bullets
dataProcessing {
10 = split
10 {
if {
value = 2
isLessThan.field = bullets_type
}
fieldName = bodytext
removeEmptyEntries = 1
as = bullets
}
20 = comma-separated-value
20 {
fieldName = bodytext
if {
value = 2
equals.field = bullets_type
}
fieldDelimiter = |
as = bullets
}
}
}
@@ -0,0 +1,9 @@
# Divider:
# This element inserts a visual divider, which is by default a horizontal line.
#
# CType: div
tt_content.div =< lib.contentElement
tt_content.div {
templateName = Div
}
@@ -0,0 +1,9 @@
# Header Only:
# Adds a header only.
#
# CType: header
tt_content.header =< lib.contentElement
tt_content.header {
templateName = Header
}
@@ -0,0 +1,9 @@
# Plain HTML:
# With this element you can output raw HTML code on the page.
#
# CType: html
tt_content.html =< lib.contentElement
tt_content.html {
templateName = Html
}
@@ -0,0 +1,23 @@
# Image:
# ...
#
# CType: image
tt_content.image =< lib.contentElement
tt_content.image {
templateName = Image
dataProcessing {
10 = files
10 {
references.fieldName = image
}
20 = gallery
20 {
maxGalleryWidth = {$styles.content.textmedia.maxW}
maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
columnSpacing = {$styles.content.textmedia.columnSpacing}
borderWidth = {$styles.content.textmedia.borderWidth}
borderPadding = {$styles.content.textmedia.borderPadding}
}
}
}
@@ -0,0 +1,22 @@
# Menu of subpages of selected pages including abstracts:
# ...
#
# CType: menu_abstract
tt_content.menu_abstract =< lib.contentElement
tt_content.menu_abstract {
templateName = MenuAbstract
dataProcessing {
10 = menu
10 {
special = directory
special.value.field = pages
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,30 @@
# Content elements for selected categories:
# ...
#
# CType: menu_categorized_content
tt_content.menu_categorized_content =< lib.contentElement
tt_content.menu_categorized_content {
templateName = MenuCategorizedContent
dataProcessing {
10 = database-query
10 {
table = tt_content
selectFields = DISTINCT {#tt_content}.*
pidInList.data = leveluid : 0
recursive = 99
join.data = field:selected_categories
join.wrap = {#sys_category_record_mm} ON uid = {#sys_category_record_mm}.{#uid_foreign} AND {#sys_category_record_mm}.{#uid_local} IN(|)
where.data = field:category_field
where.wrap = {#tablenames}='tt_content' and {#fieldname}='|'
orderBy = tt_content.sorting
as = content
dataProcessing {
10 = files
10 {
references.fieldName = image
}
}
}
}
}
@@ -0,0 +1,27 @@
# Pages for selected categories:
# ...
#
# CType: menu_categorized_pages
tt_content.menu_categorized_pages =< lib.contentElement
tt_content.menu_categorized_pages {
templateName = MenuCategorizedPages
dataProcessing {
10 = menu
10 {
special = categories
special {
value.field = selected_categories
relation.field = category_field
sorting = title
order = asc
}
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,22 @@
# Menu of selected pages:
# ...
#
# CType: menu_pages
tt_content.menu_pages =< lib.contentElement
tt_content.menu_pages {
templateName = MenuPages
dataProcessing {
10 = menu
10 {
special = list
special.value.field = pages
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,26 @@
# Recently updated pages:
# ...
#
# CType: menu_recently_updated
tt_content.menu_recently_updated =< lib.contentElement
tt_content.menu_recently_updated {
templateName = MenuRecentlyUpdated
dataProcessing {
10 = menu
10 {
special = updated
special {
value.field = pages
maxAge = 3600*24*7
excludeNoSearchPages = 1
}
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,26 @@
# Related pages (based on keywords):
# ...
#
# CType: menu_related_pages
tt_content.menu_related_pages =< lib.contentElement
tt_content.menu_related_pages {
templateName = MenuRelatedPages
dataProcessing {
10 = menu
10 {
special = keywords
special {
value.field = pages
excludeNoSearchPages = 1
}
alternativeSortingField = title
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,57 @@
# Section index (page content marked for section menus):
# ...
#
# CType: menu_section
tt_content.menu_section =< lib.contentElement
tt_content.menu_section {
templateName = MenuSection
dataProcessing {
10 = menu
10 {
// Always activate includeNotInMenu for a section menu of the current page
includeNotInMenu.override = 1
includeNotInMenu.override.if.isFalse.field = pages
special = list
special {
value {
field = pages
override {
data = page:uid
if {
isFalse.field = pages
}
// Currrent page uses content of another page
override {
data = page:content_from_pid
if {
isTrue.data = page:content_from_pid
}
}
}
}
}
dataProcessing {
10 = files
10 {
references.fieldName = media
}
20 = database-query
20 {
table = tt_content
pidInList.field = uid
as = content
where = {#sectionIndex} = 1
orderBy = sorting
dataProcessing {
10 = files
10 {
references.fieldName = image
}
}
}
}
}
}
}
@@ -0,0 +1,36 @@
# Menu of subpages of selected pages including sections:
# ...
#
# CType: menu_section_pages
tt_content.menu_section_pages =< lib.contentElement
tt_content.menu_section_pages {
templateName = MenuSectionPages
dataProcessing {
10 = menu
10 {
special = directory
special.value.field = pages
dataProcessing {
10 = files
10 {
references.fieldName = media
}
20 = database-query
20 {
table = tt_content
pidInList.field = uid
where = {#sectionIndex} = 1
orderBy = sorting
as = content
dataProcessing {
10 = files
10 {
references.fieldName = image
}
}
}
}
}
}
}
@@ -0,0 +1,21 @@
# Sitemap:
# ...
#
# CType: menu_sitemap
tt_content.menu_sitemap =< lib.contentElement
tt_content.menu_sitemap {
templateName = MenuSitemap
dataProcessing {
10 = menu
10 {
levels = 7
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,23 @@
# Sitemaps of selected pages:
# ...
#
# CType: menu_sitemap_pages
tt_content.menu_sitemap_pages =< lib.contentElement
tt_content.menu_sitemap_pages {
templateName = MenuSitemapPages
dataProcessing {
10 = menu
10 {
special = directory
special.value.field = pages
levels = 7
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,22 @@
# Menu of subpages of selected pages:
# ...
#
# CType: menu_subpages
tt_content.menu_subpages =< lib.contentElement
tt_content.menu_subpages {
templateName = MenuSubpages
dataProcessing {
10 = menu
10 {
special = directory
special.value.field = pages
dataProcessing {
10 = files
10 {
references.fieldName = media
}
}
}
}
}
@@ -0,0 +1,16 @@
# Insert records:
# This element embeds other content elements.
#
# CType: shortcut
tt_content.shortcut =< lib.contentElement
tt_content.shortcut {
templateName = Shortcut
# Keep this, since the "conf" option can be used
variables.shortcuts = RECORDS
variables.shortcuts {
source.field = records
tables = {$styles.content.shortcut.tables}
}
}
@@ -0,0 +1,32 @@
# Table:
# A simple table.
#
# CType: table
tt_content.table =< lib.contentElement
tt_content.table {
templateName = Table
dataProcessing {
10 = comma-separated-value
10 {
fieldName = bodytext
fieldDelimiter.char.cObject = TEXT
fieldDelimiter.char.cObject {
field = table_delimiter
}
fieldEnclosure.char.cObject = TEXT
fieldEnclosure.char.cObject {
field = table_enclosure
}
fieldEnclosure {
if {
value = 0
equals.field = table_enclosure
negate = 1
}
}
maximumColumns.field = cols
as = table
}
}
}
@@ -0,0 +1,9 @@
# Regular Text Element:
# A regular text element with header and bodytext fields.
#
# CType: text
tt_content.text =< lib.contentElement
tt_content.text {
templateName = Text
}
@@ -0,0 +1,23 @@
# Text & Media:
# Any number of media wrapped right around a regular text element.
#
# CType: textmedia
tt_content.textmedia =< lib.contentElement
tt_content.textmedia {
templateName = Textmedia
dataProcessing {
10 = files
10 {
references.fieldName = assets
}
20 = gallery
20 {
maxGalleryWidth = {$styles.content.textmedia.maxW}
maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
columnSpacing = {$styles.content.textmedia.columnSpacing}
borderWidth = {$styles.content.textmedia.borderWidth}
borderPadding = {$styles.content.textmedia.borderPadding}
}
}
}
@@ -0,0 +1,23 @@
# Text and Images:
# Text with images.
#
# CType: textpic
tt_content.textpic =< lib.contentElement
tt_content.textpic {
templateName = Textpic
dataProcessing {
10 = files
10 {
references.fieldName = image
}
20 = gallery
20 {
maxGalleryWidth = {$styles.content.textmedia.maxW}
maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
columnSpacing = {$styles.content.textmedia.columnSpacing}
borderWidth = {$styles.content.textmedia.borderWidth}
borderPadding = {$styles.content.textmedia.borderPadding}
}
}
}
@@ -0,0 +1,18 @@
# File Links:
# Makes a list of files for download.
#
# CType: uploads
tt_content.uploads =< lib.contentElement
tt_content.uploads {
templateName = Uploads
dataProcessing {
10 = files
10 {
references.fieldName = media
collections.field = file_collections
sorting.field = filelink_sorting
sorting.direction.field = filelink_sorting_direction
}
}
}
@@ -0,0 +1,46 @@
# Default configuration for content elements which are using FLUIDTEMPLATE directly
lib.contentElement >
lib.contentElement = FLUIDTEMPLATE
lib.contentElement {
templateName = Default
templateRootPaths {
0 = EXT:fluid_styled_content/Resources/Private/Templates/
10 = {$styles.templates.templateRootPath}
}
partialRootPaths {
0 = EXT:fluid_styled_content/Resources/Private/Partials/
10 = {$styles.templates.partialRootPath}
}
layoutRootPaths {
0 = EXT:fluid_styled_content/Resources/Private/Layouts/
10 = {$styles.templates.layoutRootPath}
}
settings {
defaultHeaderType = {$styles.content.defaultHeaderType}
media {
lazyLoading = {$styles.content.image.lazyLoading}
imageDecoding = {$styles.content.image.imageDecoding}
popup {
bodyTag = <body style="margin:0; background:#fff;">
wrap = <a href="javascript:close();"> | </a>
width = {$styles.content.textmedia.linkWrap.width}
height = {$styles.content.textmedia.linkWrap.height}
crop.data = file:current:crop
JSwindow = 1
JSwindow {
newWindow = {$styles.content.textmedia.linkWrap.newWindow}
if.isFalse = {$styles.content.textmedia.linkWrap.lightboxEnabled}
}
directImageLink = {$styles.content.textmedia.linkWrap.lightboxEnabled}
linkParams.ATagParams.dataWrap = class="{$styles.content.textmedia.linkWrap.lightboxCssClass}" rel="{$styles.content.textmedia.linkWrap.lightboxRelAttribute}"
}
additionalConfig {
no-cookie = 1
api = 0
}
}
}
dataProcessing {
1770716912 = record-transformation
}
}
@@ -0,0 +1,80 @@
plugin.tx_frontend._CSS_DEFAULT_STYLE (
.ce-align-left { text-align: left; }
.ce-align-center { text-align: center; }
.ce-align-right { text-align: right; }
.ce-table td, .ce-table th { vertical-align: top; }
.ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; }
.ce-left .ce-gallery, .ce-column { float: left; }
.ce-center .ce-outer { position: relative; float: right; right: 50%; }
.ce-center .ce-inner { position: relative; float: right; right: -50%; }
.ce-right .ce-gallery { float: right; }
.ce-gallery figure { display: table; margin: 0; }
.ce-gallery figcaption { display: table-caption; caption-side: bottom; }
.ce-gallery img { display: block; }
.ce-gallery iframe { border-width: 0; }
.ce-border img,
.ce-border iframe {
border: {$styles.content.textmedia.borderWidth}px solid {$styles.content.textmedia.borderColor};
padding: {$styles.content.textmedia.borderPadding}px;
}
.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
margin-bottom: {$styles.content.textmedia.textMargin}px;
}
.ce-image .ce-gallery { margin-bottom: 0; }
.ce-intext.ce-right .ce-gallery { margin-left: {$styles.content.textmedia.textMargin}px; }
.ce-intext.ce-left .ce-gallery { margin-right: {$styles.content.textmedia.textMargin}px; }
.ce-below .ce-gallery { margin-top: {$styles.content.textmedia.textMargin}px; }
.ce-column { margin-right: {$styles.content.textmedia.columnSpacing}px; }
.ce-column:last-child { margin-right: 0; }
.ce-row { margin-bottom: {$styles.content.textmedia.rowSpacing}px; }
.ce-row:last-child { margin-bottom: 0; }
.ce-above .ce-bodytext { clear: both; }
.ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; }
/* Headline */
.ce-headline-left { text-align: left; }
.ce-headline-center { text-align: center; }
.ce-headline-right { text-align: right; }
/* Uploads */
.ce-uploads { margin: 0; padding: 0; }
.ce-uploads li { list-style: none outside none; margin: 1em 0; }
.ce-uploads img { float: left; padding-right: 1em; vertical-align: top; }
.ce-uploads span { display: block; }
/* 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; }
/* Space */
.frame-space-before-extra-small { margin-top: 1em; }
.frame-space-before-small { margin-top: 2em; }
.frame-space-before-medium { margin-top: 3em; }
.frame-space-before-large { margin-top: 4em; }
.frame-space-before-extra-large { margin-top: 5em; }
.frame-space-after-extra-small { margin-bottom: 1em; }
.frame-space-after-small { margin-bottom: 2em; }
.frame-space-after-medium { margin-bottom: 3em; }
.frame-space-after-large { margin-bottom: 4em; }
.frame-space-after-extra-large { margin-bottom: 5em; }
/* Frame */
.frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; }
.frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; }
.frame-indent { margin-left: 15%; margin-right: 15%; }
.frame-indent-left { margin-left: 33%; }
.frame-indent-right { margin-right: 33%; }
)
@@ -0,0 +1,56 @@
styles.templates {
# cat=content/templates/b1; type=string; label= Path of Fluid Templates for all defined content elements
templateRootPath =
# cat=content/templates/b2; type=string; label= Path of Fluid Partials for all defined content elements
partialRootPath =
# cat=content/templates/b3; type=string; label= Path of Fluid Layouts for all defined content elements
layoutRootPath =
}
styles.content {
# cat=content/cHeader/h0; type=int[1-5]; label=Default Header type: Enter the number of the header layout to be used by default
defaultHeaderType = 2
# cat=content/cShortcut/t0; type=string; label=List of accepted tables
shortcut.tables = tt_content
# cat=content/cImage/a0; type=options[lazy,eager,auto,]; label=Default settings for browser-native image lazy loading: Can be "lazy" (browsers could choose to load images later), "eager" (load images right away) or "auto" (browser will determine whether the image should be lazy loaded or not)
image.lazyLoading = lazy
# cat=content/cImage/a1; type=options[sync,async,auto,]; label=Default settings for an image decoding hint to the browser: Can be "sync" (synchronously for atomic presentation with other content), "async" (asynchronously to avoid delaying presentation of other content), "auto" (no preference in decoding mode) or an empty value to omit the usage of the decoding attribute (same as "auto")
image.imageDecoding =
textmedia {
# cat=content/cTextmedia/b1; type=int+; label= Max Image/Media Width: This indicates that maximum number of pixels (width) a block of media elements inserted as content is allowed to consume
maxW = 600
# cat=content/cTextmedia/b2; type=int+; label= Max Image/Media Width (Text): Same as above, but this is the maximum width when text is wrapped around an block of media elements. Default is 50% of the normal Max Media Item Width
maxWInText = 300
# cat=content/cTextmedia/g1; type=int[0-100]; label= Advanced, Column space: Horizontal distance between media elements in a block in content elements of type "Media & Images". If you change this manually in your CSS, you need to adjust this setting accordingly
columnSpacing = 10
# cat=content/cTextmedia/g2; type=int[0-100]; label= Advanced, Row space: Vertical distance after each media elements row in content elements of type ""Text & Media". If you change this manually in your CSS, you need to adjust this setting accordingly
rowSpacing = 10
# cat=content/cTextmedia/g3; type=int[0-100]; label= Advanced, Margin to text: Horizontal distance between an imageblock and text in content elements of type "Text & Images"
textMargin = 10
# cat=content/cTextmedia/i1; type=color; label= Media element border, color: Bordercolor of media elements in content elements when "Border"-option for an element is set
borderColor = #000000
# cat=content/cTextmedia/i2; type=int[0-100]; label= Media element border, thickness: Thickness of border around media elements in content elements when "Border"-option for element is set
borderWidth = 2
# cat=content/cTextmedia/i3; type=int+; label= Media element border, padding: Padding left and right to the media element, around the border
borderPadding = 0
# cat=content/cTextmedia/c1; type=string; label= Click-enlarge Media Width: This specifies the width of the enlarged media element when click-enlarge is enabled
linkWrap.width = 800m
# cat=content/cTextmedia/c2; type=string; label= Click-enlarge Media Height: This specifies the height of the enlarged media element when click-enlarge is enabled
linkWrap.height = 600m
# cat=content/cTextmedia/c3; type=boolean; label= Advanced, New window: If set, every click-enlarged media element will open in it's own popup window and not the current popup window (which may have a wrong size for the media element to fit in)
linkWrap.newWindow = 0
# cat=content/cTextmedia/c4; type=boolean; label= Lightbox click-enlarge rendering: Whether media elements with click-enlarge checked should be rendered lightbox-compliant
linkWrap.lightboxEnabled = 0
# cat=content/cTextmedia/c5; type=string; label= Lightbox CSS class: Which CSS class to use for lightbox links (only applicable if lightbox rendering is enabled)
linkWrap.lightboxCssClass = lightbox
# cat=content/cTextmedia/c6; type=string; label= Lightbox rel="" attribute: Which rel="" attribute to use for lightbox links (only applicable if lightbox rendering is enabled)
linkWrap.lightboxRelAttribute = lightbox[{field:uid}]
}
}
+28
View File
@@ -0,0 +1,28 @@
# Include setup
@import './Helper/ContentElement.typoscript'
# Typical content elements
@import './ContentElement/Bullets.typoscript'
@import './ContentElement/Div.typoscript'
@import './ContentElement/Header.typoscript'
@import './ContentElement/Html.typoscript'
@import './ContentElement/Image.typoscript'
@import './ContentElement/Shortcut.typoscript'
@import './ContentElement/Table.typoscript'
@import './ContentElement/Text.typoscript'
@import './ContentElement/Textmedia.typoscript'
@import './ContentElement/Textpic.typoscript'
@import './ContentElement/Uploads.typoscript'
# Menu content elements
@import './ContentElement/MenuAbstract.typoscript'
@import './ContentElement/MenuCategorizedContent.typoscript'
@import './ContentElement/MenuCategorizedPages.typoscript'
@import './ContentElement/MenuPages.typoscript'
@import './ContentElement/MenuSubpages.typoscript'
@import './ContentElement/MenuSection.typoscript'
@import './ContentElement/MenuSectionPages.typoscript'
@import './ContentElement/MenuRecentlyUpdated.typoscript'
@import './ContentElement/MenuRelatedPages.typoscript'
@import './ContentElement/MenuSitemap.typoscript'
@import './ContentElement/MenuSitemapPages.typoscript'
@@ -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.
+30
View File
@@ -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.
+116
View File
@@ -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>`.
+18
View File
@@ -0,0 +1,18 @@
.. include:: /Includes.rst.txt
.. _first_steps:
===========
First steps
===========
.. toctree::
:maxdepth: 5
:titlesonly:
:glob:
SiteSets
DefaultTemplate
DisplayContent
+65
View File
@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

@@ -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"
Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

@@ -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`
Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

@@ -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`
Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

@@ -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`
Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

@@ -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`
Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

@@ -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"
Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

@@ -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`
Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

@@ -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
Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Some files were not shown because too many files have changed in this diff Show More