TYPO3 Container Extension – Grid erstellen

Da ich mit dem Aufbau und Ablauf der TYPO3 EXT:gridelements nicht mehr wirklich zu frieden bin und die Extension mittlerweile überfrachtet ist mit Altlasten, Aufbau und für die Auslagerung in eine eigene Extension immer mal Probleme macht, habe ich mir die „neue“ Extension von dem TYPO3 Core Team angeschaut EXT:container

Und ich muss sagen, sie ist schlank, kann soweit alles was man braucht, aber ihr müsst auf jeden Fall eine eigene „base“ Extension aufbauen.

Ich möchte Euch hier beschreiben, wie ihr die EXT:container mit unterschiedlichen Grid´s aufbaut und wie ihr in den Backend-Einstellungen via FlexForms zu jedem Grid extra Einstellungen mit übergeben könnt.

Die „extra“ Einstellungen werde ich via flexforms aufbauen.

Schaut Euch am besten vorher einmal den Grundaufbau der Ext: container an und es gibt eine Beispiel-Erweiterung:
https://github.com/b13/container
https://github.com/b13/container-example

Fangen wir einmal mit den Ordner/Datei Aufbau in Eurer eigenen Extension an. Wir nennen diese mal hier Ext:base

  • base
    • Classes
      • DataProcessing
        • FlexFormProcessor.php
    • Configuration
      •  FlexForms
        • OneColumn.xml
        • TwoColumns.xml
      • TCA
        • Overrides
          • ext_container.php
      • TypoScript
        • ContentElement
          • Container.typoscript
    • Resources
      • Private
        • Templates
          • Extensions
            • Container
              • 1Column.html
              • 2Column.html

Der Aufbau ist natürlich keine Pflicht, aber kommt dem TYPO3 Core Ordner-Aufbau und Aufteilung gleich.

Datei Inhalt FlexFormProcessor.php:

<?php
declare(strict_types = 1);

namespace ID\IngBase\DataProcessing;

/*
 *  The MIT License (MIT)
 *
 *  Copyright (c) 2021 INGENIUMDESIGN, https://www.ingeniumdesign.de/
 *
 * For the full copyright and license information, please read the
 * LICENSE file that was distributed with this source code.
 */

use TYPO3\CMS\Core\Service\FlexFormService;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
use TYPO3\CMS\Frontend\ContentObject\DataProcessorInterface;

/**
 * @author INGENIUMDESIGN <info@ingeniumdesign.de>
 */

/**
 * Minimal TypoScript configuration
 * Process field pi_flexform and overrides the values stored in data
 *
 * 10 = ID\Base\DataProcessing\FlexFormProcessor
 *
 *
 * Advanced TypoScript configuration
 * Process field assigned in fieldName and stores processed data to new key
 *
 * 10 = ID\IngBase\DataProcessing\FlexFormProcessor
 * 10 {
 *   fieldName = pi_flexform
 *   as = flexform
 * }
 */
class FlexFormProcessor implements DataProcessorInterface
{
    /**
     * @var FlexFormService
     */
    protected $flexFormService;

    /**
     * Constructor
     */
    public function __construct()
    {
        $this->flexFormService = GeneralUtility::makeInstance(FlexFormService::class);
    }

    /**
     * @param ContentObjectRenderer $cObj The data of the content element or page
     * @param array $contentObjectConfiguration The configuration of Content Object
     * @param array $processorConfiguration The configuration of this processor
     * @param array $processedData Key/value store of processed data (e.g. to be passed to a Fluid View)
     * @return array the processed data as key/value store
     */
    public function process(ContentObjectRenderer $cObj, array $contentObjectConfiguration, array $processorConfiguration, array $processedData)
    {
        // The field name to process
        $fieldName = $cObj->stdWrapValue('fieldName', $processorConfiguration);
        if (empty($fieldName)) {
            $fieldName = 'pi_flexform';
        }
        if (!$processedData['data'][$fieldName]) {
            return $processedData;
        }

        // Process Flexform
        $originalValue = $processedData['data'][$fieldName];
        if (!is_string($originalValue)) {
            return $processedData;
        }
        $flexformData = $this->flexFormService->convertFlexFormContentToArray($originalValue);

        // Set the target variable
        $targetVariableName = $cObj->stdWrapValue('as', $processorConfiguration);
        if (!empty($targetVariableName)) {
            $processedData[$targetVariableName] = $flexformData;
        } else {
            $processedData['data'][$fieldName] = $flexformData;
        }

        return $processedData;
    }
}

