Download the PHP package danielgoerz/fluid-styled-slider without Composer
On this page you can find all versions of the php package danielgoerz/fluid-styled-slider. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download danielgoerz/fluid-styled-slider
More information about danielgoerz/fluid-styled-slider
Files in danielgoerz/fluid-styled-slider
Package fluid-styled-slider
Short Description A slider Content Element for TYPO3 CMS based on fluid_styled_content.
License GPL-2.0-or-later
Informations about the package fluid-styled-slider
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: https://usetypo3.com/custom-fsc-element.html
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
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
This extension adds a content element called fs_slider
to the system. The following steps are necessary to get it up and running:
PageTSconfig
To make our content element appear in the wizard for new content elements, we have to add it via PageTSconfig
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
):
Now we determine what fields to show for our CType:
TypoScript
The new CType fs_slider
needs a rendering definition. This is rather simple:
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
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.
However, DataProcessors are optional.
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:
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
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
We can simply specify a fluid template to be rendered as preview in PageTSconfig:
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
If we want to do more sophisticated stuff like getting child records resolved, we can register to the tt_content_drawItem
hook
like this:
Our class has to implement the \TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface
.
Whatever we write into $itemContent
will be rendered in the page module inside our content element.
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.