TYPO3 8.7.8自定义内容元素，后端包含自定义字段

1 回答

• 0

  在我当前的项目中，我为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） - 自己样式的Selct Box（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: ' ')}
  

  最好的祝福

  回复于 2024-05-03T00:19:57+08:00