Hier müsst ihr nun der Namespace anpassen (namespace ID\Base\).

Datei Inhalt OneColumn.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <options>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Einstellungen</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>
                    <rowcolumns>
                        <TCEforms>
                            <label>Container hinzufügen</label>
                            <description>Container bieten eine Möglichkeit, den Inhalt Ihrer Website zu zentrieren und horizontal aufzufüllen.</description>
                            <config>
                                <type>check</type>
                                <default>1</default>
                            </config>
                        </TCEforms>
                    </rowcolumns>
                    <spaceleftright>
                        <TCEforms>
                            <label>Container Einrück-Breite</label>
                            <config>
                                <type>select</type>
                                <renderType>selectSingle</renderType>
                                <items>
                                    <numIndex index="0">
                                        <numIndex index="0">Normal</numIndex>
                                        <numIndex index="1">col-12</numIndex>
                                    </numIndex>
                                    <numIndex index="1">
                                        <numIndex index="0">Mittel</numIndex>
                                        <numIndex index="1">col-10</numIndex>
                                    </numIndex>
                                    <numIndex index="2">
                                        <numIndex index="0">Klein</numIndex>
                                        <numIndex index="1">col-9</numIndex>
                                    </numIndex>
                                </items>
                                <maxitems>1</maxitems>
                                <size>1</size>
                                <default>col-12</default>
                            </config>
                        </TCEforms>
                    </spaceleftright>
                    <containerbg>
                        <TCEforms>
                            <label>Container Hintergrundfarbe</label>
                            <config>
                                <type>select</type>
                                <renderType>selectSingle</renderType>
                                <items>
                                    <numIndex index="0">
                                        <numIndex index="0">keine</numIndex>
                                        <numIndex index="1"></numIndex>
                                    </numIndex>
                                    <numIndex index="1">
                                        <numIndex index="0">hell</numIndex>
                                        <numIndex index="1">light-bg</numIndex>
                                    </numIndex>
                                    <numIndex index="2">
                                        <numIndex index="0">dunkel</numIndex>
                                        <numIndex index="1">dark-bg</numIndex>
                                    </numIndex>
                                    <numIndex index="3">
                                        <numIndex index="0">CI</numIndex>
                                        <numIndex index="1">ci-bg</numIndex>
                                    </numIndex>
                                </items>
                                <maxitems>1</maxitems>
                                <size>1</size>
                                <default></default>
                            </config>
                        </TCEforms>
                    </containerbg>
                    <defaultspace>
                        <TCEforms>
                            <label>Standard-Abstände entfernen</label>
                            <config>
                                <type>check</type>
                                <default>0</default>
                            </config>
                        </TCEforms>
                    </defaultspace>
                </el>
            </ROOT>
        </options>
    </sheets>
</T3DataStructure>

Hier bitte die FlexForm Einstellungen für Eure Wünsche und Anforderungen anpassen.

