Add option for two-letter language codes in language widget

[benique]

It would be nice to have the option to display the short codes in the language menu.

[johnclause]

Yes, this is a good idea, @benique, thank you! I do not see a code in your PR, where the shortcodes are executed. Could you explain a bit more details how you envision this?

[benique]

What I meant is, it should be possible to display the two letter language short codes (ISO 639-1) in the menu instead of the names. So let's say someone has a website in English an German. Then menu would then look Like this:
en de
I know there is an option to set different labels for the languages but then it also changes the language display in other areas on the website and backend.
The wordpress shortcodes might be another issue i can look into.

[benique]

@johnclause Can I change anything to make it better?
I will create a separate pull request for the implementation of shortcodes.

[johnclause]

Could you add this option to Widget configuration form in function qTranslateXWidget with proper help text? I am not sure about the name 'short', it seems confusing to me, at first glance. Maybe 'lang_code'? I guess it gets better after a while, on the second though 'short' now seems fine. I do not know, if you like 'short', leave it - help text matters the most anyway.

[benique]

@johnclause Thanks for your help. I updated the widget.

[johnclause]

Something is probably not right, I do not see new changes?

[benique]

I made changes on the following lines:
59, 107
https://github.com/benique/qtranslate-x/blob/master/qtranslate_widget.php

Did I miss anything?

[johnclause]

Wow, now I see the changes... I guess the browser needed to be refreshed ... Thanks a lot!

[johnclause]

It shows flag image too, is this how you wished it?

[benique]

no. It should only show the iso code

[johnclause]

That means that you customized CSS in your case at the same time?

We are trying to follow the old logic, but with that many options already it does not really fit anymore. What would probably work nicely now is an arbitrary format string like "%lang_flag% %lang_name% %lang_code%". I can see people may like to do something like "%lang_flag% %lang_name% (%lang_code%)". In your case, you would enter "%lang_code%" only. This way people may add additional CSS codes right in the format string too.

What do you think, is that something people would value?

[benique]

I don't see any flags on my page.
http://www.pureco-led.com

I couldn't find anything in the css code either. I'm using the qTranslate-X 3.4.4 with this code block:

    case 'short':
        echo PHP_EOL.'<ul class="qtranxs_language_chooser" id="'.$id.'">'.PHP_EOL;
        foreach(qtranxf_getSortedLanguages() as $language) {
            echo '<li';
            if($language == $q_config['language'])
                echo ' class="active"';
            echo '><a href="'.qtranxf_convertURL($url, $language, false, true).'"';
            echo ' class="qtranxs_flag_'.$language.' qtranxs_flag_and_text" title="'.$q_config['language_name'][$language].'">';
            echo '<span>'.$language.'</span></a></li>'.PHP_EOL;
        }
        echo '</ul><div class="qtranxs_widget_end"></div>'.PHP_EOL;
        break;

Yeah that would be good for advanced users. We would need to preserve backwards compatibility though.

[johnclause]

@benique: I do not know, classes 'qtranxs_flag_'.$language.' qtranxs_flag_and_text' show flag on background by default, unless you customized it via "Widget CSS", or advanced option "Head inline CSS", or your own CSS.

@HowToSolutions: what do you think about format option? Your case, css_only would then have simply empty format? Would it make sense to you?

You both are "advanced" users, since nobody else requested your cases ;)

[benique]

I just tested the newest version of the plugin from github again without the css of my custom theme. It still didn't show any flags. I just found out, it's because I disabled the option to add CSS code to the header in the settings.

I think it would be cumbersome to do everything with css. Adding an additional language would always mean that you have to edit the css code.

Your suggestion with the placeholders looks very good. I think that would be the way to go.

[johnclause]

Adding an additional language would always mean that you have to edit the css code

Only if you wish to customize it, the default gets auto-adjusted on language list change.

[johnclause]

@benique, @HowToSolutions: The latest version at GitHub has code for custom format in widget, which should work for both of you, as well as for future improvements. Please, test it all as much as possible, not only this problem, but all the features you use, before we release it. Thank you very much.

[benique]

@johnclause That's great. I would however not add any static html code. That way one could do stuff like this:

<div class="lang-menu">
   <?php echo qtranxf_generateLanguageSelectCode('<a href="%link" class="%classes" title="%language">%l</a>'); ?>
</div>

or

<div class="lang-menu">
   <?php echo qtranxf_generateLanguageSelectCode('<a href="%link" class="%classes" title="%language" style="background-image:url(%image); background-size:cover; background-position: center center; width: 20px; height: 20px"></a>'); ?>
</div>

I would change the names of the variables as well to make it more clear what they stand for.

%l        -> 2 letter language code
%language -> language name
%image    -> flag
%link     -> link to translated page
%classes -> qTranslate-X classes

Those changes could make it very powerful.

A very good alternative would be to just output an array with all the variables. That would be the most flexible option and require very little effort from our side.

[johnclause]

@benique: I added arguments %s for the URL of flag, and %a for language name in active language, since they are now available due to your efforts 👍

Please, download the latest version to try.

As to "%classes", I think, having classes in "

" already provides an opportunity to setup CSS in any desirable way for the items under "

", then "%classes" seems to be excessive.

List items have the format

<li class="..."><a href="link" title="native_language_name">[content]</a></li>

and only "[content]" part is what provided with 'format', which should not have '%link' either.

Your examples are achievable after I added argument %s for flag URL, can you see it? For example, your second case:

<div class="lang-menu">
<?php echo qtranxf_generateLanguageSelectCode(array('type'=>'custom', 'format' => '<span style="background-image:url(%s); background-size:cover; background-position: center center; width: 20px; height: 20px></span>'); ?>
</div>

What do you think?

[benique]

@johnclause It's great that you made it more flexible.

In my opinion most use cases are covered now by the other menu types. So the other cases might require a html structure that we haven't thought about. Those who have different requirements are most likely very fluent in HTML & PHP and won't mind having to write more code.

Therefore I would make the custom option as flexible as possible or just return an array with all necessary infos.

[johnclause]

I still do not see a reason to customize <li> and <a>, since it is already customizable with CSS trough classes in <li>, is that correct? Could you give me an example of what you cannot do with the current custom option?

Yes, if a user is advanced and fluent with PHP, then it might be easier to make a copy of the function and adjust it to do whatever one wants.

[benique]

It certainly covers most use cases. So le'ts leave it like that then.

[dademaru]

@johnclause
Isn't it possible to implement 'dropdown' + 'short' (language code)?
Dropdown is useful since it takes up little space, for example in menus, menu bars.
It might be even more helpful if instead of showing the full languages names, only show the language code.
It would be great if we can choose short style for dropdown options labels in qtranxf_generateLanguageSelectCode.
Maybe making hookable a $language_label variable instead of using directly $q_config['language_name'][$language], so user could decide to pass $language (code) or leave $q_config['language_name'][$language].
In addition, 'text' and 'short' cases would become a unique case, using only $language_label variable.

Thanks