custom content element containing child elements of type inline with fields of tt_content(image, header) in TYPO3 9? TCA, Domain model needed?

Question

I want to make a custom content element, just with TYPO3 v9.5 core, that has custom content elements of type inline (children elements). Each of them has the fields header and image from tt_content.

So what I got already is this: custom content element with inline child

Expanding the child element by clicking on it, I get something like this: expanded child element with image and header field

So far, so good, but why are my childrens not in the parent element when I am looking at my page content: I want them childrens to be in the parent container, but they are next to it.

And my other question would be, how can I get the parent element with all its children into fluid, so that I can loop over the childrens and for example output them as list items. All children have the UID of the parent.

And pls dont tell me to use extensions... I wanna learn TYPO3 and build it with TYPO3 core :) for the sake of practicing.

This is how my tt_content in TCA/overrides looks like:

Sorry for the variable names.... but Iam struggling hard. It might be a bit hard to understand:

    'tt_content',
    'CType',
    ['custom element', 'portfolio_list', 'content-text'],
    'textmedia',
    'after'
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'CType',
    ['custom element', 'portfolio_list2', 'content-text'],
    'textmedia',
    'after'
);

// $GLOBALS['TCA']['tt_content']['types']['portfolio_list'] = [
//     'showitem' => '
//          --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
//             --palette--;;general,
//             image; Image,
//             header; Title,

//             bodytext; Schreiben Sie einen Text,

//          --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
//             --palette--;;hidden,
//             --palette--;;access,
//       ',
//     'columnsOverrides' => [
//         'bodytext' => [
//             'config' => [
//                 'enableRichtext' => true,
//                 'richtextConfiguration' => 'default',
//             ],
//         ],
//     ],
// ];
$GLOBALS['TCA']['tt_content']['types']['portfolio_list2'] = [
    'showitem' => '
          --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
             --palette--;;general,
             image; Image,
             header; Title,
          
             portfolio_list2;Elemente,
             
          --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
             --palette--;;hidden,
             --palette--;;access,
       ',
    'columnsOverrides' => [
        'bodytext' => [
            'config' => [
                'enableRichtext' => true,
                'richtextConfiguration' => 'default',
            ],
        ],
        'portfolio_list2' => [
            'exclude' => true,
            'label' => 'Einzelnes-Portfolio',
            'config' => [
                'type' => 'inline',
                'allowed' => 'tt_content',
                'foreign_table' => 'tt_content',
                'foreign_sortby' => 'sorting',
                'foreign_field' => 'portfolio_list',
                'minitems' => 0,
                'maxitems' => 99,
                'appearance' => [
                    'collapseAll' => true,
                    'expandSingle' => true,
                    'levelLinksPosition' => 'bottom',
                    'useSortable' => true,
                    'showPossibleLocalizationRecords' => true,
                    'showRemovedLocalizationRecords' => true,
                    'showAllLocalizationLink' => true,
                    'showSynchronizationLink' => true,
                    'enabledControls' => [
                        'info' => false,
                    ],
                ],
            ],
        ],
    ],
];

// $GLOBALS['TCA']['tt_content']['columns']['header']['config']=[
//     'type' => 'inline',
//     'foreign_table' => 'tt_content',
//     'foreign_field' => 'header',
//     'foreign_sortby' => 'sorting',
//     'maxitems' => 9999,
//     'appearance' => [
//         'collapseAll' => 0,
//         'levelLinksPosition' => 'top',
//         'showSynchronizationLink' => 1,
//         'showPossibleLocalizationRecords' => 1,
//         'useSortable' => 1,
//         'showAllLocalizationLink' => 1
//     ]
// ];
// $GLOBALS['TCA']['tt_content']['columns']['bodytext']['config']=[
//     'type' => 'inline',
//     'foreign_table' => 'tt_content',
//     'foreign_field' => 'header',
//     'foreign_sortby' => 'sorting',
//     'maxitems' => 9999,
//     'appearance' => [
//         'collapseAll' => 0,
//         'levelLinksPosition' => 'top',
//         'showSynchronizationLink' => 1,
//         'showPossibleLocalizationRecords' => 1,
//         'useSortable' => 1,
//         'showAllLocalizationLink' => 1
//     ]
// ];
// $GLOBALS['TCA']['tt_content']['columns']['image']['config']=[
//     'type' => 'inline',
//     'foreign_table' => 'tt_content',
//     'foreign_field' => 'image',
//     'foreign_sortby' => 'sorting',
//     'maxitems' => 9999,
//     'appearance' => [
//         'collapseAll' => 0,
//         'levelLinksPosition' => 'top',
//         'showSynchronizationLink' => 1,
//         'showPossibleLocalizationRecords' => 1,
//         'useSortable' => 1,
//         'showAllLocalizationLink' => 1
//     ]
// ];

