How to Migrate Grid Elements to Container Extension in TYPO3?

Are you looking to migrate famous EXT.gridelements to new amazing EXT.container TYPO3 extensions? In this article, you will find two ways (1. Automatic extension based, 2. Manually migrate) to successfully update from old-age EXT.gridelements to new-shiny EXT.container TYPO3 extensions.

For many years EXT.gridelements extension is the only TYPO3 extension that provides a flexible grid system - The community appreciate their dedication and efforts. Modern TYPO3 sites need more flexibility than the default Backend layout feature of TYPO3. Fortunately, TYPO3 people are always eager for innovation, and EXT.container introduced.

Since last year, We (T3Terminal and NITSAN) have already migrated all existing TYPO3 templates from EXT.gridelements to EXT:container (of course, new projects are developing only with EXT.container ;)

Why? Keep reading the blog; you will get an answer ;)

Before starting the blog, We want to dedicate this blog to B13 GmbH, who developed and maintained cool EXT.container TYPO3 extension - An alternative to EXT.gridelements. #T3Kudos to everyone who contributed to this TYPO3 extension. Of course, I sincerely thank team Gridelements, who have provided such a good solution for years to the TYPO3 community.

Now, Let’s figure out how to migrate from EXT.gridelements to EXT.container with two options.

If you are interested in manual migration of EXT.gridelements to EXT.container, then try the below step-by-step guide.

Note: The below steps are tested in the below version.

• TYPO3 10.4.20
• TYPO3 11.5.4 LTS
• EXT.gridelements 9.4.0
• EXT.container 1.4.0

Step 1. Sample Configuration of EXT.gridelements

For the test-drive purpose, Here is the sample data-set configuration of EXT.gridelements.

mod.web_layout.BackendLayouts {
  yourKey {
    title = Your Title
    icon = EXT:yourpackage/Resources/Public/Images/BackendLayouts/yourIcon.gif
    config {
      backend_layout {
        colCount = 2
        rowCount = 1
        rows {
          1 {
            columns {
              1 {
                name = Column1
                colPos = 1
              }
              2 {
                name = Column2
                colPos = 2
              }
            }
          }
        }
      }
    }
  }
}

Step 2. Register EXT.container Configuration

Let’s create the configuration of EXT.container as same as EXT.gridelements with Simple title and colPos.

$containerRegistry->configureContainer(
    (
    new \B13\Container\Tca\ContainerConfiguration(
        'yourKey',
        'Your Title',
        '',
        [
            [
                [
                    'name' => 'Column1',
                    'colPos' => 1
                ],
                [
                    'name' => 'Column2',
                    'colPos' => 2
                ],
            ]
        ]
    )
    )
);

Step 3. Migrate CType (with update SQL)

Now, It’s time to migrate CType all the gridelement’s records to the container.

UPDATE `tt_content` SET `CType`=CONCAT('yourKey’, `tx_gridelements_backend_layout`) WHERE `CType`='gridelements_pi1';

UPDATE `tt_content` SET `colPos`= `tx_gridelements_columns`,`tx_container_parent`=`tx_gridelements_container` WHERE `colPos`=-1;

Step 4. Setup TYPO3 Fluid Template

Using `lib.containerElement`, We need to set up the default TypoScript configuration to override your custom layout, templates and partial.

lib.containerElement =< lib.contentElement
lib.containerElement {
    layoutRootPaths {
        100 = EXT:fluid_styled_content/Resources/Private/Layouts
        110 = EXT:yourpackage/Resources/Private/Layouts/Containers
    }

    templateRootPaths {
        100 = EXT:fluid_styled_content/Resources/Private/Templates
        110 = EXT:yourpackage/Resources/Private/Templates/Containers
    }

    partialRootPaths {
        100 = EXT:fluid_styled_content/Resources/Private/Partials
        110 = EXT:yourpackage/Resources/Private/Partials/Containers
    }

    dataProcessing {
        10 = B13\Container\DataProcessing\ContainerProcessor
    }
}

Step 5. Assign to Container

You will need to create a number of TypoScript objects of your container to assign `lib.containerElement` by assigning the Fluid template name.

tt_content.yourKey < lib.containerElement
tt_content.yourKey {
    templateName = yourTemplate
}

Step 6. Done!

Now your TYPO3 Fluid template is ready for container.

By default, EXT.gridelements provides a feature to allow or disallow content elements configuration. But, EXT.container does not provide such customization.

EXT.container is a compatible TYPO3 Extension EXT.content_defender. It’s very useful to Define allowed or denied content element types.

Here is the sample container configuration with EXT.content_defender.

$containerRegistry->configureContainer(
    (
    new \B13\Container\Tca\ContainerConfiguration(
        'YourName',
        'YourTitle',
        '',
        [
            [
                [
                    'name' => 'Column1',
                    'colPos' => 1,
                    'allowed' => [
                        'CType' => 'header,text,textpic,image,textmedia,bullets,form_formframework'
                    ]
                ],
                [
                    'name' => 'Column2',
                    'colPos' => 2,
                    'allowed' => [
                        'CType' => 'header,text,textpic,image,textmedia,bullets,form_formframework'
                    ]
                ],
            ]
        ]
    )
    )
);

Thanks for reading my blog. I hope you liked and learned well.

Are you a fan of the TYPO3 EXT.container extension? Why? What’s your favourite way to migrate EXT.gridelements to EXT.container? I would love to know your thoughts in the comment box.

Have a Happy Migration!