Native Language Switcher For Multilingual Sites in Drupal

Drupal Version Compatibility: Drupal 8, Drupal 9

As the reach of the internet has expanded, it has become very important for businesses to have multiple languages in their web applications. Multilingual web applications help any organization in connecting with more people across the globe and thus provides a competitive edge in expanding the business in different regions.

When it comes to building multilingual websites, Drupal is a very popular choice among the businesses as it provides features outside the box. One such essential feature that Drupal offers is the UI for switching the language on the site via the language switcher block. In this post, our focus will revolve around getting the language switcher block as a business requirement that I achieved using a custom module. Let’s go:

Business Requirement

The requirement was to show the language switcher block on the site, where the links to switch languages should be displayed in that language itself. For example, "Spanish" should be displayed as "Español".

Getting the Language Switcher Block

In order to meet our requirement, I did a minor exercise on how the language switcher block output looks out of the box. And during this exercise, I performed the following steps:

Step 1

Installation of the core language module.
 

Step 2

From this path “admin/config/regional/language” on my Drupal instance, I Installed the languages that I wanted to show in the language switcher block. See below screenshot for the languages installed:
 

Step 3 

After the languages installation, I placed the language switcher block in the sidebar-second region of the theme.

Step 4

That’s it, the home page now shows the language switcher block as below:
 

Uh-oh! Problem

If you see the default language switcher block output in the previous image, you will notice that it’s showing all the language link titles in English. This is because the current language of the site is English.

Analysis

To tackle the problem, I first wanted to find out how Drupal Core creates and outputs the language switcher links. Otherwise, any applied solution would be like shooting in the dark. So I did the following exercise:

• Step 1: Since the language-switcher is a block provided by the core language module, I browsed the language module to find any block plugins in it.
• Step 2: Bingo! - I found the one and only block plugin called “language_block”. It resides at namespace “Drupal\language\Plugin\Block”.
• Step 3: I looked at the “build()” function of this block plugin and found out that the switch links are displayed using the theme “links__language_block”.

That’s it, I found out how the links are created and now I can apply the appropriate solution.

The making of native switch links

It was now time to decide if the problem needs to be solved using a custom or contributed module. Being a minor change, I decided to achieve this using a custom module. The quickest solution was to pre-process the theme used by the block output and change the link titles in it. To do so, I performed the below steps:

• Step 1: Creation of the custom module called language_switch_links and by adding the “language_switch_links.info.yml” in it as:
  
   
• Step 2: Enabled the module
   
• Step 3: I created the “language_switch_links.module” file and added the below code to it:
   

• Step 4: It was now time to rock and roll as the language switcher block output changed to below:

Disclaimer

A possible problem: In case your site has any custom language installed via the path “admin/config/regional/language/add”, the above preprocess hook will not show your custom language titles.

• Example: Let’s say a site has a custom language with below details:
• Title: Fish-Language 
• Language code: fl
• Native translation: Burrrr

With the above preprocess, the fish-language will be hidden from your block output.

Solution: You will have to add the custom language details to the output of the function “getStandardLanguageList()”. Below code shows how the preprocess function will look like:

Conclusion

Using a contributed module would also have this problem solved. But it would have meant additional future maintenance related to the module updates for a relatively smaller functionality. Hence, I prefer the custom approach to roll the dice.

I hope this article helped you and taught you how the preprocess hook could be used to convert language switcher links to its native form. As a matter of fact, the same hook can help you change language switch links to any form based on your requirement.