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:

(nearly)

ALL FLUID

What we need:

TypoScript

TCA

PageTS

XLIFF

Fluid

TypoScript

Override default content element templates

/typo3/sysext/fluid_styled_content/Resources/Private/

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
    }
}
                    
EXT:gks/Resources/Private/Templates/FluidStyledContent/MyContentElement.html

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

 

New content element wizard


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
        }
    }
}
                        

 

Backend preview


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:

https://flic.kr/p/J94Py / https://flic.kr/p/oqa96H / https://flic.kr/p/8Vjjzs / https://flic.kr/p/6xsbxQ / hhttps://flic.kr/p/eHAePe / https://flic.kr/p/9xba7b / https://flic.kr/p/5byU3m / https://flic.kr/p/7dsbUa / https://flic.kr/p/CmDFc / https://flic.kr/p/fBHKmY / https://flic.kr/p/jHvgP / https://flic.kr/p/4m9aPd

 

References:

https://docs.typo3.org/typo3cms/extensions/core/Changelog/7.5/Feature-38732-Fluid-basedContentElementsIntroduced.html / https://docs.typo3.org/typo3cms/extensions/fluidcontent_core/ / http://de.slideshare.net/pk77/fluid-styled-content-in-typo3-76-lts / http://typo3worx.eu/2016/02/fluid-styled-content-next-generation-typo3-templating/ / https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html / http://blog.teamgeist-medien.de/2016/04/typo3-responsive-images-mit-fluid-styled-content-fsc.html