Flag Icons language selector

[cataalin]

Is there a way to put flags on the site? I tried to use famfam with css since it comes with the site but it does not show me the flags, I would like to put flags to the countries in the language selector as I had version 1.0, the site comes loading the famfam flags css by default but it doesn't work for me.

[Wruczek]

Country icons were removed from languages as I thought that it's a bad UX decision, and also I think they don't look that good. The famfam flags are nice, but they are tiny (only 16x12px) and often blurry. SVG flags look flat and weird when scaled down.

There is also not an easy way to add it back, as we do not store the country code (which is needed for the flag), but only the language code. You could try editing body.latte file and add the following code on line 116:

<i class="icon-flag famfamfam-flags {$lang->getLanguageCode()}" data-toggle="tooltip" 
   title="{$lang->getLanguageCode()|upper}" aria-hidden="true"></i>
{$lang->getLanguageNameNative()}

This will give you something like this:

To fix some icons you would probably need to add a column in DB with the country code, then edit PHP/latte to use that country code to display the flags.

[cataalin]

Ami I find it interesting with the flags using png instead of svg it doesn't seem so bad, I didn't quite understand what you mean that there is no easy way to add it, I tried your code and it stops working fine, I also edited line 106 so that I generated the flag according to the selected language and this is the final result, I don't know if it's the most appropriate way but it didn't turn out badly, what do you think?

To correct the icons I only edited the css of the flags changing it to the language code of the DB.

Line 106:

<i class="fas fa-language"></i>{$userLanguage->getLanguageNameNative()}

to

<i class="icon-flag famfamfam-flags {$userLanguage->getLanguageCode()}"></i> {$userLanguage->getLanguageNameNative()}

Line 116:

{$lang->getLanguageNameNative()}

to

<i class="icon-flag famfamfam-flags {$lang->getLanguageCode()}" data-toggle="tooltip" 
   title="{$lang->getLanguageCode()|upper}" aria-hidden="true"></i>
{$lang->getLanguageNameNative()}

[Wruczek]

To correct the icons I only edited the css of the flags changing it to the language code of the DB

Have you changed or added the CSS class? If you have changed it the flag will stop working on other parts of the website (e.g. viewer). You must add a class to the list, instead of changing it.

For example: Ukraine - change

.famfamfam-flags.ua {

to

.famfamfam-flags.ua, .famfamfam-flags.uk {

[cataalin]

You are right, it did not cross my mind, I am going to add the class and in principle it would be ready, the php code as you see it?

[Wruczek]

Yeah it should get the job done. I would probably add a special column to languages in DB and use that for the country flags, but your solution also gets the job done 😃

[cataalin]

Sí, debería hacer el trabajo. Probablemente agregaría una columna especial a los idiomas en la base de datos y la usaría para las banderas de los países, pero su solución también hace el trabajo😃

perfect then, solved, thanks