Content localization with TYPO3 Neos 1.1

With latest TYPO3 Neos 1.1.0 beta release it is possible and proved to start localizing your content. With this release fundamentals for localizing content in the TYPO3CR (Content Repository) are ready known as Content Dimensions. With TYPO3 Neos, 'locales' is one of the content dimensions. I implemented a working content localization for a big project which was already done in TYPO3 Neos recently and was just waiting for Neos 1.1 beta release and we now have it. I am happy to share the implementation experience with the world and you can get started having your first multilingual website done with TYPO3 Neos!

Getting started

1. Upgrade your TYPO3 Neos installation to 1.1.*@beta using composer. For this adapt your website base composer.json similar to the one distributed from TYPO3 Neos. So the require section should look like following. Then run "composer update"

"require": {
"typo3/neos": "1.1.0-beta2",
"typo3/neos-nodetypes": "1.1.0-beta2",
"typo3/neosdemotypo3org": "1.1.0-beta2",
"typo3/neos-kickstarter": "1.1.0-beta2",
"typo3/typoscript": "@beta",
"typo3/typo3cr": "@beta"
},

2. Define your default locales configuration. Add following code to Configuration/Settings.yaml file of your site package or the global one 

# I will first write the content in German language
TYPO3:
TYPO3CR:
    contentDimensions:
      locales:
        default: de_DE
Neos:
contentDimensions:
      dimensions:
        'locales':
          # The default preset to use if no URI segment was given when resolving locales in the routing
          defaultPreset: 'de'
          label: 'Locales'
          icon: 'icon-language'
          presets:
            'de_DE':
              label: 'German (Germany)'
              values: ['de_DE']
              uriSegment: 'de'
            'en_GB':
              label: 'English (Great Britain)'
              values: ['en_GB', 'de_DE']
              uriSegment: 'en'

# What is this all above?
# It means when there is a /de/ in the URI the German content will be displayed.
# When there is /en/ in the URI then if applicable English content will be displayed
# or it will fall back to German

3. Instruct TYPO3 Neos to start using the Localized Frontend. Add following lines in Configuration/Objects.yaml or your site package or the global one

Neos\Neos\Routing\FrontendNodeRoutePartHandlerInterface:
  className: Neos\Neos\Routing\LocalizedFrontendNodeRoutePartHandler

4. Flush and rebuild cache to take effect of configuration changes

./flow flow:cache:flush --force && ./flow flow:cache:warmup

5. Migrate existing content: If you already have some content written in your site then you can simply mark that content with the default locale using following command. This takes into consideration the Setting you have set in previous step TYPO3.TYPO3CR.contentDimensions.locales.default.

./flow node:migrate --version 20140326143834

6. Login to backend and watch out the URI. If the URI has something like ;locales=de_DE.html then this is a good sign and content dimensions are setup good.

Localizing the content

1. Implementing the language menu: The highly advanced localization UI is roughly expected in Neos 1.2. But we can start localizing the content with a simple language menu. There is a language menu implemented and it is under review. 

https://review.typo3.org/#/c/27657/

To implement this you just need to patch the TYPO3.Neos package using above Gerrit patch and then add following code to your TypoScript and HTML template respectively below

....
body {
parts {
languageMenu = TYPO3.Neos:LanguageMenu
}
}
....

<nav>{parts.languageMenu -> f:format.raw()}</nav>

2. To start localizing the content you can use the language menu and switch to desired language and start editing the content. Neos will automatically create the node variants only for the nodes which are changed.

3. Switching locale for labels: There are 2 locales in the system currently. The locale which is set with the Content Context of Neos to load the localized content and the i18n locale which is used by the Internationalization service which affects <f:translate> tags to show translated labels. Currently it is not handled with Neos 1.1.0-beta2 and discussion is going on the best way to do it. But meanwhile there is a workaround to make this happen for now. 

I have wrote a tiny Aspect class which makes this switching. So this Aspect simply reads the locale from the ContentContext of Neos and then sets it on the i18n service. 

Here is the code of the Aspect class

Cheers!
-Pankaj Lele

If any questions please contact me on Twitter @pankajlele or on IRC #typo3-coreteam or #typo3-neos

Categories: Neos CMS
Tags: TYPO3Neos

Copyright © 2019 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.