Datei Inhalt TwoColumns.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <options>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Einstellungen</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>
                    <rowcolumns>
                        <TCEforms>
                            <label>Container hinzufügen</label>
                            <config>
                                <type>check</type>
                                <default>1</default>
                            </config>
                        </TCEforms>
                    </rowcolumns>
                    <spaceleftright>
                        <TCEforms>
                            <label>Container Einrück-Breite</label>
                            <config>
                                <type>select</type>
                                <renderType>selectSingle</renderType>
                                <items>
                                    <numIndex index="0">
                                        <numIndex index="0">Normal</numIndex>
                                        <numIndex index="1">col-12</numIndex>
                                    </numIndex>
                                    <numIndex index="1">
                                        <numIndex index="0">Mittel</numIndex>
                                        <numIndex index="1">col-10</numIndex>
                                    </numIndex>
                                    <numIndex index="2">
                                        <numIndex index="0">Klein</numIndex>
                                        <numIndex index="1">col-9</numIndex>
                                    </numIndex>
                                </items>
                                <maxitems>1</maxitems>
                                <size>1</size>
                                <default>col-12</default>
                            </config>
                        </TCEforms>
                    </spaceleftright>
                    <containerbg>
                        <TCEforms>
                            <label>Container Hintergrundfarbe</label>
                            <config>
                                <type>select</type>
                                <renderType>selectSingle</renderType>
                                <items>
                                    <numIndex index="0">
                                        <numIndex index="0">keine</numIndex>
                                        <numIndex index="1"></numIndex>
                                    </numIndex>
                                    <numIndex index="1">
                                        <numIndex index="0">hell</numIndex>
                                        <numIndex index="1">light-bg</numIndex>
                                    </numIndex>
                                    <numIndex index="2">
                                        <numIndex index="0">dunkel</numIndex>
                                        <numIndex index="1">dark-bg</numIndex>
                                    </numIndex>
                                    <numIndex index="3">
                                        <numIndex index="0">CI</numIndex>
                                        <numIndex index="1">ci-bg</numIndex>
                                    </numIndex>
                                </items>
                                <maxitems>1</maxitems>
                                <size>1</size>
                                <default></default>
                            </config>
                        </TCEforms>
                    </containerbg>
                    <justifyontent>
                        <TCEforms>
                            <label>Content ausrichten Links/Rechts</label>
                            <config>
                                <type>check</type>
                                <default>0</default>
                            </config>
                        </TCEforms>
                    </justifyontent>
                    <aligncenter>
                        <TCEforms>
                            <label>Content ausrichten Oben/Unten</label>
                            <config>
                                <type>check</type>
                                <default>0</default>
                            </config>
                        </TCEforms>
                    </aligncenter>
                    <colsheight>
                        <TCEforms>
                            <label>Spalten eine Höhe</label>
                            <config>
                                <type>check</type>
                                <default>0</default>
                            </config>
                        </TCEforms>
                    </colsheight>
                    <defaultspace>
                        <TCEforms>
                            <label>Standard-Abstände entfernen</label>
                            <config>
                                <type>check</type>
                                <default>0</default>
                            </config>
                        </TCEforms>
                    </defaultspace>
                </el>
            </ROOT>
        </options>
        <responsive>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Responsive</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>
                    <xl_one>
                        <TCEforms>
                            <label>Spalte 1 - XL</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>6</default>
                            </config>
                        </TCEforms>
                    </xl_one>
                    <xl_two>
                        <TCEforms>
                            <label>Spalte 2 - XL</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>6</default>
                            </config>
                        </TCEforms>
                    </xl_two>
                    <lg_one>
                        <TCEforms>
                            <label>Spalte 1 - LG</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>6</default>
                            </config>
                        </TCEforms>
                    </lg_one>
                    <lg_two>
                        <TCEforms>
                            <label>Spalte 2 - LG</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>6</default>
                            </config>
                        </TCEforms>
                    </lg_two>
                    <md_one>
                        <TCEforms>
                            <label>Spalte 1 - MD</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>6</default>
                            </config>
                        </TCEforms>
                    </md_one>
                    <md_two>
                        <TCEforms>
                            <label>Spalte 2 - MD</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>6</default>
                            </config>
                        </TCEforms>
                    </md_two>
                    <sm_one>
                        <TCEforms>
                            <label>Spalte 1 - SM</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>12</default>
                            </config>
                        </TCEforms>
                    </sm_one>
                    <sm_two>
                        <TCEforms>
                            <label>Spalte 2 - SM</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>12</default>
                            </config>
                        </TCEforms>
                    </sm_two>
                    <xs_one>
                        <TCEforms>
                            <label>Spalte 1 - XS</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>12</default>
                            </config>
                        </TCEforms>
                    </xs_one>
                    <xs_two>
                        <TCEforms>
                            <label>Spalte 2 - XS</label>
                            <config>
                                <type>input</type>
                                <size>2</size>
                                <max>2</max>
                                <eval>num,int</eval>
                                <default>12</default>
                            </config>
                        </TCEforms>
                    </xs_two>
                    <push_pull_cols>
                        <TCEforms>
                            <label>Spalte mit Bild rechts tauschen</label>
                            <config>
                                <type>check</type>
                                <default>0</default>
                            </config>
                        </TCEforms>
                    </push_pull_cols>
                    <inner_cols>
                        <TCEforms>
                            <label>Spalten mit Innenabstand</label>
                            <config>
                                <type>check</type>
                                <default>0</default>
                            </config>
                        </TCEforms>
                    </inner_cols>
                </el>
            </ROOT>
        </responsive>
    </sheets>
