Fluid
Styled
Content

TYPO3 UserGroup Cologne // July 20th, 2016 // denkwerk GmbH

Fluid Styled

Table of contents

How to build content elements in TYPO3 7.6

(and newer versions)

Fluid Styled Content

• Introduced with TYPO3 CMS 7.5
  (September 29th, 2015)
• Up to 400% better performance
  than with CSC
• Default content elements
• Custom content elements
• Parallel operation with CSC possible
• (nearly) smooth migration path
• And as expected:

What we need:

TypoScript

TCA

PageTS

XLIFF

Fluid

TypoScript

Override default content element templates

lib.fluidContent {
    templateRootPaths.10 = EXT:gks/Resources/Private/Templates/FluidStyledContent
    partialRootPaths.10 = EXT:gks/Resources/Private/Partials/FluidStyledContent
    layoutRootPaths.10 = EXT:gks/Resources/Private/Layouts/FluidStyledContent
}
                     

Build own content elements

tt_content {
    myContentElement < lib.fluidContent
    myContentElement {
        templateName = MyContentElement
    }
}
                    

TCA

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'CType',
    [
        'LLL:EXT:gks/Resources/Private/Language/locallang_be.xlf...
        'myContentElement',
        'content-image'
    ],
    'textmedia',
    'after'
);
                    

$GLOBALS['TCA']['tt_content']['types']['myContentElement'] = [
    'showitem' => '
        header, bodytext, media
    'columnsOverrides' => [
        'bodytext' => ['defaultExtras' => 'richtext:rte_transform[mode=ts_css]']
    ]
];
                    

PageTS

mod.wizards.newContentElement.wizardItems.common {
    elements {
    myContentElement {
        iconIdentifier = content-image
        title = LLL:EXT:gks/Resources/Private/Language/locallang_be.xlf...
        description = LLL:EXT:gks/Resources/Private/Language/locallang_be.xlf...
        tt_content_defValues {
            CType = myContentElement
        }
    }
}
                        

mod.web_layout.tt_content.preview.myContentElement =
    EXT:gks/Resources/Private/Templates/.../Preview/MyContentElement.html
                        

Let's skip

XLIFF

Fluid

First of all: it's Fluid!

The downside:

FSC gives you a simple PHP array with your data!

But there's help:

Data Processors

Default data processors

• CommaSeparatedValueProcessor
• DatabaseQueryProcessor
• FilesProcessor
• GalleryProcessor
• SplitProcessor

The most common use case

myContentElement < lib.fluidContent
myContentElement {
    templateName = MyContentElement
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
        10 {
            references.fieldName = media
        }
    }
}
                    

Do you love TypoScript?

Using the DatabaseQueryProcessor

myContentElement < lib.fluidContent
myContentElement {
    templateName = MyContentElement
    dataProcessing {
        20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        20 {
            table = pages
            pidInList = -1
            where.data = field:tx_gks_page
            where.intval = 1
            where.wrap = pages.uid=|
            languageField = sys_language_uid
            recursive = 99
            as = relatedPage
        }
    }
}
                    

Or do you prefer using you own domain repository?

Implementing your own DataProcessors

Implementing your own DataProcessor

class PageProcessor implements DataProcessorInterface
{
    /**
     * Returns page model for given identifier
     *
     * @param ContentObjectRenderer $cObj The data of the content element or page
     * @param array $contentObjectConfiguration The configuration of Content Object
     * @param array $processorConfiguration The configuration of this processor
     * @param array $processedData Key/value store of processed data
     * @return array the processed data as key/value store
     */
    public function process(
        ContentObjectRenderer $cObj,
        array $contentObjectConfiguration,
        array $processorConfiguration,
        array $processedData
    ) {
        $objectManager = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
            \TYPO3\CMS\Extbase\Object\ObjectManager::class
        );
        $repository = $objectManager->get(
            \Blog\Golb\Domain\Repository\PageRepository:class
        );
        $page = $repository->findByIdentifier($GLOBALS['TSFE']->id);
        $processedData['page'] = $page;

        return $processedData;
    }
}
                    

Nesting DataProcessors

myContentElement < lib.fluidContent
myCOntentElement {
    templateName = MyContentElement
    dataProcessing {
        20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        20 {
            table = pages
            pidInList = -1
            where.data = field:tx_gks_page
            where.intval = 1
            where.wrap = pages.uid=|
            languageField = sys_language_uid
            recursive = 99

            as = relatedPage

            dataProcessing {
                10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
                10 {
                    references.fieldName = media
                    as = image
            }
        }
    }
}
                    

One More Thing

"dataProcessing"
is a property
of the cObject
FLUIDTEMPLATE

What does this mean?

For Example:
Use DataProcessors for your page layouts

page = PAGE
page.10 = CASE
page.10 {
    key.data = levelfield:-2,backend_layout_next_level,slide
    key.override.field = backend_layout

    1 = FLUIDTEMPLATE
    1 {
        templateName = Default
        layoutRootPaths.10 = EXT:gks/Resources/Private/Layouts
        partialRootPaths.10 = EXT:gks/Resources/Private/Partials
        templateRootPaths.10 = EXT:gks/Resources/Private/Templates

        variables {
            backendLayout = TEXT
            backendLayout.value = Default
        }
        dataProcessing {
            10 = ZD\Gks\DataProcessing\PageProcessor
        }
    }

    pagets__HomePage < .1
    pagets__HomePage.variables.backendLayout.value = HomePage

    default < .1
}
                    

Demo?

Credits

Used images:

References: