MikeR wrote:How add the flag for each language?
It should be possible in next release (next week) to add the images directly to the page
label (although they may not look nice unless you adjust height of images with custom CSS). Label input:
<img src="/lang.png" /> lang
For now, below is the full hack as added to studiocreative.bg. You will need to adjust it:
1. Prepare your language images in root, for example
/en.png and
/bg.png.
2. For the where you have added the language-link, go to menu -> menu classes (bottom), and add the class "menu-lang":
3. Go to settings -> custom -> custom JS, add the following code (remove the lines with // comments):
// the below code is only for adding the flag image
function x3_load(){
// get the lang anchor link
var menu_lang = $('li.menu-lang > a'),
// get current url
location = window.location.href.split('?')[0],
// set flag code ('bg' or 'en') opposite language of current url
flag = location.indexOf('/en') > -1 ? 'bg' : 'en';
// prepend the img
menu_lang.prepend('<img src="/' + flag + '.png" />');
}
// This function is only if you want the language link to dynamically mirror current page
function x3_load_page(){
// dynamic language link
setTimeout(function(){
var menu_lang = $('li.menu-lang > a'),
location = window.location.href.split('?')[0];
if(location.indexOf('/en') > -1){
// if language is secondary (en), create the link from current link, without '/en'
menu_lang.attr('href', location.replace('/en', ''));
} else {
// if language is primary (bg), append /en
menu_lang.attr('href', location.replace('.bg', '.bg/en'));
}
}, 500);
}
4. To adjust the flag icon image, I added this to settings -> custom -> custom CSS:
li.menu-lang > a > img {
height: 13px;
margin: 0 5px 5px 0;
}
It may need to be adjusted though. Let me know if you need any help ...
No worries. We will see what we will decide with my partner.