[英]With fluid_styled_content, how to create custom content elements in TYPO3 7.5 and 7 LTS?
有人告訴我，在 TYPO3 7.5 中使用新的 fluid_styled_content 系統擴展為后端設置自定義的結構化內容元素是輕而易舉的。
在查看了sysext/fluid_styled_content和sysext/backend ，我自己也想不通。 任何提示？
資料來源： 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 ）並指定我們將使用的數據處理器。 哦對了，數據處理器。
這些是在將數據傳遞給流體模板之前獲取數據的 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;
}
但是，數據處理器是可選的。
拼圖的最后一塊是實際模板，它接收最終由所有指定的 DataProcessor 處理的數據。 正如我們所知（和喜愛）它是簡單的流體：
<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 的流體模板我們可以簡單地在 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都將在內容元素內的頁面模塊中呈現。
@Daniel
在TCA下的第一段：它必須是'Configuration / TCA / Overrides'而不是'Override'
如何更改標題標簽TYPO3 7 LTS fluid_styled_content
[英]How change the header labels TYPO3 7 LTS fluid_styled_content
Typo3 7：更改fluid_styled_content textmedia 視頻寬度
[英]Typo3 7: Change fluid_styled_content textmedia video width
圖像寬度取決於colPos（TYPO3 fluid_styled_content）
[英]Image width depending on colPos (TYPO3 fluid_styled_content)
TYPO3 8 Fluid_styled_content：在Image-partial中使用布局值
[英]TYPO3 8 Fluid_styled_content: use value of layout in Image-partial
TYPO3 在fluid_styled_content 之后無法找到打字稿模板的路徑
[英]not work a path to template of typoscript after fluid_styled_content by TYPO3
fluid_contentd_content中的fluidcontent中的allowedContentTypes
[英]allowedContentTypes in fluidcontent for fluid_styled_content
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.