Customize locale icons

Oct 29, 2024

Although it's convenient to use country flags to represent languages, linguistic varieties do not map cleanly to political boundaries. If your website uses Concrete's built-in multilingual system, your linguistic requirements may require some customization. Here are some ideas.

Enable accessibliity labels

By default, Concrete provides tooltips for toolbar icons, but they may not always work correctly. Here's an example of a Toolbar tooltip that appears when hovering over an icon:

However, elements of some themes may overlap these tooltips like in this example:

In order to ensure that the meaning of the icons is clear, you can enable Toolbar titles. Go to Dashboard > System & Settings > Basics > Accessibility, tick the checkbox for "Enable Toolbar Titles", and select Save. When enabled, each Toolbar icon will be accompanied by a title.

This can be particularly helpful when the flags representing various linguistic locals look similar, especially when shrunk to just 16×16 pixels:

Use custom flags

Another issue that may arrise is the use of different writing systems. Many languages can be represtented by more than one writing system, even within a single region. For example, Chinese can be written with traditional or simplified characters but these may not be easily differentiated by flags. Mainland China uses simplified characters, while Hong Kong uses traditional characters. However, both flags are mostly red that look very similar as small icons:

You can override the region flags either in a theme or in the application directory (code). In the application/ directory, create an images directory, then within that directory, create a countries directory. Place a custom PNG graphic named as <country_code>.png, e.g. hk.png for Hong Kong and cn.png for China. In this example, rather than flags, we can use the Chinese characters that represent the traditional and simplified writing systems rather than flags.

Now when you view the locales, you will see icons that distinquish the writing systems rather than regions:

Further development

For those wishing to develop a more sophisticated solution, the CountryList service fires the on_get_countries_list event which could be used to modify the countries list (and possibly the names of matching icons representing those countries). Concrete relies on the Punic PHP-Unicode CLDR Toolkit library for locale information. If you have a specific need which has not been met, check out the project here.

Recent Tutorials
Customize locale icons
Oct 29, 2024
By myq.

How to customize locale (language region) flags

Concrete CMS Caching Guide
Oct 16, 2024

An overview of types of caching in Concrete and considerations when using them.

Redirect all requests to HTTPS
Oct 9, 2024
By myq.

How to follow best practices for a secure web

Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Improvements?

Let us know by posting here.