TYPO3 8.7.8 后端带有自定义字段的自定义内容元素

问题描述 投票：0回答：1

我找了好久，还是没找到我要找的东西。

我创建了两个自定义内容元素：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 项的下拉列表

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

所以我的问题是：

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

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

php typo3 typoscript typo3-8.x
1个回答
0
投票

在我当前的项目中，我向 tt_content 中的文本媒体元素添加了视差效果。

首先我覆盖 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');

现在我有两个额外的字段： - 背景图像（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: ' ')}

致以诚挚的问候

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.