Author Topic: Any idea how to put country flag to menu? (Read 19104 times)

rumen · « **on:** May 01, 2024, 02:35:40 PM »

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 · « **Reply #1 on:** May 02, 2024, 11:30:59 AM »

Quote

I couldn't use the standard WB selector (wherever I put it it crashed the template)

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: [Select]

// 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);
    }

#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>';

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; }

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 · « **Reply #2 on:** May 02, 2024, 08:59:49 PM »

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: [Select]

<?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(&#39;DEFAULT_CHARSET&#39;)) { echo DEFAULT_CHARSET; } else 
{ echo &#39;utf-8&#39;; }?>" /> 

<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
	<?php
	$includefile = WB_PATH . &#39;/modules/wbstats/count.php&#39;;
	if (file_exists($includefile)) {
		include_once $includefile;
	}
	if (function_exists(&#39;simplepagehead&#39;)) {
		simplepagehead(&#39;/&#39;, 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(&#39;css&#39;);
		register_frontend_modfiles(&#39;jquery&#39;);
		register_frontend_modfiles(&#39;js&#39;);
		
		// buffering contents
		
		ob_start();		
		page_content(1);
		$page_content_1 = ob_get_contents();
		ob_end_clean();		
		
		if(defined(&#39;TOPIC_BLOCK2&#39;) AND TOPIC_BLOCK2 != &#39;&#39;) { 
				$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 . &#39;/media/headerbilder/header_0.jpg&#39;)) {
        $headerbild_id = 0;
        $takeit = true;
    }

if (PARENT == 0) {
    if (file_exists(WB_PATH . &#39;/media/headerbilder/header_&#39; . PAGE_ID . &#39;.jpg&#39;)) {
        $headerbild_id = PAGE_ID;
        $takeit = true;
    }
} else {
    if (file_exists(WB_PATH . &#39;/media/headerbilder/header_&#39; . PARENT . &#39;.jpg&#39;)) {
        $headerbild_id = PARENT;
        $takeit = true;
    }
    if (file_exists(WB_PATH . &#39;/media/headerbilder/header_&#39; . PAGE_ID . &#39;.jpg&#39;)) {
        $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      = &#39;[li][a][menu_title]</a>&#39;,
				$aItemClose     = &#39;</li>&#39;,
				$aMenuOpen      = &#39;<ul>&#39;,
				$aMenuClose     = &#39;</ul>&#39;,
				$aTopItemOpen   = false,
				$aTopMenuOpen   = &#39;<ul>&#39;
				);?>&nbsp;	
					
				
				
				
</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      = &#39;[li][a][menu_title]</a>&#39;,
				$aItemClose     = &#39;</li>&#39;,
				$aMenuOpen      = &#39;<ul>&#39;,
				$aMenuClose     = &#39;</ul>&#39;,
				$aTopItemOpen   = false,
				$aTopMenuOpen   = &#39;<ul id="main-menu" class="sm sm-clean">&#39;
				);?>

			</div>
		</div>
	</nav>
	
	
	<?php if ($page_content_3 !=&#39;&#39;) { ?>
	<div>
	<?php echo $page_content_3; ?>
	</div>
	<?php } else { ?>
	<div class="schmuckbild  fg-no-mobile">
	&nbsp;
	</div>
	<?php } ?>
	
	<div class="main">
		<div class="center">
			<div class="row">
				<?php if ($page_content_2 != &#39;&#39;) { ?>
				<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      = &#39;[li][a][menu_title]</a>&#39;,
				$aItemClose     = &#39;</li>&#39;,
				$aMenuOpen      = &#39;<ul>&#39;,
				$aMenuClose     = &#39;</ul>&#39;,
				$aTopItemOpen   = false,
				$aTopMenuOpen   = &#39;<ul>&#39;
				);?>
				</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 . &#39;/media/headerbilder/header_&#39; . $headerbild_id . &#39;.jpg&#39;;?>"]);
</script>
<?php } ?>
<?php page_footer(); ?>
</body>
</html>

sternchen8875 · « **Reply #3 on:** May 03, 2024, 02:04:59 AM »

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

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>

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;
?>

rumen · « **Reply #4 on:** May 04, 2024, 06:47:38 PM »

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.

rumen · « **Reply #5 on:** May 04, 2024, 06:52:57 PM »

I did my company page with WB 2.12 https://ucc-bg.com using the right language structure.

rumen · « **Reply #6 on:** May 04, 2024, 07:13:43 PM »

This solution is OK https://skylog.bg the only issue I face is that in mobile version the language appears on the bottom of the page. Any idea how to keep it on the top? And make it more right (not in the center)? I don't want to touch the CSS as I don't know what can crash.

ruebenwurzel · « **Reply #7 on:** May 05, 2024, 02:16:07 PM »

Hello,

you said, this is a very old page. So wich WB Version and wich PHP Version is actually usedon this page?

Matthias

rumen · « **Reply #8 on:** May 06, 2024, 08:15:33 AM »

It is CMS Version 2.8.3 SP1
Revision 1638
Admin version 1.6
PHP Version 5.4.45

ruebenwurzel · « **Reply #9 on:** May 06, 2024, 08:21:33 AM »

Hello,

You should think about an Update to WB 2.13.5 with PHP 8.x.

With this version your wish with country flags is easily possible, like sternchen8875 wrote.

Matthias

ruebenwurzel · « **Reply #10 on:** May 06, 2024, 08:59:18 AM »

Hello,

as i see, you found a solution wich is ok for you.

Matthias

sternchen8875 · « **Reply #11 on:** May 06, 2024, 10:13:30 AM »

Quote from: rumen on May 04, 2024, 07:13:43 PM

the only issue I face is that in mobile version the language appears on the bottom of the page. Any idea how to keep it on the top?

if i look into the source code, the code for the flagmenu is part of a div, called fg-no-mobile. this div is defined in fitgrid.css and use a display:block on the desktop-view and a display:none on mobiles

Two possible way's (maybe more)

you use a new place for the flag menu, outside from the actual div fg-no-mobile, that is visible every time (maybe on the right side from the logo in the top)
or you add a second flagmenu with a new css-class, that is visible only on mobiles
from my personal view, in the mobile view the part in the top is a good place

It is very simple (for example), to split the div class="logo" into two parts or put in this div another div with the same menu-code like the flag-menu on desktop-view and define a fixed position on the right side of this div

To the discussion about the old WB-Version... i talk and write with a lot of users outside from germany and i've to say, i think we, here in german's are the only country, where you can order a domain with the latest php-version, one day after the release

i spend a lot of time in the last weeks, to upgrade 4 pages in canada with wb 2.7 or wb 2.8.1. this pages works well in the frontend, but it was not possible, to admin some pages after the php-upgrade there. Of course, i use the latest WB, but it will not run, latest php-version there, in this contract, was a PHP 7.4. The user needs now a new contract with new conditions and latest version there was a PHP 8.2.0, the active support for this end's at the end of this year (31 Dec 2024)
Not every owner can understand this and we germans can not understand, why others work with php 5.6

my tip for you: sometime's in the future, the provider of this page will switch off the old php-version's and the owner get the same problem with the admin area. be prepared for this. i work with locale copies on a locale server and i have it from all my customers. here i can test the whole WB-Upgrades, on rainy day's

P.S.: in the case of the canada pages, the webmaster ordered a new server and copy the old wb-project to this server, but nothing works. he write a mail to me, but canada is far away from here. it was night here, but he was waiting for a answer. one hour later, he use the cms-builder from the provider and build a new page. all work was in vain, the upgrade was finish, but in a special folder from the old server

rumen · « **Reply #12 on:** May 06, 2024, 06:47:17 PM »

Well, I succeed to make it to appear in mobile menu like that but instead to appear in the right upper corner (as it is on the mobile menu appears in the left upper corner in the normal page ....

Code I used for CSS:

Code: [Select]

.language-switcher {
      right: 35px;
    top: 5px;
    position: absolute;
    
.language-switcher__language {
  display: inline;
}
.language-switcher__language.language-switcher__language_active {
  background: #fde067;
  padding: 2px;
}

Code I used for PHP:

Code: [Select]

<div class="language-switcher" >
  <span class="language-switcher__language language-switcher__language_active"><a href="https://skylog.bg/pages/bg.php" class="" title="BG">BG</a></span>
  <span> / </span>
  <span class="language-switcher__language"><a href="https://skylog.bg/pages/en.php" class="" title="EN">EN</a></span>
</div>

And I put that language switcher right after the code for the logo:

Code: [Select]

<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>

rumen · « **Reply #13 on:** May 06, 2024, 06:50:36 PM »

Yes, dear. I'm sure at some point I will need to upgrade all old pages, but at the moment I really have no any time to do it. Just need a simple and working solution to make it work and after some months I will make a full upgrade. Not only for that page, but for few others as all.

Quote from: sternchen8875 on May 06, 2024, 10:13:30 AM

Quote from: rumen on May 04, 2024, 07:13:43 PM
the only issue I face is that in mobile version the language appears on the bottom of the page. Any idea how to keep it on the top?

if i look into the source code, the code for the flagmenu is part of a div, called fg-no-mobile. this div is defined in fitgrid.css and use a display:block on the desktop-view and a display:none on mobiles

Two possible way's (maybe more)

you use a new place for the flag menu, outside from the actual div fg-no-mobile, that is visible every time (maybe on the right side from the logo in the top)
or you add a second flagmenu with a new css-class, that is visible only on mobiles
from my personal view, in the mobile view the part in the top is a good place

It is very simple (for example), to split the div class="logo" into two parts or put in this div another div with the same menu-code like the flag-menu on desktop-view and define a fixed position on the right side of this div

To the discussion about the old WB-Version... i talk and write with a lot of users outside from germany and i've to say, i think we, here in german's are the only country, where you can order a domain with the latest php-version, one day after the release
i spend a lot of time in the last weeks, to upgrade 4 pages in canada with wb 2.7 or wb 2.8.1. this pages works well in the frontend, but it was not possible, to admin some pages after the php-upgrade there. Of course, i use the latest WB, but it will not run, latest php-version there, in this contract, was a PHP 7.4. The user needs now a new contract with new conditions and latest version there was a PHP 8.2.0, the active support for this end's at the end of this year (31 Dec 2024)
Not every owner can understand this and we germans can not understand, why others work with php 5.6

my tip for you: sometime's in the future, the provider of this page will switch off the old php-version's and the owner get the same problem with the admin area. be prepared for this. i work with locale copies on a locale server and i have it from all my customers. here i can test the whole WB-Upgrades, on rainy day's

P.S.: in the case of the canada pages, the webmaster ordered a new server and copy the old wb-project to this server, but nothing works. he write a mail to me, but canada is far away from here. it was night here, but he was waiting for a answer. one hour later, he use the cms-builder from the provider and build a new page. all work was in vain, the upgrade was finish, but in a special folder from the old server

sternchen8875 · « **Reply #14 on:** May 07, 2024, 01:00:11 AM »

Quote from: rumen on May 06, 2024, 06:47:17 PM

Well, I succeed to make it to appear in mobile menu like that but instead to appear in the right upper corner (as it is on the mobile menu appears in the left upper corner in the normal page ....

its solved now? in mobile and also in desktop-view, the menu is now in the right upper corner. add the flags now and everything is okay (or i understand it wrong)

Use part of the code in the top, to display the flags in this menu

Code: [Select]

<div class="language-switcher" >
  <span class="language-switcher__language language-switcher__language_active"><a href="https://skylog.bg/pages/bg.php" class="" title="BG"><img src="<?php echo WB_URL; ?>/media/flags/bg.png" alt="BG" title="BG"></a></span>
  <span> / </span>
  <span class="language-switcher__language"><a href="https://skylog.bg/pages/en.php" class="" title="EN"><img src="<?php echo WB_URL; ?>/media/flags/en.png" alt="EN" title="EN"></a></span>
</div>

rumen · « **Reply #15 on:** May 07, 2024, 04:12:58 PM »

With letters works. With flags appears like that

sternchen8875 · « **Reply #16 on:** May 08, 2024, 11:03:02 AM »

use this Code instead of the actual for the flag-menu (is testet)

Quote

<div class="language-switcher fg7 meta" >
<ul>
<li class="menu-sibling">
<a href="https://skylog.bg/pages/bg.php" class="" title="BG"><img src="https://skylog.bg/media/flags/bg.png" alt="BG" title="BG" style="width:24px;height:24px;"></a>
</li>
<li class="menu-sibling">
<a href="https://skylog.bg/pages/en.php" class="" title="EN"><img src="https://skylog.bg/media/flags/en.png" alt="EN" title="EN" style="width:24px;height:24px;"></a>
</li>
</ul>
</div>

after that, you can adjust the flags, when you play with the padding-value in this definition here from style.css / Line 41ff

Quote

.meta ul li {
   list-style-type:none;
   font-size:80%;
   text-transform:uppercase;
   display:inline-block;
   margin:0;
   /*! padding:0 1em; */
}

this class was in use only for the mobile menu.

If you want, change the value for "right" (position) in the definition of "language-switcher" in Line 162

Quote

.language-switcher {
right: 5px;
top: 5px;
position: absolute;
}

rumen · « **Reply #17 on:** May 08, 2024, 04:51:53 PM »

FANTASTIC! Now it is really OK!

BTW I succeed to repair my local server with the Maria DB and PHPMyADMIN, installed WB 2.13.5 and when I have more time will start to upgrade page by page.

sternchen8875 · « **Reply #18 on:** May 08, 2024, 05:32:34 PM »

Quote from: rumen on May 08, 2024, 04:51:53 PM

FANTASTIC! Now it is really OK!

Quote from: rumen on May 08, 2024, 04:51:53 PM

BTW I succeed to repair my local server with the Maria DB and PHPMyADMIN, installed WB 2.13.5 and when I have more time will start to upgrade page by page.

i change my local server in the last year from maria db to mysql, because, the whole database was broken nearly every week. now it works without problem. but it looks, the the newer version of maria db also works now

P.S.: remember, that the latest wb needs at minimum PHP 8.2, so check the possible php-versions on your servers first

News

Support WebsiteBaker

Author Topic: Any idea how to put country flag to menu? (Read 19104 times)