How to translate a Joomla4 website with Falang

Index:

Complete guide on how to develop a multilingual site in Joomla 4 using the powerful Falang component. Translation management, SEO-friendly URLs and advanced customisation for an easy-to-use and configure multilingual website.

After understanding how to create a multilingual site with Joomla4's native system, it is now time to get to know the most popular and widely used component for managing multilingualism in a simpler and 'smarter' way.

Difference between the native system and Falang

Joomla's native multilanguage system is quite simple to implement but difficult to understand: you have to get into the order of duplicating content and creating associations between them. This leads to the creation of a huge mass of articles that are, in reality, one copy of the other.

On the other hand, Falang (which is the 'son' of the famous JoomFish component, used in the older versions of Joomla) allows you to save and manage translations in a much simpler way: no content has to be duplicated, but just manage the translation through the component or, more simply, through the quickjump buttons next to the title of each article.

So, to summarise, thanks to Falang, we don't have to duplicate menus, categories, content, etc... all we have to do is 'translate' them one by one in a space dedicated to translations, which is easy to reach and 'understand'.

Well, let's get started!

Installing the Falang component

Falang can be downloaded from the official site: faboba.com . There are several versions available (one of which is free).

The free version is absolutely functional and is very good for translating a Joomla website, and the differences are purely to do with aesthetics or speed/user-friendliness:

• There is a backlink to Faboba which will be visible at the bottom of the site
• There will be no flags in the list of articles/items, which speed up the insertion of translations
• There will be some missing features regarding the K2 component, UTF-8 links and custom flag images

Once you have purchased the component (or downloaded the free version) you can install it in your Joomla system as any extension (left menu -> System -> Install -> Extensions).
The installation package already contains the extension, plugins and the 'flags' module needed to get the system up and running.

How to install additional languages on Joomla4

The first thing to do is to decide which languages will be the languages of our website: it will be necessary to install all additional languages (in addition to the basic one) directly from the control panel.

To do this, simply go to:

1. Main menu -> System
2. Install -> Languages
3. Click on the blue "Install" button next to the additional language you wish to install
   Once done, a confirmation message will come up: "The installation of the language pack was successful."

Then go on to activate all the languages we want to manage with Falang. To do this, simply go to:

1. Main Menu -> System
2. Manage -> Content Languages

Here you must activate the languages you want to make available on your site, to do this just click on the grey X to turn it into a green tick.

Once the languages have been activated, Falang will be able to handle them with its translation system.

Let us now move on to configuring Falang directly.

How to configure Falang on Joomla4

Once the component has been installed and the additional languages configured, we have the opportunity to change some basic options before moving on to the actual translation. This step should not be skipped because some options are very useful for saving precious time during everyday work. Let's go through the main ones:

To get to Falang's options, click on:

Here is the screen we will find in front of us.

The options, specifically, are:

