RFC: "flat" flags without bevel effect

[mweimerskirch]

The flag icons currently have a slight bevel effect. This limits the way they can be used, because the bevel effect does not always fit. If they were flat, they could be used in a more wide range of sites without having to manually find other icons. For backwards compatibility, the bevel effect can be re-added using a line of CSS (2 simple inset box-shadows)
At the same time, the resolution of the flag icons could be increased so they can be used in larger versions.

[johnclause]

Was it so with all former qTranslate flags, or is it new feature of "qTranslate-X"?

[mweimerskirch]

It's been the same pixelated flags since I started using qtranslate several years ago. That's why I think it's time to update them to cleaner versions (higher resolution and no bevel effect). The slight bevel effect in CSS could be added so the layout of older sites wouldn't break, but because it's CSS it could be easily hidden.

[johnclause]

I do not mind any improvement, I am just totally swamped right now to deal with this. It is not a high priority, but some day yes, we should do this.

[pedro-mendonca]

Just found this, might be useful :)
https://github.com/lipis/flag-icon-css

[pedro-mendonca]

@johnclause I've looking in your code but I cannot find where the xx.png flag file is defined. I've deleted the list in qtranslate.php where you have "gb.png" assigned to "en" language, but it still go and pick that file name.
Where is it defined?

[johnclause]

The current configuration is stored in database, which originally gets populated from the list in qtranslate.php or user manual input. There is an imperfection here, newly added languages are not shown up until one rest configuration or start new fresh database. This is something to improve too, but not a high priority, since people do not normally care about new languages added and nobody actually complained about it yet. What are you looking for?

[pedro-mendonca]

I was studying the possibility to include https://github.com/lipis/flag-icon-css as a submodule library, for now just for fun, but in case of success maybe suggest it in the future.

[johnclause]

👍

[pedro-mendonca]

I thought it might be in the database, as the flag list just updated when I reset the plugin a few days ago when some new languages where added.

[pedro-mendonca]

@johnclause I've completed the experience to use the library https://github.com/lipis/flag-icon-css as submodule.
You can test it here, I've completely synced it with your last commit 12e5612
Link to test: https://github.com/pedro-mendonca/qtranslate-x/tree/test-flags
If it's easier to compare I can make a pull request just for you to check full diffs.
I tried to describe every single piece of modification and added //TESTING flag-icon-css in the code.
I didn't modified anything in the widget, It also have a flag option, but I didn't have the time yet. I'll do it later if would like to integrate this submodule to have these brand new flags. As I'm not a developer neither an expert in php, I've searched and successefully re-added the css calls, but you should check if this is ok. Still, aparently it's working allright now :)

Things to consider:

1. The license, they just ask whoever uses it to keep the license, it's in the path.
2. Loading times, as some flags are heavier as they're detailed vector files. From my experience it's ok, but I should be considered.

Todo:

1. Check out Alt Text options, verify where it still can substitute old flags, like widget, ultimately delete old flags
2. Delete unnecessary files in the submodule.

[johnclause]

This sounds great, Pedro 👍 Things like this should go with an option, so that people can choose which way to display flags, and old way should be the default, so that on currently live installations nothing changes, unless admins change it manually. Flag information retrieval will need to be encapsulated in a separate function, which will test the new option and act accordingly.

Current flags have 3:2 aspect ratio, so we will not be able to simply substitute new flags, CSS will need to be adjusted too, and people, who customized CSS, will need to do manual work. Is there a way to get 3x2 version simply enough too? Probably not ...

BTW, could you suggest them to update on missing flags?

I am currently busy with a few other things. Pedro, will it be too much to ask you to complete it all with options, encapsulation etc in a clean way?

[pedro-mendonca]

I don't know how to add it as an option, can you give me a small example or link to a guide? Meanwhile I'll investigate it. About 3x2, this project have only 1x1 and 4x3, as a single project dedicated to flags I suppose they've chosen the most used or most appropriate formats. I think in this case makes more sense to qtx to adapt itself to these existing options, as it's integrating it simply as submodule. About the missing flags, maybe they can do it, still, I think the flags codes they use are from country flags, and in the case of the current missing flags are from two zones in Spain, the country is Spain. Don't know how can this be done. As you seem to enjoy this idea, I'll keep this alive and try to improve with your guidance, is that ok for you? Maybe I'll open an issue just for the development of this feature and keep discussing on this with everyone who would also like to join, what do you think?

[johnclause]

We can continue under different issue, before this one gets too long to scroll.

I believe, those zones in Spain are recognized in the World with different locale "eu_ES" and "gl_ES", as they are listed in the output of command "locale -a". So, asking to add those flags is not something extraordinary special.

As to a guidance, it is actually a lot to do, may be even more than you have done so far ;) You may search for all occurrences of any option, like 'flag_location', for example, and follow the pattern. But before that you need to design what exactly options to add. Option "Flag Image Path" may probably stay as is? Other options may be "Flag Format" ("png", "svn"), "Flag Aspect Ratio", "Flag Size", for example? There is new option "Remove plugin CSS" which was migrated from mq, and which basically removes common part of flags CSS, but it might be better to have option "Flags CSS" instead. You may prepare your design of options with their descriptions in the new issue as the first step, and we can go from there?

[Grafcom]

I was working for myself on a new set of flags and I saw that you were also working/thinking about it.
I have almost all flags in vector format, I can convert it to any format and almost any size and resolution.
If I can help let me know.
Best

[pedro-mendonca]

@johnclause I'll check on other options code and pattern and design the options necessary for this.
About the flag options, would you like to keep this flag-icon-css submodule or @Grafcom new flags? Are these new flags dedicated to this plugin or also as a reusable package to be included as submodule?
I'll start a new dedicated issue on this as soon as I can.

[Grafcom]

@pedro-mendonca,
new flags, in the format/resolution in which you want them - I make them specially for qTranslate x - but the original vector files are free to use.

[johnclause]

I think the best, would be, if we want to be really fancy, is to let user to decide, which resolution and ratio they want and then auto-generate .png files for the parameters chosen out of .svn files for languages in use only. So we can keep .svn files in subfolder flags/svn, png original files in subfolder flags/png and folder 'flags' will only have flags needed and either generated or copied. Is that possible to do?

[LC43]

ohh, this issue is nice! having 255 .png files for each qtranslate install where we would use normally just 2 or 3 always bothered me... specially when they could be turned into a sprite. extra points for requesting one file instead of 2 or 3 or .. !

how about using them in .svg format, like the flags @pedro-mendonca mentioned?
http://caniuse.com/#feat=svg

[pedro-mendonca]

@LC43 I've made a first aproach to this in #71.
The problem is the same with this submodule, a lot of files. As @johnclause mentioned this should be optional as this image ratio could break some current sites css, I didn't have the time to make it yet, feel free to improve this if you want :)
A good thing also mentioned above would be the download of the flag when a new language is added.

[benique]

I've thought about svg flags as well. I think png flags would be a good alternative to the sag flags because they can be much more compressed. So we could save bandwidth. Since we usually only use pretty small flags the png files would take up a lot less space.

I think we could implement the translations (texts & flags) in a different way. So that they can be downloaded on demand. That would make the plugin slimmer and it would be very easy update the translations without the need to update the plugin.