Mit fluid_styled_content, wie zum erstellen von custom content-Elemente in TYPO3 7.5 und 7 LTS?

Informationen Quelle: fluid_styled_slider auf Github

Diese Informationen sind auch hier erhältlich: https://usetypo3.com/custom-fsc-element.html

Die offiziellen Dokumente sind sowohl online als auch: https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/latest/

PageTSconfig

Machen unsere content-element erscheinen im wizard für neue content-Elemente, die wir hinzufügen müssen, um es 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

Nun müssen wir sagen, TYPO3, welche Felder im backend. Deshalb haben wir in der Verlängerung der tt_content TCA-Konfiguration.
Dieses Zeug ist nun getan und in den Ordner Configuration/TCA/Override. Nun fügen wir unsere neuen CType ersten (dies könnte auch geschehen, 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'
);

Nun legen wir fest, welche Felder zu zeigen für unsere 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,
             media
    '
];

TypoScript

Den neuen CType fs_slider muss ein rendering definition. Das ist ziemlich einfach:

tt_content {
    fs_slider < lib.fluidContent
    fs_slider {
        templateName = FluidStyledSlider
        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = media
            }
            20 = DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor
        }
    }
}

Den lib.fluidContent ist nicht viel mehr als die Initialisierung eines FLUIDCONTENT Objekt. Wir ändern Sie einfach den Namen der Vorlage
(stellen Sie sicher, dass mindestens fügen Sie Ihre Vorlage Pfad zu lib.fluidContent.templateRootPaths)
und angeben, welche dataProcessors wir sind gonna verwenden. Ach, dataProcessors.

DataProcessors

Diese sind PHP-Klassen, die die Daten vor der übergabe an das fluidtemplate. Sie können die Daten Bearbeiten, oder Dinge hinzufügen, zu
in der Vorlage. Die TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
zum Beispiel löst alle angeschlossenen media-Elemente für uns, so können wir auf die Daten der FileReference-Objekte in der Ansicht.
DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor ist ein custom-Prozessor zu veranschaulichen, wie dies funktioniert.

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

Jedoch DataProcessors sind optional.

Der Fluid-template -

Das Letzte Stück im puzzle ist die tatsächliche Vorlage, die Sie empfängt, die Daten verarbeitet, die von allen angegeben DataProcessors am Ende.
Dies ist Reine Flüssigkeit, wie wir Sie kennen (und lieben) es:

<html xmlns:f="http://xsd.helhum.io/ns/typo3/cms-fluid/master/ViewHelpers">
<div class="fluid-styled-slider" style="width: {slider.width}px; margin: auto">
    <f:for each="{files}" as="file">
        <figure class="fluid-styled-slider-item">
            <f:image image="{file}" height="{data.imageheight}" width="{data.imagewidth}" alt="{file.properties.alt}" title="{file.properties.title}"/>
            <f:if condition="{file.properties.description}">
                <figcaption>{file.properties.description}</figcaption>
            </f:if>
        </figure>
    </f:for>
</div>
</html>

Natürlich können wir verwenden, Layouts und Partials auch hier. Beachten Sie, wie {data} enthält die Zeile tt_content aus der gerenderten
content-element. {files} Hinzugefügt werden, indem Sie die TYPO3\CMS\Frontend\DataProcessing\FilesProcessor und enthält die beigefügte Medien
als geeignete Objekte. {slider.width} Hinzugefügt werden, indem Sie unsere eigenen DataProcessor.

Optional: Vorschau in der Seiten-Modul

Wir wollen wahrscheinlich irgendeine Art von Vorschau für unsere Redaktion in das page-Modul. Es gibt zwei wichtige Möglichkeiten, dies zu erreichen:

Fluid-template per PageTSconfig

Können wir einfach angeben, ein fluid-template gerendert werden als Vorschau im PageTSconfig:

web_layout.tt_content.preview.fs_slider = EXT:fluid_styled_slider/Resources/Private/Templates/Preview/FluidStyledSlider.html

Dieser Vorlage erhalten alle Felder der tt_content Reihe direkt. So {header} enthält die header {bodytext} enthält die
bodytext und so weiter.

tt_content_drawItem Haken

Wenn wir mehr tun wollen komplexe Dinge wie erste untergeordnete Datensätze behoben ist, können wir registrieren, um den tt_content_drawItem Haken
wie diese:

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['fluid_styled_slider']
    = \DanielGoerz\FluidStyledSlider\Hooks\FsSliderPreviewRenderer::class;

Unserer Klasse zu implementieren hat die \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') {
            if ($row['media']) {
                $itemContent .= '<h3>Fluid Styled Slider</h3>';
                $itemContent .= $parentObject->thumbCode($row, 'tt_content', 'media') . '<br />';
            }
            $drawItem = false;
        }
    }
}

Immer schreiben wir in $itemContent gerendert wird in der page-Modul in unserem content-element.