Introducing the Strapi localization plugin by Localazy

Blog articles
#1

🙋 What is Strapi?

Strapi is an open-source, headless CMS.

A headless CMS is a backend-only content management system (CMS) built from the ground up as a content repository that makes content accessible via an API for display on any device. This way, Strapi enables content-rich experiences to be created, managed, and published to any digital product, channel, or device.

Just like Localazy, Strapi can save developers a lot of time while giving them the freedom to use their favorite tools and frameworks.

The main benefits of Strapi include:

  • ⏲️ Shorter time-to-deploy
  • 🌎 Omnichannel content distribution and centralized content management for any platform and device
  • 🔗 Unparalleled customization and universal API-first connectivity
  • 🤸 User-friendly interface for content editors
  • 🚩 Internationalization support

🤔 Why use Strapi headless CMS?

As a developer, you can benefit from Strapi's multi-database support, use JavaScript for the front and back end, auto-generate documentation with a one-click integration, and manage authentication and permissions granularly.

As a publisher, you will fall in love with its intuitive UI. You will also like the minimalistic editor, powerful media library, and flexible content management with built-in SEO tools.

Strapi also allows you to connect your preferred solutions from third-party providers thanks to its growing marketplace of plugins, including the Strapi localization plugin built by Localazy.

🚀 Getting Started with Strapi Localization

Now, you can seamlessly upload your content to Localazy and translate it with machine translations or hire professionals on the Localazy platform to do it for you.

All you need to start is a Strapi website and a Localazy account.

Learn How to set up your first Strapi website in the quick start guide.

Prerequisites

Before using the plugin, you need to create a Localazy account. You can do that here.

Also, ensure that the Internationalization (i18n) plugin is installed (it should not be a problem as it comes built-in since version 3.6.0). That's all you need from Localazy's side to use the plugin. You can create a new localization project while connecting your Localazy account to Strapi.

Another requirement is some content to translate (obviously). So in Strapi, I prepared some Collection Types - namely Book and Restaurant for demonstration purposes of this tutorial.

To show you that The Official Strapi Plugin by Localazy can also deal with more complicated content structures, I created a couple of components (including repeatable ones) - Food, Ingredients, and Recipe, to name a few. These components are used within Collection Types.

The Content Types structure is demonstrated in the image below.

Strapi Content Types

With the Content Types defined above, I created some content samples—a couple of books and restaurants, as shown in the image below.

Let me briefly describe the restaurant content type. It consists of:

  • title
  • description
  • recipes that a restaurant cooks - repeatable component
  • each recipe has a name and ingredients - again, repeatable component
  • an ingredient has a name and pcs and a flag whether it's required in a recipe - not all of the fields are texts
  • a restaurant has an address consisting of street, city, and country
  • there's also another component (not repeatable) various descriptions, history of a restaurant, and excerpt

Now that you can visualize our restaurant, I can mention that I have already prepared a few of them. Besides, I also created a couple of books, as shown below. Let's now use the Localazy plugin to translate the content.

Strapi Sample Content

Logging in and account overview

Navigate to the plugin screen by clicking on a flag icon in the left sidebar. In case you're not already logged in, you should see a screen similar to the one below.

Log in with Localazy

Click the Login with Localazy button. Log in and either select one of your existing projects to connect to or create a new one in the Create New Project tab.

Select Project / Create New Project

Click Authorize. The procedure should finish with a success screen informing you that you can switch back to Strapi. The authorization process also automatically recognizes the default language of your Strapi project; therefore, when creating a new project in Localazy, we set it up for you with the correct source language.

Alright, let's do a quick walkthrough before processing our content. Navigate to the Overview screen. There are a couple of useful bits of information displayed. You can see the name of the connected user and project. There are also the number of remaining keys in the organization the project belongs to.

Note, that if you use up all of the keys, you won't be able to download translations to Strapi. Learn more about the source key limits.

Finally, by clicking on the link, you can navigate directly to the project in Localazy.

Connected Account Overview

One more important thing to mention before uploading/downloading content is the Content Transfer Setup.

Content Transfer Setup

Content Transfer Setup works as a selector of parts of your Strapi project marked for upload & download to/from Localazy. See the screen below.

Content Transfer Setup

If you want to disable a whole collection from transferring, toggle the switch on the right side of the collection's name. This way, you can keep your collection transfer setup intact for when you decide to transfer the collection later, so you don't have to click on the fields repeatedly.

