TYPO3 – Error by creating custom content element

I need your help creating a custom content element. I use TYPO3 ver. 10.4.21 and I’d added extensions (fluid_styled_content and sitepackage).

I could create a wizard and content type (CType) for dropdown list, but if I let show my content element on the frontend (websie), then an error occured: Oops, an error occurred! Code: 202111110917379495faab.

Maybe there are errors by template path…but I don’t know how I fix it.

I did from now on:

1. Add a Datenbank in ext_localconf.php

CREATE TABLE tt_content (
    code_language text DEFAULT '' NOT NULL
);

2. Add a Configuration in my_sitepackage_for_flipboxConfigurationTCAOverrides

// Add dropdown for code language to TCA.
$additionalColumns = [
    'code_language' => [
        'label' => 'LLL:EXT:my_sitepackage_for_flipbox/Resources/Private/Language/locallang_db.xlf:tt_content.code_language',
        'config' => [
            'type' => 'select',
            'default' => '',
            'itemsProcFunc' => 'B13\my_sitepackage_for_flipbox\DataProvider\CodeLanguages->getAll',
            'renderType' => 'selectSingle',
        ],
    ],
];

TYPO3CMSCoreUtilityExtensionManagementUtility::addTCAcolumns('tt_content', $additionalColumns);

TYPO3CMSCoreUtilityExtensionManagementUtility::addToAllTCAtypes(
    'tt_content',
    'code_language',
    'my_sitepackage_for_flipbox',
    'before:bodytext'
);

3. Add a content type (CType) in tt_content.php

// Adds the content element to the "CType" dropdown  for NewContentElement
TYPO3CMSCoreUtilityExtensionManagementUtility::addPlugin(
    array(
        '1 Column Flipbox',
        'oneColumnFlipbox',
        'EXT:my_sitepackage_for_flipbox/Resources/Public/Icons/T3Icons/content/content-carousel-image.svg'
    ),
    'CType',
    'my_sitepackage_for_flipbox',
 );

4. Add a edit page in tt_content.php

// Configure the default backend fields for the content element
 $frontendLanguageFilePrefix = 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:';
$GLOBALS['TCA']['tt_content']['types']['oneColumnFlipbox'] = [
    'showitem' => '         
         --palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
         --palette--;;headers,
            bodytext;' . $frontendLanguageFilePrefix . 'bodytext_formlabel,
         --div--;' . $frontendLanguageFilePrefix . 'tabs.appearance,
            --palette--;' . $frontendLanguageFilePrefix . 'palette.frames;frames,
            --palette--;;appearanceLinks,
         --div--;' . $frontendLanguageFilePrefix . 'tabs.access,
            --palette--;' . $frontendLanguageFilePrefix . 'palette.visibility;visibility,
         --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,
            --palette--;;language,
         --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
             categories,
         --div--;' . $frontendLanguageFilePrefix . 'tabs.extended,
            --palette--;;hidden,
            --palette--;;access,
       ',
    'columnsOverrides' => [
       'bodytext' => [
          'config' => [
             'enableRichtext' => true,
             'richtextConfiguration' => 'default',
          ],
       ],
    ],
 ];

5. Add a wizard in PageTS in ext_localconf.php

/***************
 * PageTS
 */
TYPO3CMSCoreUtilityExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:my_sitepackage_for_flipbox/Configuration/TsConfig/Page/All.tsconfig">');

in All.tsconfig: Path to ContentElements-folder from All.tsconfig

@import 'EXT:my_sitepackage_for_flipbox/Configuration/TsConfig/Page/ContentElements/*.tsconfig'

in my_sitepackage_for_flipboxConfigurationTsConfigPageContentElements.tsconfig

# add content elements
@import 'EXT:my_sitepackage_for_flipbox/Configuration/TsConfig/ContentElements/*.tsconfig'

in my_sitepackage_for_flipboxConfigurationTsConfigPageContentElementsoneColumnFlipbox.tsconfig

#############################################
#           Add a wizard in common          #
#############################################
mod.wizards.newContentElement.wizardItems {
   common {
      elements {
         oneColumnFlipbox {
            iconIdentifier = content-dashboard
            title = 1 column flipbox
            description = one flipbox
            tt_content_defValues {
               CType = oneColumnFlipbox 
            }
         }
      }
      show := addToList(oneColumnFlipbox)
   }
}

