Need help to output flag icon in drop down (multi language)

[Flashmaster82]

echo "<option$selected value='$url'>

             $language->language_icon
             $language->title
            
            </option>";

[Flashmaster82]

I have installed and setup the Multi language URL module. The problem is that i dont know how to display/output and image next to the language in the dropdown menu. Right now i have created a field name language_icon under the language template. I need to output the flag next to the Country name (title).  The code below only display  (se.svg Sweden). Please help!

echo "<option$selected value='$url'>

             $language->language_icon
             $language->title
            
            </option>";

[Macrura]

Do you mean in the admin page edit? If so, Page Select doesn't support markup, you'd need to use InputfieldSelectize to get a formatted option with an icon.. If you mean in the admin menu, not sure about that...

[androbey]

Hi @Flashmaster82,

according to your post I assume two things:

• you try to build a navigation option to switch languages on the frontend of your site
• you have a plain text field called "language_icon" (and you store there a string representing the filename e.g. se.svg)

If the above is not the case, please correct me or follow @macrura's post if you mean the admin page. Otherwise the following:

 

• You need to get the path to where the image or icon is stored. If that is e.g. in your site/templates/img folder, one way woul be: 

  $config->urls->templates . "img/" . $language->language_icon

   

• Also, to actually display the icon you would have to use an image/picture tag inside the option tag. 

[flydev]

This is just a frontend example for inspiration (should work as is) - the flag image is set trough CSS (gf-if and gspr class) but could be an image or whatever.

 

$langswitch = '';
foreach($languages as $language) {
    if(!$page->viewable($language)) continue; // is page viewable in this language?
    if($language->id == $user->language->id) { // current user language
        $langswitch .= "<li class='current'>";
    } else {
        $langswitch .= "<li>";
    }
    $url = $page->localUrl($language);
    $hreflang = $homepage->getLanguageValue($language, 'name');
    $langswitch .= "<a hreflang='$hreflang' href='$url'>$language->title<b class='gf-if gspr {$language->name}'></b></a></li>";
}

echo "<ul class='langswitch'>{$langswitch}</ul>";

 

Edited May 23, 2018 by flydev
missing <ul> tag

[Flashmaster82]

Hi and thank you very much for taking your time to help me. I haven´t been able to reply due to "you have reach the maximun amount of post for today"..

Im a very beginner at PHP so thanks for being patient. I have attached the language settings so you can understand better. This is the code that i have at the moment

<select onchange='window.location=$(this).val();'>
				<?php foreach ($languages as $language) {
			$selected = '';

			// if this page isn't viewable (active) for the language, skip it
			if ( !$page->viewable( $language ) ) continue;

			// if language is current user's language, make it selected
			if ( $user->language->id == $language->id )$selected = " selected=selected";

			// determine the "local" URL for this language
			$url = $page->localUrl( $language );
	
   			// output the option tag
			echo "<option$selected value='$url'>

			 $language->language_icon
			 $language->title
			
			</option>";
	
		}
		?>
			</select>

I tried to implement your code but with no luck. Please help.. :)

[flydev]

Sorry for the short answer.

I think you are close, try to write $language->language_icon->first()->url or $language->language_icon->url

 

[...]
// output the option tag
echo "<option$selected value='$url'>
    {$language->language_icon->first()->url}
    $language->title
</option>";

[...]

 

[Flashmaster82]

Thanks for the fast reply, this maybe my last post/reply that i can do for today ? anyways.

$language->language_icon->first()->url    this made the drop down blank

$language->language_icon->url  this outputted the attached file below.

You mentioned something about file/path? Don´t know how or where i should change that.

/thanks

[flydev]

I didn't saw that the HTML markup is missing. You need it in order to render the image.

Try again with :

[...]
// output the option tag
echo "<option$selected value='$url'>
    <img src='{$language->language_icon->url}' alt='img description'>  
    $language->title
</option>";
[...]

 

[Gary Austin]

I don't believe you can have image tags inside an <option> tag.  I think you will need to use a replacement jquery plugin like select2, or create your own select using li's.  Google "image in option select" and you will find suggestions on how to do this.

[Flashmaster82]

Tried with that code and now the file name isnt displaying though. hmm im i doing something wrong with something else?

[Flashmaster82]

Gary Austin

But "

flydev

did show a working example before? Im i doing something wrong here?. Or can i do this by manually code the path to the images? Sorry but im a total beginner at PHP and processwire. /Thanks

 

[flydev]

Check with the developer tools of your browser, the image should be there.  @Gary Austin 's comment is right.

Try with this last example, but now its more like a HTML/CSS issue :

[...]
// output the option tag
echo "<option$selected value='$url' style='background-image:url({$language->language_icon->url});'> 
    $language->title
</option>";
[...]

 

[Gary Austin]

2 minutes ago, Flashmaster82 said:

Gary Austin

But "

