TYPO3 8.7.8 自定义内容元素在后端具有自定义字段

Question

我已经搜索了很长时间，但找不到我要找的东西。

我创建了两个自定义内容元素：parallax_content 和 bg_image。

暂时在后端我有一个标准文本媒体元素的字段，其代码如下（来自tt_content）：

array('showitem' => ' 
  --palette--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.general;
  general,
  --palette--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.header;
  header,
  rowDescription,
  bodytext;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:bodytext_formlabel,
  --div--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.media,
  assets,
  --palette--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.imagelinks;
  imagelinks,
  --div--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
  layout;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:layout_formlabel,
  --palette--;
  LLL:EXT:fluid_styled_content/Resources/Private/Language/Database.xlf:tt_content.palette.mediaAdjustments;mediaAdjustments,
  --palette--;
  LLL:EXT:fluid_styled_content/Resources/Private/Language/Database.xlf:tt_content.palette.gallerySettings;
  gallerySettings,
  --palette--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.appearanceLinks;appearanceLinks,
  --div--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.access,
  hidden;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:field.default.hidden,
  --palette--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.access;
  access,
  --div--;
  LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.extended,
  --div--;
  LLL:EXT:lang/locallang_tca.xlf:sys_category.tabs.category,
  categories',

  'columnsOverrides' => array(
    'bodytext' => array(
      'defaultExtras' => 'richtext:rte_transform[mode=ts_css]'
    )
  )
)

对于我的元素 parallax_content，我需要以下字段：

• 标题
• “插入徽标”复选框
• 正文
• 图像选择字段

对于 image_bg 我需要：

• 图像选择字段
• 包含 2 个项目的下拉列表

但我正在努力理解代码以及我将如何对其进行调整以使其正常工作。我查看了documentation，但它并没有真正回答我的问题，因为它只显示了一个带有一些行但没有解释的代码示例。我再也找不到其他文档，在那里我获得了与上面链接的信息一样“多”的信息。我确实了解某些部分，例如palette.header 使用标题、标题链接、对齐方式、日期等创建整个标题调色板。

所以我的问题是：

有人可以向我解释一下上面的代码是如何工作的吗？一个元素从哪里开始，又在哪里结束？ “--palette--”和“--div--”是做什么的？标签是如何创建的（例如一般、媒体等）？是否可以使用这些调色板创建上面列出的我的字段？我可以创建自己的调色板吗？如果是怎么办？或者是否有我可以使用/制作的打字稿来创建我的自定义字段？或者我是否需要为这些元素中的每一个创建一个扩展？如果可能的话，我想避免这种情况。

是的，有很多问题，我是 TYPO3 的新手，不仅尝试使用 TYPO3，而且还尽可能地理解它（至少对于我需要的东西）。我的首要任务是理解上面的代码，但是任何指针、解释、帮助甚至文档链接（到目前为止我可能还没有看到）可能会导致我的请求的解决方案，我将不胜感激。提前致谢！

Answer 1

在我当前的项目中，我为 tt_content 中的 textmedia 元素添加了视差效果。

首先我覆盖 tt_content TCA：

'background_media' => array(
    'exclude' => 1,
    'l10n_mode' => 'mergeIfNotBlank',
    'label' => 'LLL:EXT:extension/Resources/Private/Language/locallang.xml:background_media',
    'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
        'background_media',
        array(
            'minitems' => 0,
            'maxitems' => 1,
            'appearance' => array(
                'createNewRelationLinkTitle' => 'LLL:EXT:extension/Resources/Private/Language/locallang.xml:add_media',
                'showAllLocalizationLink' => 1,
            ),
            'foreign_match_fields' => array(
                'fieldname' => 'background_media',
                'tablenames' => 'tt_content',
                'table_local' => 'sys_file',
            ),
            // custom configuration for displaying fields in the overlay/reference table
            // to use the newsPalette and imageoverlayPalette instead of the basicoverlayPalette
            'foreign_types' => array(
                \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => array(
                    'showitem' => '
                            --palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette,
                            --palette--;;imageoverlayPalette,
                            --palette--;;filePalette'
                ),

            )
        ),
        $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
    )
),
'effects' => [
    'exclude' => true,
    'label' => 'LLL:EXT:extension/Resources/Private/Language/locallang.xml:effects',
    'config' => [
        'type' => 'select',
        'itemsProcFunc' => 'VENDOR\Extension\UserFunction\ProviderField->createEffectItems',
        'renderType' => 'selectCheckBox',
        'multiple' => true,
        'minitems' => 0,
        'maxitems' => 999,
        'items' => []
    ]
],...


\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns('tt_content', $additionalColumns);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes('tt_content', 'background_media,effects', 'textmedia', 'after:layout');
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes('tt_content', 'image_classes,text_classes', 'textmedia', 'after:layout');

现在我有 2 个附加字段： - 背景图片 (FAL) - 为自己的样式选择框（UserFunc）

我的 UserFunc (VENDOR\Extension\UserFunction\ProviderField->createEffectItems)

 /**
     * @param ConfigurationService $configurationService
     * @return void
     */
    public function injectConfigurationService(ConfigurationService $configurationService) {
        $this->configurationService = $configurationService;
    }

public function createEffectItems($config) {
        $settings = $this->configurationService->getSettingsForExtensionName('extension');

        $classNames = json_decode($settings['container']['effects'],true);
        if (!is_array($classNames)) return $config;

        $optionList = array();
        foreach ($classNames as $key => $val) {
            $optionList[] = [$val, $key];
        }
        $config['items'] = array_merge($config['items'], $optionList);
        return $config;
    }

现在我可以在 Typoscript 设置中定义自己的 CSS 类...

最后但并非最不重要的 FluidStyleContent 部分： 我覆盖了 Fluid_tyled_content 模板 Textmedia.html 和 Layout Detaulf.html。

<v:content.resources.fal uid="{data.uid}" table="tt_content" field="background_media" as="ceBackground">
        <f:if condition="{ceBackground}">
            {v:uri.image(treatIdAsReference: 1, src: ceBackground.0.id, maxW: 1920) -> v:variable.set(name: 'parallaxBg')}
        </f:if>
    </v:content.resources.fal>
<div id="c{data.uid}" {f:if(condition: '{parallaxBg}', then: 'style="background-image: url(\'{parallaxBg}\');" ')}">

</div>

For a multiple classes use: {data.effects -> v:format.replace(substring: ',', replacement: ' ')}

最好的问候