Some of the fields are disabled. This is due to the fact that the field is not a text. For instance, a field named Pages in the Books collection is a number and therefore can't be translated. Similar applies, e.g., for relations.

Every time you update your collection type (add, update, delete the whole collection or a field), you need to check your Content Transfer Setup and update it according to the collection types. Otherwise, the plugin won't be able to determine whether you'd like to transfer the field or not, and consequently, it won't let you proceed with upload or download.

Now that we know how to set up our content transfer let's upload the content to Localazy. 🎉

Upload to Localazy

This part of a plugin serves for uploading the content from your Strapi project to Localazy. On the Upload to Localazy screen, there's information about the Default Strapi language and Localazy Source language. As noted above, these have to be compatible (in the means of their ISO codes) to proceed.

Strapi uses - in locale variants. Eventhough Localazy uses e.g., en_US, it's not a problem as the plugin automatically transforms between the code variants.

It's also impossible to process uploads when the Content Types Model changes (also mentioned in the previous section).

Upload to Localazy | upload disabled

You can click the Start upload button when everything is set up correctly. Let the plugin quickly process the upload, and at the end, you should see a report similar to the one below:

Upload to Localazy | update completed

Besides the general information noting that the upload was successful, the plugin also informs you about collections that were disabled for transfer.

Translate the content in Localazy

Now, add a couple of languages and translate your content.

Localazy offers three approaches to choose from and blend to translate your project:

  1. 💪🏻 Translate on your own or invite contributors - You can start translating on your own and use our built-in suggestion system.
  2. 🦾 Translate everything in bulk via machine translation - With the Localazy Autopilot plan, you can instantly translate all strings by running a machine translation over the content. This is great for the first iteration and localization testing of your Strapi website.
  3. 🚩 Fully automate the translation process with the Continuous Localization services - Once your Localazy integration is set up, you can order translations from our vetted translators and get your project translated by professionals automatically. The service is also proactive, so you don't have to micromanage translators, and you can visit Localazy only once in a while to check the progress.

I decided to apply the machine pre-translate on my strings, so everything was quick and easy for the first round of translations.

Translate Content in Localazy

Download to Strapi

You can now download the content translated in Localazy to your Strapi project.

Again, download is not enabled in case of Content Types Model changes or incompatible languages (as seen on the screenshot below).

Click the Start download button. Let the plugin fetch your fresh translations and check the download report. It informs you about various actions that happened during the download process, such as:

  • Overall download result,
  • created locale,
  • not supported locale,
  • created entry in a certain language,
  • updated entry in a certain language.
Not all languages supported by Localazy are supported by Strapi. Have in mind that downloading unsupported locale to Strapi will result in a warning. Supported languages will still be downloaded.
Download to Strapi | download completed | updates

Browsing the translated content

Great! Now it's time for the last step - seeing the translated content. Click on the content manager to see collections. You might need to refresh the page to load newly created locales.

Click on an item to see its detail. Only the fields (and subfields of collections) set for transfer in Content Transfer Setup were localized. Below is an example of the original English page and the Czech version after downloading translations from Localazy.

Translated Content detail in EnglishTranslated Content detail in Czech

☝️ You might be asking:

What about my images?

To create localized versions of your images, you can use the Localazy Figma plugin.

The Figma plugin allows you to translate your website and UI designs in a similar fashion as the Strapi plugin. You can also use it to create localized versions of your product images, ad banners, and any other pictures with embedded texts that couldn't be extracted or handled by other internationalization techniques.

Learn more about the Localazy Figma plugin.

What about the drafting system?

If a source language content item is in Draft, the localized item will also stay in Draft. In case the item is Published, the localized item will be Published, but only if all of the fields set for translation are translated. Otherwise, it will stay in Draft.

✔️ Conclusion

We hope you liked this article showing the power of the Strapi localization plugin by Localazy. We believe that anything that can be automated should be automated, and localization is one of those things.

Feel free to contact us at [email protected] or leave a comment below if you have any questions regarding this tutorial, the plugin, or Localazy in general.

If you are a developer using Strapi, you can also join the Localazy Discord to see what other developers using Localazy are up to or accept our invitation to the Localazy Community on GitHub, where you will find more community-sourced assets for your projects you can contribute to. Looking forward to meeting you there!

This is a companion discussion topic for the original entry at https://localazy.com/blog/how-to-strapi-localization-with-localazy