TYPO3 8.7.8 Custom content element with custom fields in backend

Question

I've been searching for quite a while but couldn't find what I was looking for.

I've created two custom content-elements: parallax_content and bg_image.

In the backend for the time being I have the fields of a standard textmedia-element the code for which is as follows (from 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]'
    )
  )
)

For my element parallax_content I would need the following fields:

Header
a checkbox "insert Logo"
a bodytext
an image selecting field

For image_bg I would need:

an image selecting field
a dropdown list with 2 items

But I'm struggling with understanding the code and how I would neet to adapt it so it would work. I've looked at the documentation but it doesn't really answer my question as it only shows one example of code with some lines but no explanation. I couldn't find the other documentation again where I gained just as "much" information as in the one linked above. I do understand some parts, for example the palette.header creates the whole header palette with header, header-link, alignment, date etc.

So my questions are:

Can someone explain to me how the code above works exaclty? Where does one element start and where does it end? what do "--palette--" and "--div--" do? how are the tabs created (e.g. general, media etc)? Is it possible to create my fields as listed above with these palettes? Can I create my own palette? If yes how? Or is there maybe a typoscript I can use/make to create my custom fields? Or would I need to create an extension for each of these elements? If possible I'd like to avoid this.

Yes, it's quite a lot of questions, I'm a novice in TYPO3 and not only trying to work with TYPO3 but also understand it as far as possible (at least for the things I need). My utmost priority is to understand the code above, but any pointers, explanations, help or even links to documentations (which I might not have seen so far) which could lead to a solution for my request I would greatly appreciate. Thanks in advance!

Jürgen Pfusterschmied Jürgen Pfusterschmied · Accepted Answer · 2017-11-29T11:03:49

in my current project I added a parallax effect to the textmedia element in the tt_content.

First I override the 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');

Now I have 2 additional fields: - Background Image (FAL) - Selct Box (UserFunc) for own styles

My 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;
    }

Now I can define my own CSS classes in Typoscript setting...

Last but not least the FluidStyleContent Part: I overrride the Fluid_tyled_content template Textmedia.html and 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: ' ')}

Best regards

TYPO3 8.7.8 Custom content element with custom fields in backend

1 Answers