</T3DataStructure>

Hier bitte die FlexForm Einstellungen für Eure Wünsche und Anforderungen anpassen.

Datei Inhalt ext_container.php

<?php

/*
 * This file is part of the package id/base.
 *
 * For the full copyright and license information, please read the
 * LICENSE file that was distributed with this source code.
 */

defined('TYPO3') or die('Access denied.');

// Activate extension container if extension is activated
if (\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('container')) {
    \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)->configureContainer(
        (
        new \B13\Container\Tca\ContainerConfiguration(
            'container_1_columns',
            '1 Column',
            '',
            [
                [
                    [
                        'name' => 'Inhalt',
                        'colPos' => 200
                    ]
                ]
            ]
        )
        )
            ->setIcon('EXT:base/Resources/Public/Icons/ContentElements/container-columns-1.svg')
            ->setSaveAndCloseInNewContentElementWizard(false)
    );
    \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)->configureContainer(
        (
        new \B13\Container\Tca\ContainerConfiguration(
            'container_2_columns',
            '2 Columns',
            '',
            [
                [
                    [
                        'name' => 'Inhalt Links',
                        'colPos' => 201
                    ],
                    [
                        'name' => 'Inhalt Rechts',
                        'colPos' => 202
                    ]
                ]
            ]
        )
        )
            ->setIcon('EXT:base/Resources/Public/Icons/ContentElements/container-columns-2.svg')
            ->setSaveAndCloseInNewContentElementWizard(false)
    );


    // Add Flexform to Container One Column Grid-System
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
        '*',
        'FILE:EXT:base/Configuration/FlexForms/OneColumn.xml',
        'container_1_columns'
    );

    $GLOBALS['TCA']['tt_content']['types']['container_1_columns']['showitem'] = '
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
            --palette--;;general,
            --palette--;;headers,pi_flexform;Container Einstellungen,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
            --palette--;;frames,
            --palette--;;appearanceLinks,
        --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:access,
            --palette--;;hidden,
            --palette--;;access,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
            categories,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
            rowDescription,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
    ';

    // Add Flexform to Container Two Columns Grid-System
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
        '*',
        'FILE:EXT:base/Configuration/FlexForms/TwoColumns.xml',
        'container_2_columns'
    );

    $GLOBALS['TCA']['tt_content']['types']['container_2_columns']['showitem'] = '
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
            --palette--;;general,
            --palette--;;headers,pi_flexform;Container Einstellungen,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
            --palette--;;frames,
            --palette--;;appearanceLinks,
        --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:access,
            --palette--;;hidden,
            --palette--;;access,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
            categories,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
            rowDescription,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
    ';
}

