Urs*_*Urs 11 typo3 typo3-7.x fluid-styled-content
我被告知使用新的fluid_styled_content系统扩展为TYPO3 7.5中的Backend设置自定义的结构化内容元素是一件轻而易举的事.
看着在后sysext/fluid_styled_content和sysext/backend,我无法找出自己.任何提示？
Dan*_*iel 20
信息来源:Github上的fluid_styled_slider
这些信息也可在此处获得:https://usetypo3.com/custom-fsc-element.html
官方文档也在线:https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/latest/
要使我们的内容元素出现在新内容元素的向导中,我们必须通过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.
这些是在传递给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;
}
但是,DataProcessors是可选的.
拼图中的最后一部分是实际模板,它接收最终由所有指定的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>
当然,我们也可以在这里使用布局和部分.请注意如何{data}包含呈现的内容元素中的tt_content行.{files}由...添加TYPO3\CMS\Frontend\DataProcessing\FilesProcessor并包含附加的媒体作为适当的对象.{slider.width}由我们自己的DataProcessor添加.
我们可能希望在页面模块中为我们的编辑器进行某种预览.实现这一目标有两个显着的可能性:
通过PageTSconfig的流体模板我们可以简单地指定一个流体模板,在PageTSconfig中呈现为预览:
web_layout.tt_content.preview.fs_slider = EXT:fluid_styled_slider/Resources/Private/Templates/Preview/FluidStyledSlider.html
此模板将直接接收tt_content行的所有字段.所以{header}包含标题,{bodytext}包含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将在我们的内容元素中的页面模块中呈现.
| 归档时间： |
|
| 查看次数： |
13305 次 |
| 最近记录： |