Как создать элементы пользовательского контента с Fluid_styled_content в TYPO3 7.5 и 7 LTS?

Источник информации: fluid_styled_slider на Github

Эта информация также доступна здесь: блог usetypo3

официальные документы доступны в Интернете. также.

PageTSconfig

Чтобы наш элемент контента отображался в мастере новых элементов контента, мы должны добавить его через 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)
}

ТСА

Теперь нам нужно сообщить TYPO3, какие поля показывать в бэкенде. Поэтому мы должны расширить конфигурацию TCA tt_content. Теперь все это делается в папке Configuration/TCA/Overrides/. Давайте сначала добавим наш новый CType (это также можно сделать в 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'
);

Теперь мы определяем, какие поля показывать для нашего 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
        '
];

ТипоСкрипт

Для нового CType fs_slider требуется определение рендеринга. Это довольно просто:

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

lib.fluidContent — это не более чем инициализация объекта FLUIDCONTENT. Мы просто меняем имя шаблона (убедитесь, что хотя бы добавили путь к вашему шаблону в lib.fluidContent.templateRootPaths) и указываем, какие процессоры данных мы будем использовать. Ах да, процессоры данных.

Обработчики данных

Это классы PHP, которые получают данные до того, как они будут переданы в FluidTemplate. Они могут манипулировать данными или добавлять элементы, которые будут присутствовать в шаблоне. Например, TYPO3\CMS\Frontend\DataProcessing\FilesProcessor разрешает для нас все прикрепленные элементы мультимедиа, поэтому мы можем получить доступ к объектам FileReference в представлении. DanielGoerz\FluidStyledSlider\DataProcessing\FluidStyledSliderProcessor — это специальный процессор, иллюстрирующий, как это работает.

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

Однако DataProcessors необязательны.

Жидкий шаблон

Последняя часть головоломки — это фактический шаблон, который в конечном итоге получает данные, обработанные всеми указанными обработчиками данных. Это обычная жидкость, какой мы ее знаем (и любим):

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

Конечно, здесь мы также можем использовать Layouts и Partials. Обратите внимание, что {data} содержит строку tt_content из отображаемого элемента содержимого. {files} добавляется TYPO3\CMS\Frontend\DataProcessing\FilesProcessor и содержит прикрепленные носители как соответствующие объекты. {slider.width} добавляется нашим собственным DataProcessor.

Необязательно: предварительный просмотр в модуле страницы

Вероятно, нам нужен предварительный просмотр для наших редакторов в модуле страницы. Для этого есть две примечательные возможности:

Мы можем просто указать гибкий шаблон для предварительного просмотра в PageTSconfig:

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

Этот шаблон получит все поля строки tt_content напрямую. Итак, {header} содержит заголовок, {bodytext} содержит основной текст и так далее.

Если мы хотим делать более сложные вещи, такие как разрешение дочерних записей, мы можем зарегистрироваться в хуке tt_content_drawItem следующим образом:

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

Наш класс должен реализовать \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;
        }
    }
}

Все, что мы пишем в $itemContent, будет отображаться в модуле страницы внутри нашего элемента контента.