Falls Ihr die Container Icons verwendet, hier bitte die Pfade anpassen: setIcon
Zusätzlich die weiteren Pfade wie zum Beispiel von der Flexform Datei anpassen.

Datei Inhalt Container.typoscript

tt_content {
  container_1_columns =< lib.contentElement
  container_1_columns {
    templateName = 1Column
    templateRootPaths {
      10 = EXT:base/Resources/Private/Templates/Extensions/Container/
    }
    dataProcessing {
      10 = ID\Base\DataProcessing\FlexFormProcessor
      200 = B13\Container\DataProcessing\ContainerProcessor
      200 {
        colPos = 200
        as = container_200
      }
    }
  }

  container_2_columns =< lib.contentElement
  container_2_columns {
    templateName = 2Column
    templateRootPaths {
      10 = EXT:base/Resources/Private/Templates/Extensions/Container/
    }
    dataProcessing {
      10 = ID\Base\DataProcessing\FlexFormProcessor
      201 = B13\Container\DataProcessing\ContainerProcessor
      201 {
        colPos = 201
        as = children_201
      }
      202 = B13\Container\DataProcessing\ContainerProcessor
      202 {
        colPos = 202
        as = children_202
      }
    }
  }
}

Wichtig, hier die Pfade zu Eurer Extension anpassen.
Der B13 Container DataProcessing Pfad nicht verändern.
Der Template-Name ist auch gleichzeitig der Datei HTML Name für das Frontend.

Datei Inhalt 1Column.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:layout name="Default" />

<f:section name="Main">
    <f:spaceless>
        <section class="columns-one-col-wrap columns-ctype-{data.CType} columns-bg-{data.pi_flexform.containerbg} {data.pi_flexform.containerbg}{f:if(condition: '{data.pi_flexform.defaultspace}', then: '', else: ' ptb--120')}">
            {f:if(condition: '{data.pi_flexform.rowcolumns}',then:'<div class="container">')}
            {f:if(condition: '{data.pi_flexform.spaceleftright}',then:'<div class="row"><div class="{data.pi_flexform.spaceleftright} mx-auto">')}
                <div class="row">
                    {f:if(condition: '{data.frame_class} == \'none\'',then:'',else:'<div class="col-nr-1 col-12 col-md-12">')}
                    <f:for each="{container_200}" as="record">
                        <f:format.raw>{record.renderedContent}</f:format.raw>
                    </f:for>
                    {f:if(condition: '{data.frame_class} == \'none\'',then:'',else:'</div>')}
                </div>
                <!-- col-12 -->
                {f:if(condition: '{data.pi_flexform.spaceleftright}',then:'</div></div>')}
            {f:if(condition: '{data.pi_flexform.rowcolumns}',then:'</div>')}
        </section>
    </f:spaceless>
</f:section>
</html>

Datei Inhalt 2Column.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:layout name="Default" />