6. Add a dataprocessing in my_sitepackage_for_flipboxClassesDataProcessingHeighleightProcessing.php

public function process(ContentObjectRenderer $cObj, array $contentObjectConfiguration, array $processorConfiguration, array $processedData)
{
    $fieldName = $processorConfiguration['field'];
    $targetVariableName = $cObj->stdWrapValue('as', $processorConfiguration, 'bodytext_formatted');
    $highlight = GeneralUtility::makeInstance(Highlighter::class);

    // Let highlight.php decide which code language to use from all registered if "detect automatically" is selected.
    if (!$processedData['data']['code_language']) {
        $languages = $highlight->listLanguages();
        $highlight->setAutodetectLanguages($languages);
        $highlighted = $highlight->highlightAuto($processedData['data'][$fieldName]);
    } else {
        $highlighted = $highlight->highlight($processedData['data']['code_language'], $processedData['data'][$fieldName]);
    }

    $processedData[$targetVariableName]['code'] = $highlighted->value;
    $processedData[$targetVariableName]['language'] = $highlighted->language;
    $processedData[$targetVariableName]['lines'] = preg_split('/rn|r|n/', $highlighted->value);
    return $processedData;
}

7. Add a frontend-output in my_sitepackage_for_flipboxConfigurationTypoScriptsetup.typoscript

###########################################
#                   Path                  #
###########################################

# add content elements
@import 'EXT:my_sitepackage_for_flipbox/Configuration/TypoScript/ContentElements/'
@import 'EXT:my_sitepackage_for_flipbox/Configuration/TypoScript/Helper/'

# Path to Templates, Partials, Layouts
lib.contentElement {
  templateRootPaths {
    100 = EXT:my_sitepackage_for_flipbox/Resources/Private/Templates/
  }
  partialRootPaths {
    100 = EXT:my_sitepackage_for_flipbox/Resources/Private/Partials/
  }
  layoutRootPaths {
    100 = EXT:my_sitepackage_for_flipbox/Resources/Private/Layouts/
  }
}

in C:mizuki.rasani.netmy_sitepackage_for_flipboxConfigurationTypoScriptContentElementsoneColumnFlupbox.typoscript

# registering of content element for oneColumnFlipbox
tt_content {
   oneColumnFlipbox =< lib.contentElement
   oneColumnFlipbox {
      templateName = oneColumnFlipbox
    }
}

And now it shows an error “Oops, an error occurred! Code: 20211111092555c76b0214”.

If I write a code in setup-config by root with debug, it comes an error:

(1/1) #1257246929 TYPO3FluidFluidViewExceptionInvalidTemplateResourceException
Tried resolving a template file for controller action "Standard->oneColumnFlipbox" in format ".html", but none of the paths contained the expected template file (Standard/OneColumnFlipbox.html). The following paths were checked: 
/www/htdocs/w00c525b/mizuki.rasani.net/typo3/sysext/fluid_styled_content/Resources/Private/Templates/, 
/www/htdocs/w00c525b/mizuki.rasani.net/typo3conf/ext/my_sitepackage_for_flipbox/Resources/Private/Templates/ContentElements/

in /www/htdocs/w00c525b/mizuki.rasani.net/typo3_src-10.4.21/vendor/typo3fluid/fluid/src/View/TemplatePaths.php line 598

How can I fix it? I think there are some problems in typoscript or something template path…. But I don’t know what happens.

I hofe you can help me. Thank you.

Answer

Template name must b start with a capital letter.

# registering of content element for oneColumnFlipbox
tt_content {
   oneColumnFlipbox =< lib.contentElement
   oneColumnFlipbox {
      templateName = OneColumnFlipbox
    }
}

Now, your template in this directory, EXT:my_sitepackage_for_flipbox/Resources/Private/Templates/ should be OneColumnFlipbox.html

That’s it, hope this will work for you.

For more…

• https://b13.com/blog/how-to-create-custom-content-elements-in-typo3
• https://docs.typo3.org/m/typo3/reference-coreapi/10.4/en-us/ApiOverview/ContentElements/AddingYourOwnContentElements.html