PHPackages danielgoerz/fluid-styled-slider - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. danielgoerz/fluid-styled-slider ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) danielgoerz/fluid-styled-slider =============================== A slider Content Element for TYPO3 CMS based on fluid\_styled\_content. 2.0.0(7y ago)294836[1 issues](https://github.com/ervaude/fluid_styled_slider/issues)GPL-2.0-or-laterPHP Since Oct 16Pushed 7y ago3 watchersCompare [ Source](https://github.com/ervaude/fluid_styled_slider)[ Packagist](https://packagist.org/packages/danielgoerz/fluid-styled-slider)[ RSS](/packages/danielgoerz-fluid-styled-slider/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)Dependencies (1)Versions (8)Used By (0) About this extension ==================== [](#about-this-extension) fluid\_styled\_slider is an example extension that provides everything to create a custom content element for TYPO3 CMS 8 and 9 based on the system extension fluid\_styled\_content (FSC). A more detailed explanation of the following can be found at: System Requirements ------------------- [](#system-requirements) Obviously FSC needs to be installed in TYPO3 which is only possible in version 7.6 or higher. The extension is compatible with TYPO3 8LTS and TYPO3 9LTS. For versions compatible with TYPO3 7LTS check out the 1.x Tags. Installation ------------ [](#installation) Install the extension and include the static TypoScript. **The TypoScript includes JavaScript and CSS from external libraries that can be installed by running `yarn install` in the extension folder. This is not considered a good practice but is sufficient for an example extension like this one.** Components of a content element based on FSC -------------------------------------------- [](#components-of-a-content-element-based-on-fsc) This extension adds a content element called `fs_slider` to the system. The following steps are necessary to get it up and running: ### PageTSconfig [](#pagetsconfig) To make our content element appear in the wizard for new content elements, we have to add it via PageTSconfig ``` mod.wizards.newContentElement.wizardItems.common { elements { fs_slider { iconIdentifier = content-image title = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title description = LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.description tt_content_defValues { CType = fs_slider } } } show := addToList(fs_slider) } ``` ### TCA [](#tca) Now we need to tell TYPO3 what fields to show in the backend. Therefore we have to extend the tt\_content TCA configuration. This stuff is done in the folder `Configuration/TCA/Override`. Let's add our new CType first (this could also be done in `ext_tables.php`): ``` \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem( 'tt_content', 'CType', [ 'LLL:EXT:fluid_styled_slider/Resources/Private/Language/locallang_be.xlf:wizard.title', 'fs_slider', 'content-image' ], 'textmedia', 'after' ); ``` Now we determine what fields to show for our CType: ``` $GLOBALS['TCA']['tt_content']['types']['fs_slider'] = [ 'showitem' => ' --palette--;' . $frontendLanguageFilePrefix . 'palette.general;general, --palette--;' . $languageFilePrefix . 'tt_content.palette.mediaAdjustments;mediaAdjustments, pi_flexform, --div--;' . $customLanguageFilePrefix . 'tca.tab.sliderElements, assets ' ]; ``` ### TypoScript [](#typoscript) The new CType `fs_slider` needs a rendering definition. This is rather simple: ``` tt_content { fs_slider < lib.contentElement fs_slider { templateName = FluidStyledSlider dataProcessing { 10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 10 { references.fieldName = assets } 20 = DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor } } } ``` The `lib.contentElement` is not much more than the initialization of a `FLUIDCONTENT` object. **Note that before TYPO3 8LTS `lib.contentElement` was called `lib.fluidContent`!** We just change the template name (make sure to at least add your template path to `lib.contentElement.templateRootPaths`) and specify which dataProcessors we are gonna use. Oh right, dataProcessors. ### DataProcessors [](#dataprocessors) Those are PHP classes that get the data before it is passed to the fluidtemplate. They can manipulate the data or add stuff to be present in the template. The `TYPO3\CMS\Frontend\DataProcessing\FilesProcessor`for instance resolves all attached media elements for us, so we can access the FileReference objects in the view. `DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor` is a custom processor to illustrate how this works. ``` class FluidStyledSliderProcessor implements DataProcessorInterface { /** * Process data for the CType "fs_slider" * * @param ContentObjectRenderer $cObj The content object renderer, which contains data of the content element * @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 (e.g. to be passed to a Fluid View) * @return array the processed data as key/value store * @throws ContentRenderingException */ public function process(ContentObjectRenderer $cObj, array $contentObjectConfiguration, array $processorConfiguration, array $processedData) { // Content of $processedData will be available in the template // It can be processed here to your needs. $processedData['slider']['width'] = 1000; return $processedData; } ``` However, DataProcessors are optional. ### The Fluid template [](#the-fluid-template) The last piece in the puzzle is the actual template that receives the data processed by all specified DataProcessors in the end. This is plain fluid as we know (and love) it: ``` {file.properties.description} ``` Of course we can use Layouts and Partials here as well. Note how `{data}` contains the tt\_content row from the rendered content element. `{files}` is added by the `TYPO3\CMS\Frontend\DataProcessing\FilesProcessor` and contains the attached media as proper objects. `{slider.width}` is added by our own DataProcessor. ### Optional: Preview in Page Module [](#optional-preview-in-page-module) We probably want some kind of preview for our editors in the page module. There are two notable possibilities to achieve this: #### Fluid template via PageTSconfig [](#fluid-template-via-pagetsconfig) We can simply specify a fluid template to be rendered as preview in PageTSconfig: ``` mod.web_layout.tt_content.preview.fs_slider = EXT:fluid_styled_slider/Resources/Private/Templates/Preview/FluidStyledSlider.html ``` This template will receive all fields of the tt\_content row directly. So `{header}` contains the header, `{bodytext}` contains the bodytext and so on. #### tt\_content\_drawItem Hook [](#tt_content_drawitem-hook) If we want to do more sophisticated stuff like getting child records resolved, we can register to the `tt_content_drawItem` hook like this: ``` $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['fluid_styled_slider'] = \DanielGoerz\FluidStyledSlider\Hooks\FsSliderPreviewRenderer::class; ``` Our class has to implement the `\TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface`. ``` class FsSliderPreviewRenderer implements PageLayoutViewDrawItemHookInterface { /** * Preprocesses the preview rendering of a content element of type "fs_slider" * * @param \TYPO3\CMS\Backend\View\PageLayoutView $parentObject Calling parent object * @param bool $drawItem Whether to draw the item using the default functionality * @param string $headerContent Header content * @param string $itemContent Item content * @param array $row Record row of tt_content * @return void */ public function preProcess(PageLayoutView &$parentObject, &$drawItem, &$headerContent, &$itemContent, array &$row) { if ($row['CType'] === 'fs_slider') { $itemContent .= 'Fluid Styled Slider'; if ($row['assets']) { $itemContent .= $parentObject->thumbCode($row, 'tt_content', 'assets') . ''; } $drawItem = false; } } } ``` Whatever we write into `$itemContent` will be rendered in the page module inside our content element. Miscellaneous ------------- [](#miscellaneous) This extension includes jQuery in `JSFooterLibs`. If you already have jQuery on your site, overwrite this in your TypoScript or set the constant `plugin.tx_fluidstyledslider.settings.includejQuery` to 0. ### Health Score 34 — LowBetter than 77% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity24 Limited adoption so far Community11 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~217 days Recently: every ~323 days Total 7 Last Release 2566d ago Major Versions 1.2.0 → 2.0.02019-05-09 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/7824856?v=4)[Daniel Goerz](/maintainers/ervaude)[@ervaude](https://github.com/ervaude) --- Top Contributors [![ervaude](https://avatars.githubusercontent.com/u/7824856?v=4)](https://github.com/ervaude "ervaude (14 commits)") --- Tags extensiontypo3fluid ### Embed Badge ![Health badge](/badges/danielgoerz-fluid-styled-slider/health.svg) ``` [![Health](https://phpackages.com/badges/danielgoerz-fluid-styled-slider/health.svg)](https://phpackages.com/packages/danielgoerz-fluid-styled-slider) ``` ### Alternatives [friendsoftypo3/tt-address Displays a list of addresses from an address table on the page. 431.7M38](/packages/friendsoftypo3-tt-address)[quellenform/t3x-iconpack Provides an iconpack-registry for custom iconpacks. 1542.7k25](/packages/quellenform-t3x-iconpack)[georgringer/faker Faker for TYPO3 165.1k](/packages/georgringer-faker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)