TYPO3 8.7.8 백엔드 사용자 정의 필드가있는 사용자 정의 컨텐츠 요소

Question

나는 꽤 오랫동안 찾고 있었지만 찾고있는 것을 찾을 수 없었습니다.

두 개의 맞춤 콘텐츠 요소 parallax_content와 bg_image를 만들었습니다.

이

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를 들어 나는 다음과 같은 필드가 필요 : 시간의 백엔드에서

은 (tt_content에서) 다음과 같이 내가의 코드는 표준 textmedia 요소의 필드를 가지고있는 :

• 헤더
• 체크 박스 "삽입 로고"
• bodytext
• 이미지 선택 필드 image_bg를 들어

내가 필요 :

• 이미지 선택 필드
• 이 개 항목

그러나 내가 이해와 사투를 벌인거야와 드롭 다운 목록 코드와 어떻게 작동 할 수 있도록 그것을 적응시킬 수 있을까? 나는 documentation을 살펴 봤지만 실제로는 내 질문에 답하지 않습니다. 코드의 일부 예는 몇 줄이지만 설명이 없기 때문입니다. 위에 링크 된 것과 같이 "많은"정보로 얻은 곳에서 다른 문서를 다시 찾을 수 없었습니다. 나는 palette.header 등 헤더, 헤더 연결, 정렬, 날짜

를 함께 전체 헤더 팔레트를 생성 예를 들어 일부, 그래서 내 질문은 이해 할 :

어떻게 코드를 누군가가 나에게 설명 할 수 위의 작품 exaclty? 한 요소는 어디에서 시작하고 어디에서 끝나는가? "- 팔레트"와 "- 디바"는 무엇을합니까? 탭 생성 방법 (일반, 미디어 등) 이 팔레트를 사용하여 위에 나열된 필드를 만들 수 있습니까? 내 팔레트를 만들 수 있습니까? 그렇다면 어떻게? 아니면 사용자 정의 필드를 만들 때 사용할 수있는 타이포 스크립트가 있습니까? 아니면 각 요소에 대한 확장을 만들어야합니까? 가능하다면 저는 이것을 피하고 싶습니다.

예, 상당히 많은 질문입니다. 저는 TYPO3의 초보자이며 TYPO3을 사용하려고 노력할뿐만 아니라 최대한 멀리 이해하고 있습니다. 필자의 최우선 과제는 위의 코드를 이해하는 것이지만 포인터, 설명, 도움 또는 문서 링크 (심지어 지금까지 보지 못했을 수도 있음)가 내 요청에 대한 솔루션으로 이어질 수있어서 크게 감사하겠습니다. 미리 감사드립니다!

Answer 1

내 현재 프로젝트에서 tt_content의 textmedia 요소에 시차 효과를 추가했습니다.(VENDOR를 자신의 스타일

내 UserFunc을위한 Selct 상자 (UserFunc) - 배경 이미지 (FAL) - : 나는 2 개 개의 추가 필드가 이제

'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'); 

:

우선은 tt_content의 TCA를 오버라이드 (override) \ 확장 \ 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: ' ')} 

감사합니다 귀하의 답변에 대한