• Download ID: this is the unique code you find in your private area on the official falang website (https://www.faboba.com/). It is used to automatically update components and plugins
• Fontend Edition: if enabled, this option allows you to manage translations directly from the frontend (if the registered and logged in user has the ability to edit articles)
• Copy images and urls params: this option is very handy and should always be activated in case the images of the articles (I mean the one in the "images" tab so the intro image and the extended image) are the same in all the linuge. With this option activated those parameters will be copied automatically and you will not need to enter them language by language.
• Translate template: this option allows you to choose a different template style language by language
• Show in list / Show in forms: useful options to have a status of the translation (translated - not translated - translation incomplete) in the article list and in the article editing form
• Components List: here you can enter the list of components where the "quickjump" should appear (we will see more about this in a moment)
• Advanced menu show: allows you to show or hide menus according to language. It is disabled by default.
• Reorder Plugin / Update caching: these are two options to keep active as they are necessary for Falang to function properly.

What is Falang's quickjump?

This simply consists of one or more buttons (depending on how many additional languages are installed on the site) displayed in the item list (e.g. in the article list) to open the item's translation form directly in a modal without going through the component. This is a feature of the paid version of Falang and saves a great deal of time when translating articles.

How to translate a Joomla article with Falang

Now that we have installed and configured Falang correctly, we can move on to the most tedious fun part: translating all the articles!

Important: Falang is a translation system, it does not translate everything for you!

There are two ways to do this, depending on whether you have installed the free version or the paid version of Falang.

For the free version

As there is no quickjump available, the only way to translate an article is to do it directly from the component. The steps then are:

• Click on the main menu on the left -> Components -> Falang -> Translation
  Falang's translation system will appear, empty. We have to select from the two drop-downs in the top right-hand corner what we want to translate:
  
  
  
  
• To translate an article, select from the first drop-down list the "Article" item and from the second drop-down list the item corresponding to the language you want to enter (e.g. "Italian" if your site is in English and you want to translate it in Italian)
• Once you have selected both drop-downs you will see a list of all your articles in a table with the following columns:
  • Title: the original title of the article
  • Language: the target language of the translation you are about to enter
  • Translation: if you have already translated the article, you will find the translation of the title here
  • Changed date: the date of last modification
  • State: the status of the translation, it can have three states
    • Red: the translation does not exist, it has never been entered
    • Yellow: the translation exists but is incomplete (fields are missing or the original article was changed after the translation was inserted)
    • Green: the translation is complete and up-to-date
  • Published: whether the translation is active or not (as with the 'published' status of articles, translations may also be active or not. When translating content, remember to publish it)

Click on the title of the article to enter the form for entering the translation.

For the paid version

If you have the paid version of Falang, translating an article will be much faster. You will in fact already have 'quickjump' enabled by default. In case you do not see the quickjump button (due to an installation problem or if you have switched from the free to the paid version at different times) you can enable it as a normal plugin, so from:

Main menu on the left -> System -> Plugins

Simply search for 'Quick Jump' and activate the plugin.

Then click on the flag next to your article in the Joomla content list and the translation entry form will appear in a modal.

What to include in the translation form of an article

Now that you have arrived at the article translation form (either by component, or by quickjump), it is time to enter the translated content.

The screen is very intuitive: on the left will be the original texts, on the right will be the fields to be translated. More specifically, it is possible to translate

• Title
• Alias
• Content
• Metakey (keywords)
• Metadesc (meta description)

At the bottom will be the article parameters.
If in Falang's options you have selected  to "YES" then this part will already be filled in with the data of the original article, otherwise it will be empty and you will have to recompile it (especially the images part of the article).

Once all content has been translated, remember to set 'Published' to 'YES' in the top right-hand corner. Otherwise, the translation will not be enabled and will therefore not be readable from the frontend.

Set the flags module on your website

We are almost there! Now that we have translated all the content of the site (in addition to the articles, we can also translate modules, menus, etc. in the same way), we just need to enable the classic "flags" in the frontend of our site, so that our users can change language quickly and easily.

By installing Falang, the module should be installed automatically, but we have to place it where we want it and activate it.

To do this, simply go to:

Main menu on the left -> Content -> Site Modules

Look for the module "Falang Language Switcher" and, as with all modules, enable it and position it where you want it with the "position" dropdown in the right-hand column:

Inside the module we find several interesting options, including:

• Use dropdown: allows you to choose whether to use the classic 'flags' or the language selection dropdown
• Advanced dropdown: adds options to the dropdown (such as search)
• Horizontal display: if you choose to use flags, you can choose whether to display them horizontally or vertically
• Active language: allows you to display the active language or not (e.g. if you have two languages and this option is set to "YES" you will always see two flags, otherwise only the flag of the non-active language)
• Use Image Flags: you can choose whether to use flags (on YES) or language names (e.g. IT, EN, etc.)
• Show name / Language Full Names: allows you to choose whether to show only "IT" or "Italian", etc..
• Pre-test / Post-text: allows you to add text before or after the flags / dropdowns

Once you have set up and configured the module, if all has gone well, you will have your nice little flags on the site and clicking on the flag of the second language should correctly display the translation you have entered from the backend.

Happy translation!