Professional Content Management

Free and open source, TYPO3 CMS is the most widely used enterprise-level CMS.

Test TYPO3 now:

TYPO3 live demo

Inspire people to share

Offer your skills and contribute to the project. The community is growing and does more than just coding. 

A Community Effort

TYPO3 CMS is an Open Source project managed by the TYPO3 Association.

The Project

Do you have a question?

Ask the community or a professional partner.

Translate TYPO3 Backend In-Context

Categories: Community, TYPO3 CMS, Localization Created by Xavier Perseguers
A computer screen showing a user interface for inline editing content in a CMS. It displays text translation options with English and Danish translations on the right.
The TYPO3 Localization Team gathered in Düsseldorf for a full week during the TYPO3 Community Sprint Q4/2024 and made the TYPO3 extension, Crowdin, a reality. The extension provides an “In-Context” feature which enables TYPO3 backend users to translate labels of the TYPO3 Core and extensions directly in the TYPO3 backend.

From Prototype to Reality

One of the key items on our agenda was testing and evaluating what began as a proof-of-concept about two years ago.

Approximately two years ago, while the team was preparing to transition from the old translation server to Crowdin, Georg Ringer developed a prototype to embed Crowdin’s In-Context localization tool into TYPO3. Although promising, this tool was neither widely adopted nor promoted within the TYPO3 community. We decided to revisit it, assess how it has evolved over the past two years, and adapt it for use with modern TYPO3 versions.

What is Crowdin In-Context?

Crowdin In-Context provides an overlay for the TYPO3 backend, enabling translators and proofreaders to work directly in the live application and instantly preview their translations in context. This approach improves the quality of localized content and resolves issues typically caused by a lack of contextual information in traditional workflows.

A computer screen showing a user interface for editing content in a CMS. It displays inline text translation options with English and Danish translations on the right and various navigation options on the left sidebar.

How it Works

Within Crowdin, the TYPO3 Core and selected extensions are configured with an additional pseudo-language. When TYPO3 is set to display the backend in this special language, all texts are replaced with unique identifiers instead of the original text.

Simultaneously, the Crowdin extension loads a special JavaScript tool that searches for these identifiers and replaces them with editable labels. This works regardless of whether the text is displayed as a button, a clickable link, or as standard text. As a result, the TYPO3 backend looks the same, except that translatable strings are now editable.

Translations are made directly within the application, eliminating the need to open the Crowdin website to search for corresponding strings. Instead, a simplified version of the Crowdin Editor is displayed, offering features like translation memory (TM), machine translation, approval/voting options, comments, and term management. Proofreading is also simplified, as suggested translations can be reviewed in their real context.

All features are available in frontend as well, in the case of frontend plugins and strings, for any extension with a working Crowdin implementation.

How Do I Install and Use This Extension?

The Crowdin extension for TYPO3 is compatible with TYPO3 versions V11, V12, and V13.

To Install It

1. Download and install the Crowdin extension via TER or Composer.

2. Run the command-line instruction:

./vendor/bin/typo3 crowdin:enable

3. Navigate to Admin Tools > Maintenance in the TYPO3 backend.

4. Click the “Manage languages” button in the “Manage Language Packs” card.

5. Add the special language “Crowdin In-Context Localization” to your TYPO3 installation.

6. Click “Update all” to fetch the latest language packs.

Once installed, you can access the Crowdin menu via a popup in the top toolbar:

Settings menu with options: TYPO3 Core Extensions, LDAP / SSO Authentication, Resize images automatically, and News system. The News system option is highlighted, and there is a toggle switch next to Crowdin.

This toolbar menu allows you to quickly enable or disable the In-Context localization tool and select which extension to work on. Note that only one extension can be selected at a time.

For further information, please refer to the Crowdin extension Documentation.

Conclusion

We hope this tool will help to translate extensions and TYPO3 itself more effectively. We look forward to hearing your feedback on how it can be further improved.

Contact the TYPO3 Localization Team any time in our Slack Channel #typo3-localization-team or via email at localization(at)typo3.org.

Related News

Latest news

Show more