WebsiteBaker Support (2.13.x) > General Help & Support
Any idea how to put country flag to menu?
rumen:
Hi there. Any idea how can I put country flag to menu? I speak about the language selector. I couldn't use the standard WB selector (wherever I put it it crashed the template) for languages so used very primitive way used in menu "link menu" and pointed to the other language. But how to add flags?
sternchen8875:
--- Quote ---I couldn't use the standard WB selector (wherever I put it it crashed the template)
--- End quote ---
wondering about that, but difficult to say, whats going wrong without some code
normalize its a copy&paste-job, but it need all the code from the example in the DefaultTemplate
At first, check the wb-seeting, part: general settings -> Multilingualism and activate it, if not active
here the code - #1 - put it into the index.php of your template, nearly to the top. it is php-code, so be sure, that you've the right place in the code
--- Code: ---// fetch page language
$sPageLang = strtolower(isset($wb->page) || ($wb instanceof frontend) ? $wb->page['language'] : 'EN');
// fetch page_id for loaded page, you need it for canonical
$iPageId = (isset($wb->page) || ($wb instanceof frontend) ? $wb->page['page_id'] :(PAGE_ID ?? ($page_id ?? 0)));
// Dummy function if Lingual Snippet not loaded
if (!function_exists('LangPageId')) {
function LangPageId() {
global $iPageId;
return $iPageId;
}
}
// get the page_id from language in level 0 for a given language
if (\function_exists('getLangStartPageIds')) {
$iLangStartPage = (int)(getLangStartPageIds($sPageLang));
}
// get the page trail from languages in level 0 as array
$aLangStartPageIds = [];
if (\function_exists('getLangStartPageIds')) {
$aLangStartPageIds = getLangStartPageIds();
}
// to show flags in frontend
$iMultiLang = 0;
$iLangFound = count($aLangStartPageIds);
switch ($iLangFound):
case 0:
$iMultiLang = 1;
break;
case 1:
$iMultiLang = 0;
break;
default:
$iMultiLang = 1;
endswitch;
$sMultiLang = '';
if (function_exists('language_menu')) {
$sMultiLang = language_menu('png', false);
$iMultiLang = intval(!empty($sMultiLang) ? 1 : $iMultiLang);
}
--- End code ---
#2 - this is the output from the flag-menu, put it into the body-area of your template (where you've the actual language menu-call). Its also php-code, maybe you have to put it between <?php and ?>
--- Quote ---echo '<div >';
echo '<span id="lang" style="height: 2.925em;">';
if (trim($sMultiLang) != '') {
echo $sMultiLang;
}
echo '</span>';
echo '</div>';
--- End quote ---
here the css from the original, maybe, you need it
--- Quote ---.langmenu { margin-left :auto; margin-right :auto; padding :5px 24px; min-height :0.6em; text-align :left; display :table-cell; vertical-align :middle; }
.langmenu {position: relative; }
.langmenu img { border :0; max-width: 100%; width: 34px; }
.langmenu a.default img { filter :alpha(opacity=100); -moz-opacity :1.0; opacity :1.0; }
.langmenu a:hover img,
.langmenu a.current img { filter :alpha(opacity=30); -moz-opacity :.3; opacity :.3; text-decoration: none; }
.langmenu a:hover { text-decoration: none; }
--- End quote ---
if you need help, please post the code of your used index.php from this template als zip-file here.
If you want to use your solution with this single link, we need the code for this
rumen:
I use one of the standard WB templates, but all my efforts to put the multi language code were not successful. The template just crash.
--- Code: ---<?php
// no direct file access
if(count(get_included_files())==1) header("Location: ../index.php",TRUE,301);
?><!DOCTYPE html>
<html lang="bg">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php
if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else
{ echo 'utf-8'; }?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<?php
$includefile = WB_PATH . '/modules/wbstats/count.php';
if (file_exists($includefile)) {
include_once $includefile;
}
if (function_exists('simplepagehead')) {
simplepagehead('/', 1, 0, 1);
}
?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR;?>/css/fitgrid.css" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR;?>/css/styles.css" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR;?>/css/sm-core-css.css" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR;?>/css/sm-clean.css" />
<link rel="stylesheet" type="text/css" href="<?php echo WB_URL;?>/include/font-awesome/css/font-awesome.css" />
<?php
register_frontend_modfiles('css');
register_frontend_modfiles('jquery');
register_frontend_modfiles('js');
// buffering contents
ob_start();
page_content(1);
$page_content_1 = ob_get_contents();
ob_end_clean();
if(defined('TOPIC_BLOCK2') AND TOPIC_BLOCK2 != '') {
$page_content_2 = TOPIC_BLOCK2;
} else {
ob_start();
page_content(2);
$page_content_2 = ob_get_contents();
ob_end_clean();
}
ob_start();
page_content(3);
$page_content_3 = ob_get_contents();
ob_end_clean();
?>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/js/jquery.sticky.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/js/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
mainMenuSubOffsetX: -1,
mainMenuSubOffsetY: 4,
subMenusSubOffsetX: 6,
subMenusSubOffsetY: -6
});
});
</script>
<script>
if (window.innerWidth >=960) {
$(window).load(function(){
$("#main-nav").sticky({ topSpacing: 0 });
});
}
</script>
<?php
$headerbild_id = "0";
$takeit=false;
if (file_exists(WB_PATH . '/media/headerbilder/header_0.jpg')) {
$headerbild_id = 0;
$takeit = true;
}
if (PARENT == 0) {
if (file_exists(WB_PATH . '/media/headerbilder/header_' . PAGE_ID . '.jpg')) {
$headerbild_id = PAGE_ID;
$takeit = true;
}
} else {
if (file_exists(WB_PATH . '/media/headerbilder/header_' . PARENT . '.jpg')) {
$headerbild_id = PARENT;
$takeit = true;
}
if (file_exists(WB_PATH . '/media/headerbilder/header_' . PAGE_ID . '.jpg')) {
$headerbild_id = PAGE_ID;
$takeit = true;
}
}
?>
</head>
<body>
<header>
<div class="center">
<div class="row">
<div class="logo">
<a href="<?php echo WB_URL; ?>"><img src="<?php echo TEMPLATE_DIR; ?>/logo.png" width="210" height="58" alt="<?php echo WEBSITE_TITLE; ?>" border="0" /></a>
</div>
<div class="fg7 meta fg-no-mobile">
<?php
show_menu2(
$aMenu = 2,
$aStart = SM2_ROOT,
$aMaxLevel = SM2_MAX+1,
$aOptions = SM2_ALL,
$aItemOpen = '[li][a][menu_title]</a>',
$aItemClose = '</li>',
$aMenuOpen = '<ul>',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = '<ul>'
);?>
</div>
</div>
</div>
</header>
<nav role="navigation" id="main-nav">
<div class="center">
<div class="row orow">
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<?php show_menu2(
$aMenu = 1,
$aStart = SM2_ROOT,
$aMaxLevel = SM2_ALL,
$aOptions = SM2_ALL,
$aItemOpen = '[li][a][menu_title]</a>',
$aItemClose = '</li>',
$aMenuOpen = '<ul>',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = '<ul id="main-menu" class="sm sm-clean">'
);?>
</div>
</div>
</nav>
<?php if ($page_content_3 !='') { ?>
<div>
<?php echo $page_content_3; ?>
</div>
<?php } else { ?>
<div class="schmuckbild fg-no-mobile">
</div>
<?php } ?>
<div class="main">
<div class="center">
<div class="row">
<?php if ($page_content_2 != '') { ?>
<div class="fg9">
<article>
<h1><?php echo PAGE_TITLE; ?></h1>
<?php echo $page_content_1; ?>
</article>
</div>
<div class="fg3">
<aside>
<?php echo $page_content_2; ?>
</aside>
</div>
<?php } else { ?>
<div class="fg12">
<article>
<h1><?php echo PAGE_TITLE; ?></h1>
<?php echo $page_content_1; ?>
</article>
</div>
<?php } ?>
</div>
<div class="row fg-no-desktop">
<div class="fg12 meta">
<?php
show_menu2(
$aMenu = 2,
$aStart = SM2_ROOT,
$aMaxLevel = SM2_MAX+1,
$aOptions = SM2_ALL,
$aItemOpen = '[li][a][menu_title]</a>',
$aItemClose = '</li>',
$aMenuOpen = '<ul>',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = '<ul>'
);?>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var $mainMenuState = $('#main-menu-state');
if ($mainMenuState.length) {
// animate mobile menu
$mainMenuState.change(function(e) {
var $menu = $('#main-menu');
if (this.checked) {
$menu.hide().slideDown(250, function() { $menu.css('display', ''); });
} else {
$menu.show().slideUp(250, function() { $menu.css('display', ''); });
}
});
// hide mobile menu beforeunload
$(window).bind('beforeunload unload', function() {
if ($mainMenuState[0].checked) {
$mainMenuState[0].click();
}
});
}
});
</script>
<?php if ($takeit==true) { ?>
<script>
$(".schmuckbild").backstretch(["<?php echo WB_URL . '/media/headerbilder/header_' . $headerbild_id . '.jpg';?>"]);
</script>
<?php } ?>
<?php page_footer(); ?>
</body>
</html>
--- End code ---
sternchen8875:
in the attachement a working language menu for this template "Lesefaken", but "my" new code needs a WB-Version newer than WB 2.10.x. Your Version is a WB 2.8.3 R1634 :-o
So, i'm sure, this new index.php will not work for you, because, it needs the newer Modules like WBLingual with this flagmenu.
But maybe, you can use the code for another project.
Back to this page
you build a lot of pages with WebsiteBaker in the past, but here, you get a problem with your page structure. You've all the pages in level 0 in the pages directory and not ordered by subfolders, named by the used LanguageCode from the WB-Language-Files
This is, what show_menu2() needs to build a menu, sorted by language
See also the designer guide on the help-pages -> https://help.WebsiteBaker.org/en/designer-guide/multilingual-websites.php
if you dont want to change your actual page structure....
a simple solution for this page structure is a hard-coded Flag-menu. It shows both languages and its possible, to add more Links, if needed. Use this Code instead of the show_menu2 call
--- Quote ---<ul>
<li class="menu-sibling">
<a href="https://skylog.bg/pages/bg.php" class="" title="BG"><span><img src="<?php echo WB_URL; ?>/media/flags/bg.png" alt="BG" title="BG"></span></a>
</li>
<li class="menu-sibling">
<a href="https://skylog.bg/pages/en.php" class="" title="EN"><span><img src="<?php echo WB_URL; ?>/media/flags/en.png" alt="EN" title="EN"></span></a>
</li>
</ul>
--- End quote ---
this menu needs a folder with the used flags in you media-directory, here media/flags
And here a show_menu2()-Call, if you use the older WB-Version and the page structure like my picture in the top. the name of the flag-pictures must be exact the name of the linked page, example: a page named bg.php needs a flag, named bg.png. and remember: its case-sensitive
--- Quote ---<?php
ob_start();
show_menu2(1, SM2_ROOT, SM2_CURR, SM2_ALL, '<li class="[class]"><a href="[url]" class="[class]"><span><img src="' . WB_URL . '/media/flags/[menu_title].png" name="[page_title]"></span></a>', "</li>", '<ul>', '</ul>', true, '<ul>');
$sFlagmenu = ob_get_contents();
ob_end_clean();
echo $sFlagmenu;
?>
--- End quote ---
rumen:
This is very old page (actually one of the first I did using WB 6-7 years ago) and now they called me and said "We want to change a bit the template. So no need to change the whole structure, just a bit the template.
Navigation
[0] Message Index
[#] Next page
Go to full version