danielgoerz/fluid-styled-slider

一个基于 fluid_styled_content 的 TYPO3 CMS 滑块内容元素。

维护者

详细信息

github.com/ervaude/fluid_styled_slider

源代码

问题

安装: 479

依赖: 0

建议者: 0

安全性: 0

星级: 29

关注者: 4

分支: 6

开放问题: 1

类型：typo3-cms-extension

2.0.0 2019-05-09 17:35 UTC

Requires

GPL-2.0-or-later 53e3512ecb3f57306dd1d542885946d482de1c4e

extensiontypo3fluid

This package is auto-updated.

Last update: 2024-09-10 05:25:56 UTC

README

fluid_styled_slider 是一个示例扩展，提供了创建基于系统扩展 fluid_styled_content (FSC) 的自定义内容元素所需的一切，适用于 TYPO3 CMS 8 和 9。

以下内容的更详细解释可以在以下链接找到： https://usetypo3.com/custom-fsc-element.html

系统需求

显然，FSC 需要在 TYPO3 中安装，这只能在版本 7.6 或更高版本中完成。扩展与 TYPO3 8LTS 和 TYPO3 9LTS 兼容。要检查与 TYPO3 7LTS 兼容的版本，请查看 1.x 标签。

安装

安装扩展并包含静态 TypoScript。

TypoScript 包含来自外部库的 JavaScript 和 CSS，可以通过在扩展文件夹中运行 yarn install 来安装。这不是一个好的做法，但对于像这样的示例扩展来说已经足够了。

基于 FSC 的内容元素组件

此扩展向系统添加了一个名为 fs_slider 的内容元素。要使它运行，需要以下步骤

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

TCA

现在我们需要告诉 TYPO3 在后端显示哪些字段。因此，我们必须扩展 tt_content TCA 配置。这些操作在 Configuration/TCA/Override 文件夹中完成。首先添加我们的新 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,
             assets
    '
];

TypoScript

新的 CType fs_slider 需要一个渲染定义。这很简单

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

lib.contentElement 不比初始化一个 FLUIDCONTENT 对象多。

请注意，在 TYPO3 8LTS 之前，lib.contentElement 被称为 lib.fluidContent！

我们只需更改模板名称（确保至少将您的模板路径添加到 lib.contentElement.templateRootPaths），并指定我们将使用哪些数据处理器。哦，对了，数据处理器。

数据处理器

这些是获取数据并将其传递给 fluidtemplate 之前所调用的 PHP 类。它们可以操纵数据或向模板中添加内容。例如，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;
    }

然而，数据处理器是可选的。

Fluid 模板

拼图中最后一块是接收所有指定数据处理器处理的数据的实际模板。这是我们熟悉（并且喜爱）的 plain fluid。

    <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <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>

当然，我们也可以在这里使用布局和部分。注意，{data} 包含从渲染的内容元素中渲染的 tt_content 行。{files} 由 TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 添加，并包含作为适当对象的附加媒体。{slider.width} 由我们自己的数据处理器添加。

可选：在页面模块中预览

我们可能希望在页面模块中为编辑器提供某种类型的预览。有两种值得注意的方法可以实现这一点

通过 PageTSconfig 使用 Fluid 模板

我们可以在 PageTSconfig 中简单地指定一个要作为预览渲染的 fluid 模板

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

此模板将直接接收tt_content行的所有字段。因此，{header}包含标题，{bodytext}包含正文内容，依此类推。

tt_content_drawItem钩子

如果我们想进行更复杂的事情，比如获取已解析的子记录，我们可以像这样注册到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') {
            $itemContent .= '<h3>Fluid Styled Slider</h3>';
            if ($row['assets']) {
                $itemContent .= $parentObject->thumbCode($row, 'tt_content', 'assets') . '<br />';
            }
            $drawItem = false;
        }
    }
}

无论我们写入$itemContent的什么内容，都会在我们内容元素内部的页面模块中渲染。

杂项

此扩展在JSFooterLibs中包含jQuery。如果您已经在网站上使用了jQuery，请在TypoScript中覆盖此内容，或将常量plugin.tx_fluidstyledslider.settings.includejQuery设置为0。