<f:section name="Main">
    <f:spaceless>
        <section class="columns-two-col-wrap columns-ctype-{data.CType} columns-bg-{data.pi_flexform.containerbg} {data.pi_flexform.containerbg}{f:if(condition: '{data.pi_flexform.defaultspace}', then: '', else: ' ptb--120')}">
            {f:if(condition: '{data.pi_flexform.rowcolumns}', then: '<div class="container">')}
            {f:if(condition: '{data.pi_flexform.spaceleftright}', then: '<div class="row"><div class="{data.pi_flexform.spaceleftright} mx-auto">')}
                <div class="row{f:if(condition:'{data.pi_flexform.inner_cols}',then:' row--35')}{f:if(condition: '{data.pi_flexform.justifyontent}',then:' justify-content-between')}{f:if(condition: '{data.pi_flexform.aligncenter}',then:' align-items-center')}">
                    <div class="col-xs-{data.pi_flexform.xs_one} col-sm-{data.pi_flexform.sm_one} {f:if(condition:'{data.pi_flexform.push_pull_cols}',then:'order-md-last')} col-md-{data.pi_flexform.md_one} col-lg-{data.pi_flexform.lg_one} col-xl-{data.pi_flexform.xl_one} {f:if(condition:'{data.pi_flexform.colsheight}',then:'matchHeight')} col-nr-1 col-first">
                        <f:for each="{children_201}" as="record">
                            <f:format.raw>{record.renderedContent}</f:format.raw>
                        </f:for>
                    </div>
                    <!-- col-6 -->
                    <div class="col-xs-{data.pi_flexform.xs_two} col-sm-{data.pi_flexform.sm_two} {f:if(condition:'{data.pi_flexform.push_pull_cols}',then:'order-md-first')} col-md-{data.pi_flexform.md_two} col-lg-{data.pi_flexform.lg_two} col-xl-{data.pi_flexform.xl_two} {f:if(condition:'{data.pi_flexform.colsheight}',then:'matchHeight')} col-nr-2 col-last">
                        <f:for each="{children_202}" as="record">
                            <f:format.raw>{record.renderedContent}</f:format.raw>
                        </f:for>
                    </div>
                    <!-- col-6 -->
                </div>
                {f:if(condition: '{data.pi_flexform.spaceleftright}', then: '</div></div>')}
            {f:if(condition: '{data.pi_flexform.rowcolumns}', then: '</div>')}
        </section>
    </f:spaceless>
</f:section>
</html>

Gerne die HTML/FLUID Ausgabe für Eure Zwecke und Wünsche anpassen.
Ich verwende hier einen Grundaufbau von Bootstrap 4 / 5

Schaut Euch gerne noch mit einem FLUID debug die unterschiedlichen Datei-Strukturen und Ausgaben an, was noch alles möglich ist.
Wenn alles soweit klappt, dann habt ihr nun zu der normalen Extension container, die Möglichkeiten noch weitere Einstellungen zu jeden Container vorzunehmen.

Möchtet ihr noch den Wizard Tab ändern, so könnt ihr dies mit folgenden tsconfig Code abändern:

tsconfig Datei:

mod.wizards {
    newContentElement {
      wizardItems {
        container {
          header = LLL:EXT:xxxx/Resources/Private/Language/Backend.xlf:container
        }
      }
    }
  }

und diesen Code in die ext_container.php:

$GLOBALS['TCA']['tt_content']['columns']['CType']['config']['itemGroups']['container'] = LLL:EXT:xxx/Resources/Private/Language/Backend.xlf:container

Sendet mir gerne noch weitere Aufbau-Möglichkeiten und Beispiele in den Kommentaren zu.

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Vielen Dank!


Ich bin TYPO3 Freelancer, TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web seit 2004.
Mehr Infos zu der TYPO3 Internet-Agentur INGENIUMDESIGN.

Besucht auch unser TYPO3 Hilfe Forum.

Leave a Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

