In depth: How to use new Multilingual Associations feature of Joomla 3.7

The latest Joomla 3.7 release brings more than 700 new features out and under the hood. Some of the most exciting features are the Custom Fields, backend menu manager and Multilingual Associations. We’ve already published a well-described tutorial on how to use Joomla custom fields. Today we’ll see an in-depth guide to using the Multilingual Associations component launched with Joomla 3.7.

The Multilingual Associations component provides a central place to find and manage all the translation contents.

Using this tool, you can edit your multilingual contents keeping side-by-side with the reference/original contents rather than the previous individual editing/composing. It helps provide a better and streamlined multilingual user experience.

Figure: Multilingual Associations side-by-side article interface (please click the image to enlarge).

In order to use the Multilingual Associations component, at the very beginning you need to have a multilingual Joomla site. We’ve already published a detailed tutorial on making a multilingual Joomla site which you’ll find extremely helpful. Once you’ve made your site multilingual, you’re ready to use the Multilingual Associations component.

So, I’m assuming you’ve made your site multilingual. Now let’s dive into using Multilingual Associations. Please click any image to enlarge.

Step 1: Enable Item Association

Navigate to Extensions > Plugins. Search and find the System - Language Filter plugin. Open System - Language Filter and make sure that the Item Associations option is set to ‘Yes’. Save changes.

Figure: Enabling Item Associations support in the Language Filter plugin.

Step 2: Associate Articles

We’ve just enabled item association in Joomla. Now we need to associate articles with one another to edit them side by side.

Open an article in editing mode, and click the Associations tab.

Figure: The article associations tab in the article editing interface.

You can associate an existing article or create new one and then associate, all from this interface. 

Figure: An existing article was associated.

Below is the article creation space which pops on the top of the Associations tab interface.

Figure: The article creation space of the Associations tab.

Our test multilingual site has 2 languages- English and French. We will associate an existing French article with an existing English article. 

Important: Don’t forget to press the ‘Save and Close’ button to complete the association. If you just click the ‘Save’ button, the article will remain ‘Checked-in’ (locked) so you would not be able to edit these articles on the Multilingual Associations’ side by side interface. 

After finishing the association, let’s visit the article list by navigating to Joomla Control Panel > Articles.

Figure: The Joomla article list with association status.

So, in the article list, the article association is marked according to the associated language(s) under the ‘Association’ section. We can see that, ‘English Article 1’ is associated with ‘French Article 1’. Both of them have the counterpart language code appeared in their rows.

Step 3: Using the Multilingual Associations Component

If you’ve completed the above steps, now you are ready to utilize the Multilingual Associations component. Navigate to Components > Multilingual Associations.

Figure: Opening the Multilingual Associations component.

The first page of the component provides several criteria selection options to find associated articles.

Figure: Multilingual Associations component first look.

You can select an ‘Item Type’ (articles, contacts, categories, menus etc.) from here. Next, you need to select a language. After defining these two criteria, a list of articles will be displayed.

Figure: Multilingual Associations article list.

Here you can see which articles are associated, and which are not. These are clearly marked by ‘Associations’ and ‘Not Associated’ sections.

Figure: Available article options inside Multilingual Associations.

However, you can click the language code under the ‘Not Associated’ section to create a new article and associate that with the current article on the row.

Figure: Creating an article inside Multilingual Associations.

You can also use the 'Copy Reference to Target' option to simply copy the original article to the target article field and then edit it in the target language. If you just want to translate some texts, this option may not be that much useful, because the two languages are different. But, when there are some images and special formatting used in the reference article, the Copy Reference to Target option will be very helpful. However, I've tried to use this feature, but it didn't work as expected (I used Joomla 3.7.1). 

Figure: In my experiment, the Copy Reference to Target option didn't work as expected.

When I clicked the Copy Reference to Target, it once copies the reference contents to the target field, then the copied article instantly disappears from the target field. It seems that the feature has an issue. Every time I tried to copy the reference to the target using the one-click method, it failed to work as it should have been. Although, it saves a draft copy of the failed target article every time I hit the button. (Update 24th May 2017: This issue was fixed in Joomla 3.7.2.)

Since we already have an associated pair of articles (English Article 1 and French Article 1), so we will open the English Article 1 from the Multilingual Associations’ list for this tutorial.

Figure: Opened an article with Multilingual Associations.

Initially, only the original article is displayed to the left. We need to select the target language to which we want to translate the original (reference) article.

Figure: Side-by-side articles in Multilingual Associations.

Once we choose the target language, the both associated articles open side-by-side, so here we can easily edit them to offer the maximum multilingual experience to the users. This reduces the requirement of time and resources.

Figure: Article Saving Options in Multilingual Associations.

You can save the reference (original) article by clicking the ‘Save Reference’ button, and also save the target (translated) article using the ‘Save Target’ button while editing side-by-side. However, I think a ‘Save Both’ or ‘Save All’ button to save the both side-by-side opened articles might be useful too. Hopefully the core Joomla team will add this in future :)

I believe this tutorial makes it crystal clear to you that how to use the Joomla 3.7x Multilingual Associations feature. It’s really useful for those who offer contents in more than one languages. The side-by-side editing system will make the life of a content editor much easier.

Have you tried the Multilingual Associations component yet? Please share your experiences and thoughts via comments.