How to Migrate from Grid Elements to the TYPO3 Container Extension?

Are you looking to migrate from Grid Elements to the TYPO3 Container extension? In this article, you will find different approaches (1. automatic extension-based migration, 2. manual migration) to migrate existing Grid Elements configurations to EXT:container.

For many years, Grid Elements has provided TYPO3 projects with flexible grid functionality. The Grid Elements team has contributed to the TYPO3 ecosystem by maintaining and developing this solution over many years. - The community appreciate their dedication and efforts. Many TYPO3 projects require flexible content structures beyond the default Backend Layout capabilities. TYPO3 projects may require flexible content structures, and EXT:container provides another approach for creating containers and grids.

Since last year, We (T3Planet and NITSAN) have migrated our TYPO3 templates from EXT:gridelements to EXT:container. New projects may use EXT:container based on project requirements.

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

Before starting the blog, we want to acknowledge B13 GmbH for developing and maintaining the EXT:container TYPO3 extension, which provides an alternative approach to Grid Elements. We also thank the Grid Elements team for their contribution to the TYPO3 community over the years.

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 Grid Elements to EXT:container, then try the below step-by-step guide.

Note: The examples below were originally tested with the following versions.

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

Step 1. Sample Configuration of Grid Elements

For the test-drive purpose, Here is the sample data-set configuration of Grid Elements

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.

Grid Elements and EXT:container provide different approaches for configuring allowed content elements. EXT:container can be used together with compatible TYPO3 extensions such as EXT:content_defender for defining allowed or restricted content element types.

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.

Have you migrated a TYPO3 project from Grid Elements to EXT:container? We would like to hear about your experience and migration approach. I would love to know your thoughts in the comment box.

Have a Happy Migration!