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.

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.

But, Why another grid extension EXT.container?

Before we start the migration solution, Let’s figure out why the TYPO3 community created and already popular yet another Grid container kind of extension?

Because…Flexible in-page structures built the core way!

Fact and Figure

  • Built and maintained by the most valuable TYPO3 company B13 GmbH (from Benni Mack - Mr TYPO3 core man).
  • 136,000+ Downloads within a few months (Shows the TYPO3 people love it).
  • Its Verified TYPO3 extension; Read more.
  • TYPO3 version compatibility - TYPO3 community will have peace of mind to get regular compatible updates of future TYPO3 versions.
  • Configuration builds with Extbase/PHP code instead of long TypoScript.

EXT.container - TYPO3’s built-in concepts allow integrators to create setups for all kinds of page types, template types, and content management scenarios, but many projects end up needing more flexibility in placing substructures containing elements or modules within a content area.

Simple amazing containers (grids) as custom TYPO3 Content Elements

  • No default containers, everything will be built the way it is needed for a project
  • Supports multilanguage (connected or free mode (mixed mode not supported))
  • Supports workspaces
  • Supports colPos-restrictions if EXT:content_defender
  • Frontend Rendering via DataProcessor and Fluid templates
  • Container provides the needed flexibility for all TYPO3 projects by just installing the extensions. Placing substructures containing elements or modules within a content area was never easier.

Benni and the team already mentioned, Why did we create another "Grid" extension?

Also, I highly recommend reading B13’s official blog on EXT.container.

  1. Flexible Containers and Grids for TYPO3
  2. Flexible Containers and Grids for TYPO3 (Part 2)
  3. Flexible Containers and Grids for TYPO3 (Part 3)
  4. Example Extension

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

Option 1. EXT.gridtocontainer - Migration Gridelements to Container

EXT:gridtocontainer - Cool TYPO3 extension developed by Stefan Bublies. It is a small migration extension with a backend module for those who want to switch from EXT:gridelements to EXT:container.

For each gridelement used in your installation, you can manually choose which container element it should be migrated to. By default, the column numbers are kept. However, it is also possible to adjust the column number of the related content elements.

This extension should only be used on development systems. It is not recommended to use it on production systems. It can only be used by administrators with system maintainer rights.

 

// Step 1. Install EXT.container
composer req b13/container

// Step 2. Install EXT.gridcontainer as dev dependencies
composer req --dev sbublies/gridtocontainer

// Step 3. Start the Creation and Migration Process
Go to Admin tools > Grid migration provided by this extension. Click-n-go to create alternative containers, Migrate all grid elements to containers etc.

Option 2. Manually Migrate EXT.gridelements to EXT.container

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.

How to Allow/Disallow Content Elements?

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'
                    ]
                ],
            ]
        ]
    )
    )
);

Wrapping-up!

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!

Post a Comment

×
Captcha Code Can't read the image? Click here to refresh