Joomla! Issue Tracker - J!Tracker

Download
Launch
Feeling Lucky

[#801] - Language flags

Success

User tests: Successful: Unsuccessful:

avatar elkuku
elkuku
21 Jun 2016

Ref #764

#764 (comment)

could we use SVG's for the flags instead of separate GIF's that cause 18 additional resource loads per page

Now this opened not one but several cans of worms for me...

The most easy solution (I found) would be going to https://www.flag-sprites.com generate the combined flag image plus the required CSS and go home.

Unfortunately the flags they offer do not contain some languages we currently use. Mainly catalan and british english. We may leave those blank or just choose a "nearby" one but - using an EU image flag for en-GB might get us in deepest trouble (who knows if they really go with the brexit), and I don't want to get killed for using the "wrong flag"...

So I bit the bullet (before it hits me)... and my first stop was here: http://www.phpied.com/command-line-css-spriting which gave me some ideas on how this could be achieved.

Language codes

Another thing to consider was the language "code" to use.
Currently we are using "Joomla! language codes™". The only reference I found was at Micro$oft.

There are several other language codes including

There are also some PHP Libs dealing with language codes:

I decided not to use any of those but instead reinvent the wheel (again) - I love Joomla! you know - and added a list of known languages with "our" codes to the language helper class. See: https://github.com/joomla/jissues/pull/801/files#diff-fd55cb6560b16d21f62ec0d0898c7e17R43

Flag images

This is the best and most complete flag images collection that I found and that is free of charge (as in 0$) available on the internet:

You really wont miss the Jolly Rogers collection including a flag icon for Calico Jack Rackham: calico jack rackham

Test instructions

  • There is a list of known languages which is copied from here: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
    • Translators: Please review the code here and check that the name that will be displayed in the language selector (the display property) is correct
  • There is a new command jtracker make languageflags. This command requires imagemagick to be installed on your system and the flag images to be stored "somewhere". To test this command you have to download the flag images from here as they are not included in this PR.

    This command will do the following:
    1. Create a combined image with flags for the languages currently "installed" in our JTracker application using the montage command and store it at the path given by the --imagefile option (defaults to /cache/flags.png)
    2. Generate a CSS file at the path given by the --cssfile option (defaults to /cache/flags.css).
  • Hopefully you have a local installation so you can check that the language selector displays and works correctly:
Before After
2016-06-21-161157_1366x768_scrot 2016-06-21-160858_1366x768_scrot

hF

avatar elkuku elkuku - open - 21 Jun 2016
avatar MATsxm
MATsxm - comment - 21 Jun 2016

If it helps,
as reference, I also use
https://chronoplexsoftware.com/myfamilytree/localisation/languagecodes.htm
(interesting for native names)
and this one:
https://github.com/jlongster/php-product-details/blob/master/localeDetails.class.php

avatar elkuku
elkuku - comment - 22 Jun 2016

Yes this indeed helps a lot as the information I posted above is only the result of some hours of internet research performed today, so I may be very wrong in several points.

The first link you posted is a list of language codes that are used in the .NET Framework. Those codes do not follow any standard (I guess?), and - is this what we are using in Joomla!?
And then, I am not sure if I should use 中文(中华人民共和国) or 中文 (Zhōngwén) for Chinese, so I would leave the final decision to the native speakers (I can only cope with 3 languages)

The second link also was quite helpful as it states in the first line:

 Holds locale data for all the locales we currently support

The script is pretty much the same as those at:

So, again, everybody seems to have to bake his/her own locale file for the languages, ISO-XXX codes, currencies, native names and whatnot that are "supported"...

Any further information on this topic would be highly appreciated. ?

avatar mbabker mbabker - change - 22 Jun 2016
Status New ⇒ Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 ⇒ 2016-06-22 14:58:59
Closed_By ⇒ mbabker
avatar mbabker mbabker - close - 22 Jun 2016
avatar mbabker mbabker - merge - 22 Jun 2016
avatar mbabker mbabker - merge - 22 Jun 2016
avatar mbabker mbabker - close - 22 Jun 2016
avatar mbabker mbabker - reference | 2ed7f04 - 22 Jun 16
avatar mbabker mbabker - head_ref_deleted - 22 Jun 2016
avatar mbabker
mbabker - comment - 22 Jun 2016

Anyone who wants to help fix our amazing CSS and layouts is welcome to do so. Otherwise, this works for me, so...

avatar Sandra97
Sandra97 - comment - 22 Jun 2016

@elkuku You can try this:
.ui.dropdown .menu > .item > img .flag {
width:16px;
height:10px;
}
with a bit of luck, it will work

avatar elkuku
elkuku - comment - 23 Jun 2016

@Sandra97 I tried but it doesn't seem to work - sorry ;(

avatar Sandra97
Sandra97 - comment - 23 Jun 2016

My fault @elkuku
Could you try without the blank space between img and .flag?
.ui.dropdown .menu > .item > img.flag

avatar elkuku elkuku - reference | 7668e80 - 23 Jun 16
avatar elkuku
elkuku - comment - 23 Jun 2016

YES this did the trick - THANKS - and sorry for being so dumb ;(

avatar Sandra97
Sandra97 - comment - 23 Jun 2016

You're not!!!
Happy if it works!

Add a Comment

Login with GitHub to post a comment