10 Kommentare

  1. Erstmal vielen Dank für die Anleitung 🙂

    TYPO3 hat ab der 11.5 einen FlexFormProcessor…. braucht man nicht selber schreiben:
    https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/DataProcessing/FlexFormProcessor.html

    In den Flexforms würde ich eher Slider verwenden, statt INT Inputs:
    https://docs.typo3.org/m/typo3/reference-tca/main/en-us/ColumnsConfig/Type/Number/Properties/Slider.html

    ist mit Vorsicht zu geniessen, denn aus
    „text text some text“
    kann schnell ein:
    „texttextsome text“
    werden, also Leerzeichen zwischen den TAGS oder vor/hinter Tags weg weg.

    , then: ‚<div class….
    im FLUIDTEMPLATE vielleicht in ein switch mit sections, damit die IDE das HTML sauber erkennt.

    Ansonsten bleibe ich bei meinem Intro:
    Vielen Dank für deine Mühe und die Hilfe, die das Tutorial bietet.

  2. Ich wollte es auch nochmal wissen!
    Habe Container installiert und in meinem Seitpackage all das eingetragen, was Du oben beschrieben hast.
    Backend, alles okay nach ein paar wenigen Stolperer.
    Nur, im Frontend sehe nur:
    ERROR: Content Element with uid „360“ and type „container_2_columns“ has no rendering definition!
    Ich komme noch nicht mal auf den Debug in der „Default.html“!?
    Such wie bekloppt und finde nichts.
    Wer hat denn einen Hinweis für mich?

  3. Nun, man kann auch mit einem Fahrrad 5 Kästen Sprudel nach Hause transportieren.

    Ein Werkzeug ist immer so was man alles damit machen kann und mit „Container“ kann man längst nicht DAS machen, was mit GE klappt.
    Wenn es NUR um einfache Container (Spalten / Raster) geht, dann ist „Container“ okay und ausreichend.

  4. Ich habe dies in meinem eigenen Sitepackage integriert und klappte wunderbar.

  5. Sven

    Hallo
    die Umstellung hat gut geklappt, Danke für die Übersicht! Im Backend funktioniert alles.
    Im Frontend bekomme ich aber: ERROR: Content Element with uid „630“ and type „responsive_columns_2“ has no rendering definition!
    Scheint das selbe Problem wie bei Stephan zu sein. lib.contentElement ins TS zu setzen bringt auch nichts.
    Hat jemand eine Lösung?

  6. Stephan

    Eine Sache klappt leider noch nicht:
    Die Pfadangabe zum Template in der Datei Container.typoscript.
    templateRootPaths {
    10 = EXT:myext/Resources/Private/Templates/ContentElements/Container/
    }
    Dieser Wert wird einfach nicht übernommen, obwohl der Pfad stimmt.

    Ich habe es dann erst mal so gelöst, dass ich im Setup meiner Extension die Pfade definiert habe:
    lib.contentElement {
    templateRootPaths {
    200 = EXT:myext/Resources/Private/Templates/ContentElements/Container/
    }
    partialRootPaths {
    200 = EXT:myext/Resources/Private/Partials/ContentElements/Container/
    }
    layoutRootPaths {
    200 = EXT:myext/Resources/Private/Layouts/ContentElements/Container/
    }
    }

  7. Stephan

    Vielen Dank für die sehr gute Anleitung, hat alles auf Anhieb geklappt. Die container-Extension scheint eine gute Alternative zu gridelements zu sein und ist ja zum Glück in der Anwendung sehr ähnlich.

  8. Joachim

    Hallo Kuddel, richtig, um die ext:container zu verwenden, benötigt man eine eigene Extension als Grundbasis.
    Ggf. kommt hier noch eine Anleitung wie man schnell und einfach seine eigene kleine Extension erstellen kann.
    Wobei ich niemanden mehr kenne, der seine TYPO3 Website nicht ohne seine eigene Extension aufbaut.

  9. Kuddel

    Ich habe es mal probiert.
    Aber mit diesem Code:
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
    ‚*‘,
    ‚FILE:EXT:base/Configuration/FlexForms/OneColumn.xml‘,
    ‚container_1_columns‘
    );

    erhalte ich im Backend diesen Fehler:

    (1/1) #1480765571 RuntimeException
    Data structure identifier must be set, typically by executing TcaFlexPrepare data provider before

  10. Kuddel

    Habe gerade den Anfang gelesen und da steht geschrieben:

    „auf jeden Fall eine eigene „base“ Extension aufbauen“

    und das ist schon ein Unding m.E. Dazu kommt auch noch das komplett TCA-basierte Vorgehen. Also man muss dann schon PHP programmieren können (geht ja fast in Richtung WP) 🙁

Next ArticleAll-inkl - TYPO3 Composer Installation