flydev

did show a working example before? Im i doing something wrong here?. Or can i do this by manually code the path to the images? Sorry but im a total beginner at PHP and processwire. /Thanks

 

Yes but in his example he was using <li>'s not <select><option>

[Flashmaster82]

[...]
// output the option tag
echo "<option$selected value='$url' style='background-image:url({$language->language_icon->url});'> 
    $language->title
</option>";
[...]

That code made it blank..

[Gary Austin]

I don't believe background images for <option> work across all browsers, but it has been awhile since I messed with it.    This is not PHP or Processwire, but basic HTML.  You'll need to build your own select (like flydev's first example using <li>'s) or use a jquery or other type of javascript plugin.

[Flashmaster82]

Ok i will try to find something else that works like you sad with some js plugin. Thanks for explaining and helping though.

But from one to the other, i have a totally different question that bothers me right now. can you please help.

I have 1 template file that will be base for 6 different pages but the same layout. I dont know how to begin the php file to display each pages with its content.

This is how i use to start my files/sections with, but then its only for one page and the same content.

<?php $page = $pages->get("/start/section1/");?>
<h2 class="h6"><?=$page->phone;?></h2>

 

I´d tried with some other code can´t remember but it displayed all the pages at the same page below each other. I know this maybe is some basic stuff but im lost. Please help...

[Gary Austin]

Not sure I fully understand what your asking.   If it is basic template/pages then the template is passed the $page variable with all the fields and you just use it like you did in the 2nd line $page->phone.  You don't load the page like you are showing in the first line as that will always get what ever /start/section1 is.

[Flashmaster82]

Ok i will be more specific.

This is my structure of the tempate file.

<body class="pagetransition">
	<?php 
	require('assets/misc/nav/nav.php');
	require('assets/servicearea/subheader/subheader.php');
	require('assets/servicearea/section1/section1.php');
	require('assets/start/section5/section5.php');
	require('assets/misc/footer/footer.php');
	?>
</body>

as you can see i have 2 files that handles different content. The template name in PW is "servicearea". Because i have other sections/files required and those i have other template names attached to. Like for nav.php i have in the beginning "<?php foreach($pages->find('template=nav') as $page1):?>" etc.

Hope that was more info for you /thanks again for the help.  

[Flashmaster82]

	<div class="container">
									<div class="row">
										<?php $page = $pages->get("/misc/footer/");?>
										<?php foreach($page->navigation as $page ): ?>
										<div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
											<ul>
												<div class="bold purple bmar2 h5">
													<?=$page->heading;?>
												</div>
												<?php foreach($page->navlinks as $item) {
														echo "<li class='footer_links_selected'><a href='$item->url' class='black footer_links '>$item->title</a></li>";
														}	
														?>
											</ul>
										</div>
										<?php endforeach;?>
										<?php endforeach;?>
										<?php $page = $pages->get("/misc/footer/");?>
										<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 text-right">
											
											<div class="footer_phone">
												<?=$page->phone;?>
											</div>
											<div class="footer_email">
												<?=$page->email;?>
											</div>
											<?php?>
										</div>
									</div>
								</div>

For example this is the end of nav.php. misc/footer is just a dropdown copied from the footer if you wonder..  But this is why servicearea.php doesent work like it should. Because i have to specify at servicearea.php that the content should be there from one of the 6 pages in pw.

[Flashmaster82]

[Flashmaster82]

 <?php $page = $pages->get("template=servicearea"); ?>

I´d tried with this code but then it only displays like the first page of the 6 on all different URLs

[Flashmaster82]

<?php foreach($pages->find('template=nav') as $page):?>
<nav class="navbar fixed-top">
	<a href="<?php echo $pages->get('/')->url;?>"><img src="<?=$config->urls->templates;?>img/logo_black_purple.svg" alt="logo" title="logo" class="navbar_brand"></a>

	<div class="navbar_menu_wrapper">
		<?php foreach($page->navlinks as $item) {
  				echo "<a href='$item->url' class='black navbar_links'>$item->title</a>";
				}	
				?>
		<div class="navbar_vertical_line"></div>

		<div class="navbar_language_wrapper">
			<select onchange='window.location=$(this).val();'>
				<?php foreach ($languages as $language) {
			$selected = '';

			// if this page isn't viewable (active) for the language, skip it
			if ( !$page->viewable( $language ) ) continue;

			// if language is current user's language, make it selected
			if ( $user->language->id == $language->id )$selected = " selected=selected";

			// determine the "local" URL for this language
			$url = $page->localUrl( $language );
	
   			// output the option tag
			echo "<option$selected value='$url'>
			{$language->language_icon}
			$language->title
			</option>";

		}
		?>
			</select>
		
			
		</div>
		<div class="navbar_vertical_line"></div>
		<div class="navbar_hamburgermenu_wrapper">
			<div class="navbar_hamburgermenutext uppercase">
				<?=$fields->get('menutext')->$label;?>
			</div>
			<div class="ham-bg">
				<div class="button_container" id="toggle">
					<span class="top"></span>
					<span class="middle"></span>
					<span class="bottom"></span>
				</div>
				<div class="overlay" id="overlay">
					<div class="overlay-menu container-fluid">
						<div class="navrow">
							<div class="navmenu-col col-12">
								<div class="container">
									<div class="row">
										<?php $page = $pages->get("/misc/footer/");?>
										<?php foreach($page->navigation as $page ): ?>
										<div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
											<ul>
												<div class="bold purple bmar2 h5">
													<?=$page->heading;?>
												</div>
												<?php foreach($page->navlinks as $item) {
														echo "<li class='footer_links_selected'><a href='$item->url' class='black footer_links '>$item->title</a></li>";
														}	
														?>
											</ul>
										</div>
										<?php endforeach;?>
										
										<?php $page = $pages->get("/misc/footer/");?>
										<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 text-right">
											
											<div class="footer_phone">
												<?=$page->phone;?>
											</div>
											<div class="footer_email">
												<?=$page->email;?>
											</div>
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</nav>
<?php endforeach;?>