$temporaryColumn = [
    'portfolio_list2' => [
        'exclude' => true,
        'label' => 'Einzelnes-Portfolio',
        'config' => [
            'type' => 'inline',
            'allowed' => 'tt_content',
            'foreign_table' => 'tt_content',
            'foreign_sortby' => 'sorting',
            'foreign_field' => 'portfolio_list',
            'minitems' => 0,
            'maxitems' => 99,
            'appearance' => [
                'collapseAll' => true,
                'expandSingle' => true,
                'levelLinksPosition' => 'bottom',
                'useSortable' => true,
                'showPossibleLocalizationRecords' => true,
                'showRemovedLocalizationRecords' => true,
                'showAllLocalizationLink' => true,
                'showSynchronizationLink' => true,
                'enabledControls' => [
                    'info' => false,
                ],
            ],
        ],
    ],
];
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
    'tt_content',
    $temporaryColumn
);

//  $customImage = [
//     'portfolio_list' => [

//         'exclude' => true,
//         'label' => 'Einzelnes-Portfolio',
//         'config' => [
//             'type' => 'inline',
//             'foreign_table' => 'tt_content',
//             'foreign_field' => 'teaser_field',
//             'foreign_sortby' => 'sorting',
//             'maxitems' => 9999,
//             'appearance' => [
//                 'collapseAll' => 0,
//                 'levelLinksPosition' => 'top',
//                 'showSynchronizationLink' => 1,
//                 'showPossibleLocalizationRecords' => 1,
//                 'useSortable' => 1,
//                 'showAllLocalizationLink' => 1
//             ],
//         ],

//     ],
//  ];
//  \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns('tt_content', $customImage);


Do I need Domain Models and make a 1:n relation or something like that? Sorry, for stupid questions. I am 2.5 months into TYPO3 and I just start my career in coding :)

I would be so thankful for any kind of help :) THX a lot!

I don't know if you can do it with TYPO3 alone... you can either use an extension like gridelements or container to "nest" a tt_content content element inside another content element; Another option could be define your child elements on a different custom table; take a look at the extension EXT:bootstrap_package that contains several examples of this kind of elements (card, carousel...); it is a gold mine on how to make your own site package ext. — Riccardo De Contardi
For an example TCA stackoverflow.com/questions/68691660/…. Note that you need a double nested dataprocessor if the children have assets or image — Jacco van der Post

Aristeidis Karavas Aristeidis Karavas · Accepted Answer · 2021-08-09T06:23:05

What you need to get the content element values in the FrontEnd, is DataProcessing. DataProcessing is basically an SQL query done by TypoScript. Here you can find a detailed Tutorial on how to build custom elements. There is a section which explains the DataProcessing with an example.

How to create custom content elements on TYPO3

Here is the official documentation

DataProcessing

As for the children that are being shown in the backend, you can hide them by creating a Hook for the Plugin preview. In the article i send you, there is a detailed explanation on how you can create the hook. it is called "The PageLayoutView Hook" Here is the official documentation

Configure Custom Backend Preview for Content Element

Once you created the class, in order to hide the children, you will have to add this:

New hook to determine if content record is used/unused

What you need to do, is either leave the children on colPos=0 and edit the function to return $record['colPos'] === 0 or you can create a new Backend Field on your layout, give it the 999 colPos number (or any number you want, it doesnt really matter) and leave the function as is. But you have to remember, when a new child is created, you have to give it automatically the colPos defined on your function, otherwise the editor will have to manually select the colPos 999 every single time. You can achive that by editing this to your needs:

$GLOBALS['TCA']['tx_news_domain_model_news']['columns']['content_elements']['config']['overrideChildTca']['columns']['colPos']['config']['default'] = '1';

Hope it helped. Any other questions, feel free to ask

Best regards

custom content element containing child elements of type inline with fields of tt_content(image, header) in TYPO3 9? TCA, Domain model needed?

1 Answers