信息来源:Github 上的 fluid_styled_slider
这些信息也可以在这里找到:usetypo3 博客
官方文档 也在线上。
为了让我们的内容元素出现在新内容元素向导中,我们必须通过 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在后端显示哪些字段。因此,我们必须扩展tt_content TCA配置。
这些内容现在位于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
),并指定我们将使用哪些DataProcessors。对了,DataProcessors。
这些是在将数据传递给Fluid模板之前获取数据的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;
}
然而,DataProcessors是可选的。
拼图中的最后一块是接收所有指定DataProcessors处理的数据的实际模板。这是我们熟知(和喜爱)的纯Fluid模板:
<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>
当然,我们在这里也可以使用布局和部分页面。请注意,{data}
包含渲染内容元素中的 tt_content
行。 {files}
是通过 TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
添加的,包含附加的媒体对象。 {slider.width}
是由我们自己的 DataProcessor 添加的。
我们可能希望编辑人员在页面模块中有某种形式的预览。 有两种值得注意的方法可以实现此目的:
通过 PageTSconfig 中的 Fluid 模板我们可以简单地指定一个 Fluid 模板作为 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
hook:
$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
中写入什么内容,都将在页面模块中呈现在我们的内容元素内。lib.fluidContent
,请使用真实副本。 - pgampe