Jump to content

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

flash

By flash
in General Support

 Share

Recommended Posts

flash Sr. Member

flash

Posted
Posted

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

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

flash Sr. Member

flash

Posted
  • Author
Posted

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

Macrura

Posted
Posted

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

androbey

Posted
Posted

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

flydev

Posted
Posted (edited)

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

 

langswitch.png.12e67442db3e7c5f1f1e890ce23baacc.png

Edited by flydev
missing <ul> tag
flash Sr. Member

flash

Posted
  • Author
Posted

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.. :)

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

7.jpg

flydev Hero Member

flydev

Posted
Posted

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

[...]

 

flash Sr. Member

flash

Posted
  • Author
Posted

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

8.jpg

flydev Hero Member

flydev

Posted
Posted

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 Jr. Member

Gary Austin

Posted
Posted

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.

  • Like 1
flash Sr. Member

flash

Posted
  • Author
Posted

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

9.jpg

flash Sr. Member

flash

Posted
  • Author
Posted

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

flydev

Posted
Posted

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 Jr. Member

Gary Austin

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

  • Like 1
flash Sr. Member

flash

Posted
  • Author
Posted 
[...]
// 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..

10.jpg

Gary Austin Jr. Member

Gary Austin

Posted
Posted

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.

  • Like 1
flash Sr. Member

flash

Posted
  • Author
Posted

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 Jr. Member

Gary Austin

Posted
Posted

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.

flash Sr. Member

flash

Posted
  • Author
Posted

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.  

flash Sr. Member

flash

Posted
  • Author
Posted 
	<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.

flash Sr. Member

flash

Posted
  • Author
Posted 
 <?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

flash Sr. Member

flash

Posted
  • Author
Posted 
<?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 Jr. Member

Gary Austin

Posted
Posted (edited)

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 by Gary Austin
flash Sr. Member

flash

Posted
  • Author
Posted

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.

 

 

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...