<link rel="stylesheet" href="<?=$config->urls->templates;?>css/megamenu.css">
<script src="<?=$config->urls->templates;?>js/megamenu.js"></script>

This is nav.php that is on top of the servicearea.php in the structure.

 

 

This is servicearea.php that is the template file in pw

<div class="subpage_section1">
	<div class="container">
		<div class="row">
			<?php 
			require('assets/servicearea/sidemenu/sidemenu.php');
			?>
 <?php $page = $pages->get("template=servicearea"); ?>
			<div class="col-12 col-sm-12 col-md-9 col-lg-8 col-xl-8">
				<div class="introduction bmar2"><?=$page->introduction;?></div>
				<?=$page->textarea;?>
				</div>	
		</div>
	</div>
</div>

 

[Gary Austin]

I'm just a beginner at ProcessWire, so not much help as I can't figure out your code/structure at a quick glance as it is structured so different than the way I'm using PW.

On your first issue with the flag images, you really need to use the code with ul/li that flydev showed you.  Going with a javascript select is really overkill for what you are trying to do as you do not really need a select at all.  Just a ul with li's containing anchor tags and <img src="image url"> tag inserted before the $language-title piece.  Then the the css to make it look like a select (which may work with the classes he provided, but I don't know that piece of code and where the css is coming from).

Edited May 23, 2018 by Gary Austin

[Flashmaster82]

Ok thanks i will try to have a look at that and try to figure out how to make it work.

Regarding the structure and the servicearea file.

This is the servicearea.php code

<!doctype html>
<html lang="en">
<head>
    <?php
	require("assets/misc/meta/meta.php");	
	require("assets/misc/scripts/scripts.php");
	?>	
	<link rel="stylesheet" href="<?php echo AIOM::CSS(array('css/hover.css', 'css/animate.min.css')); ?>"> 	
	<link rel="stylesheet" href="<?=$config->urls->templates;?>css/nav_start.css">
	<script src="<?php echo AIOM::JS(array('js/scrolla.js', 'js/scrollme.js', 'js/smoothscroll.js')); ?>"></script>		
</head>
<body class="pagetransition">
	<?php 
	require('assets/misc/nav/nav.php');
	require('assets/servicearea/subheader/subheader.php');
	require('assets/servicearea/section1/section1.php');
	require('assets/start/section5/section5.php');
	require('assets/misc/footer/footer.php');
	?>
</body>
</html>

The required files is sections of the page.

    require('assets/misc/nav/nav.php');
    require('assets/start/section5/section5.php');
    require('assets/misc/footer/footer.php');

these files are on every page /subpage on the whole site.

 

    require('assets/servicearea/subheader/subheader.php');
    require('assets/servicearea/section1/section1.php');

And this is where i want to change the content depending on what page/url im on.

 

example ( require('assets/servicearea/section1/section1.php');)

<div class="subpage_section1">
	<div class="container">
		<div class="row">
			<?php 
			require('assets/servicearea/sidemenu/sidemenu.php');
			?>
 <?php $page = $pages->get('template=servicearea');?>
			<div class="col-12 col-sm-12 col-md-9 col-lg-8 col-xl-8">
				<div class="introduction bmar2"><?=$page3->introduction;?></div>
				<?=$page3->textarea;?>
				</div>	
		</div>
	</div>
</div>

 

I dont know if you also working with include/required files but in the browser all required files are then displayed next to each other if you look at the page code.

As you can se  <?php $page = $pages->get('template=servicearea');?> will output only the first of my 6 different pages in PW (different urls) different content same template (servicearea.php). I want each pages in pw display the correct content for the page etc. Hope the was more helpful. Thanks for the help so far.