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

flash · May 23, 2018

In PW i have the following structure

Gary Austin · May 23, 2018

Don't know if this helps, and sorry I don't have time to dig into exactly what you are doing, but if you are on the url for one of these subpages with the servicearea template then the data for that page is in $page without you doing anything in the servicearea template. The $page variable contains all the field data for the subpage (like "carpenter") that you are on.

flash · May 24, 2018

Hi, yes i know that but when i have a required section over the "Carpenter" section for example it wont work because in the nav section i have like

<?php $page = $pages->get("/misc/footer/");?>

dont mind that it is footer in the nav its because i want to have the same navigation as in the footer copied. But that code makes it so that the carpenter section fail.

flash · May 24, 2018

Ok i think i know what the problem is. in nav.php this code is making it not work in section1.php

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

<?php $page = $pages->get("/misc/footer/");?> is the problem can i code it in another way?

flash · May 24, 2018

think i fixed it changed it to <?php $page3 = $pages->get("/misc/footer/");?> (page3 instead of page) ?

flydev · May 24, 2018

Avoid using ProcessWire keywords as variable name. You are also redefining $page in your foreach loop.

$page is a reserved word, instead, use :

<?php $footer = $pages->get("/misc/footer/");?>

then :

<?php foreach($footer->navigation as $p ): ?>

    <?php echo $p->myfield; ?>

    [...]
<?php endforeach; ?>

then :

<?=$footer->heading;?>
<?=$footer->phone;?>
// etc

bernhard · May 24, 2018

Wow, I forgot to post my suggestion and now this thread gone wild ?

Didn't read everything but semantic's dropdown component might be a good fit. You don't need the whole framework, just the component and it even comes with a filter feature (might be unnecessary in your case). But at least it looks nice: https://semantic-ui.com/modules/dropdown.html

flash · May 24, 2018

Hi Flydev and bernhard and thanks for helping a beginner ?

Flydev, thanks for learning me about the variable names.

Is this more correct of should i use for example <?=$p->phone;?> whats the different? can i use $p for universal of the whole site?

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

About the multi language dropdown.

I tried to just replace my code with yours, but it then gave me error (see attachment)

	<div class="navbar_language_wrapper">
			
	
<?php
$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>";
?>

			
		</div>

Thanks for helping me!

flydev · May 24, 2018

45 minutes ago, Flashmaster82 said:

Is this more correct of should i use for example <?=$p->phone;?> whats the different? can i use $p for universal of the whole site?

If you are using a variables to hold a page, then you should avoid using this same variable name in your loops. eg: foreach($footer->navigation as $subnav) instead of foreach($footer->navigation as $footer) // redefinition

Now that you don't override the $footer variable in the loop, you don't even need to re-declare it, you can use it in the whole template file (not the website!). The variable $p was only available in the scope of the loop; Please have read this page: https://www.w3schools.com/php/php_variables.asp and this doc: https://processwire.com/api/variables/pages/

45 minutes ago, Flashmaster82 said:

I tried to just replace my code with yours, but it then gave me error (see attachment)

You are calling getLanguageValue() on a null variable ($homepage).

To avoid this error, you have three way :

define $homepage in the _init.php file : $homepage = $pages->get('/'); // globally available to the website
define $homepage at the begining of your template file : $homepage = $pages->get('/');
call getLanguageValue() on $pages->get() : $hreflang = $pages->get('/')->getLanguageValue($language, 'name);

Then the magic should happen... after you define some CSS or you will not see a dropdown and flags.

There are the CSS attached to the code I give you earlier, you could try to paste it in your CSS file to see what happen and tweak it for your needs :

Spoiler


/*
 * Dropdown
 */
.upper-links {
    display: inline-block;
    padding: 0 11px;
    line-height: 23px;
    letter-spacing: 0;
    color: inherit;
    border: none;
    outline: none;
    font-size: 12px;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}

.dropdown:hover #gf-f {
    display: block !important;
}

.dropdown .dropdown-menubar {
    position: absolute;
    top: 100%;
    display: none;
    background-color: #fff;
    color: #333;
    left: 0px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 4px 8px -3px #555454;
    margin: 0;
    padding: 0px;
}

#gf-fbtn {
    position: relative;
    display: block;
    width: 160px;
    height: 30px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    *left: -50px;
    line-height: 29px;
}

.gf-ful li {
    height: 22px;
}

.gf-if {
    width: 24px;
    height: 18px;
    position: absolute;
    top: 6px;
    left: 15px;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}

#gf-fbtn-arr {
    position: absolute;
    right: 10px;
    top: 13px;
    height: 4px;
    width: 8px;
}

.gh-spr, .gh-sprRetina {
    background-image: url('../images/sprd-arrows.png');
    background-repeat: no-repeat;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}
#gf-fbtn:hover > #gf-f {
    display: block;
}

#gf-f {
    position: absolute;
    width: 160px;
    background: #f5f5f5;
    border-left: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    z-index: 9;
}

#gf-f .gf-if {
    display: block !important;
    position: relative;
    left: -28px;
    top: -21px;
}

/*
 * Flags
 */
.ad, .br, .cn, .de, .es,
.french, .it, .ru, .default
{ display: inline-block; background: url('../images/sprd-langs.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }

.ad { background-position: -2px -0px; width: 24px; height: 17px; }
.br { background-position: -28px -0px; width: 24px; height: 17px; }
.cn { background-position: -54px -0px; width: 24px; height: 16px; }
.de { background-position: -54px -18px; width: 24px; height: 14px; }
.es { background-position: -2px -19px; width: 24px; height: 16px; }
.french { background-position: -28px -19px; width: 24px; height: 16px; }
.it { background-position: -54px -34px; width: 24px; height: 16px; }
.ru { background-position: -2px -37px; width: 24px; height: 16px; }
.default { background-position: -28px -37px; width: 24px; height: 13px; }

.down-blue, .down, .down-s-b, .down-s
{ display: inline-block; background: url('../images/sprd-arrows.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }

.down-blue { background-position: -2px -0px; width: 24px; height: 12px; }
.down { background-position: -2px -14px; width: 24px; height: 12px; }
.down-s-b { background-position: -2px -28px; width: 8px; height: 4px; }
.down-s { background-position: -12px -28px; width: 8px; height: 4px; }

The flags sprite is attached to this post.

Some links you should read , everything is fine with basic PHP knowledge, and speaking about that, after some hours, your skills will grow ✌️

And please, install this module - https://modules.processwire.com/modules/tracy-debugger/ -so it will be a lot easier to help you, and it will help you to understand PHP and ProcessWire by debugging each vars! be curious ?

Edited May 24, 2018 by flydev
CSS and flags sprite

flash · May 24, 2018

Thanks Flydev for the reply, i will try to read more about basic php ?

I didnt have a _init.php or other files that make some codingthings with the language, so i defined it in the beginning like you sad.

<?php $homepage = $pages->get('/'); ?>

		<div class="navbar_language_wrapper">			
		
<?php
$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>";
?>

Now i have the language in a list so i guess its one step closer to the finish ? Did you have some css for that?

flydev · May 24, 2018

5 minutes ago, Flashmaster82 said:

Did you have some css for that?

I just edit my previous post.

flash · May 24, 2018

Thanks for the css,

i put that in the bottom of the nav.php

and changed the paths to the images that you attached. See my attachment for the current result.

/thanks

flydev · May 24, 2018

I can see a flag on the dropdown, now if you understand how it work, ~~you can go to https://www.flag-sprites.com/ to build your own flag sprite, its shipped with the CSS file, include it and~~ you have to build relation between your language title (in processwire) and the CSS class. After that it will work, but you have to do some work now ?

It seem that the framework Bootstrap is overriding some CSS. For more facility, follow this blog post : http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily

flydev · May 24, 2018

You could also try this before going further ( I made a small mistake on the markup) :

<?php 

$homepage = $pages->get('/');
	
$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 "<div class='gf-flags-wpr'>
    <a role='button' class='thrd' title='Language' href='#' id='gf-fbtn'>
        {$user->language->title}
        <b class='gf-if gspr {$user->language->name}'></b>
        <b id='gf-fbtn-arr' class='down-s-b'></b>
    </a>
    <div id='gf-f' style='display: none;'>
        <ul class='gf-ful' role='navigation'>
            {$langswitch}
        </ul>
    </div>
</div>";

flash · May 24, 2018

Ok now the dropdown showed up! Yaay ?

I replaced the sprite icons with 3 of my svg icons that i wanted for the site. Replaced the code with the one you sent me but the dropdown menu wont open?

flash · May 24, 2018

This is my css now

.upper-links {
    display: inline-block;
    padding: 0 11px;
    line-height: 23px;
    letter-spacing: 0;
    color: inherit;
    border: none;
    outline: none;
    font-size: 12px;
}
.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}
.dropdown:hover #gf-f {
    display: block !important;
}
.dropdown .dropdown-menubar {
    position: absolute;
    top: 100%;
    display: none;
    background-color: #fff;
    color: #333;
    left: 0px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 4px 8px -3px #555454;
    margin: 0;
    padding: 0px;
}
#gf-fbtn {
    position: relative;
    display: block;
    width: 160px;
    height: 30px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    left: 0px;
    line-height: 29px;
}
.gf-ful li {
    height: 22px;
}
.gf-if {
    width: 24px;
    height: 18px;
    position: absolute;
    top: 6px;
    left: 15px;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}
#gf-fbtn-arr {
    position: absolute;
    right: 10px;
    top: 13px;
    height: 4px;
    width: 8px;
}
.gh-spr, .gh-sprRetina {
    background-image: url('../assets/misc/nav/img/sprd-arrows.png');
    background-repeat: no-repeat;
}
#glbfooter a {
    font-size: 12px;
}
#gf-fbtn {
    cursor: pointer;
    text-indent: 50px;
    color: #707070 !important;
    line-height: 29px;
}
#gf-fbtn:hover > #gf-f {
    display: block;
}
#gf-f {
    position: absolute;
    width: 160px;
    background: #f5f5f5;
    border-left: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    z-index: 9;
}
#gf-f .gf-if {
    display: block !important;
    position: relative;
    left: -28px;
    top: -21px;
}
.default {
    display: inline-block;
    background: url('../assets/misc/nav/img/se.svg') no-repeat;
    text-indent: -9999px;
    text-align: left;
    background-position: center;
    top: 8px;
    left: 10px;
    width: 20px;
    height: 12.5px;
}
.english {
    display: inline-block;
    background: url('../assets/misc/nav/img/gb.svg') no-repeat;
    text-indent: -9999px;
    text-align: left;
    background-position: center;
    top: 30px;
    left: 10px;
    width: 20px;
    height: 10px;
}
.sinhalese {
    display: inline-block;
    background: url('../assets/misc/nav/img/lk.svg') no-repeat;
    text-indent: -9999px;
    text-align: left;
    background-position: center;
    top: 50px;
    left: 10px;
    width: 20px;
    height: 10px;
}
.down-blue, .down, .down-s-b, .down-s {
    display: inline-block;
    background: url('../assets/misc/nav/img/sprd-arrows.png') no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    text-align: left;
}
.down-blue {
    background-position: -2px -0px;
    width: 24px;
    height: 12px;
}
.down {
    background-position: -2px -14px;
    width: 24px;
    height: 12px;
}
.down-s-b {
    background-position: -2px -28px;
    width: 8px;
    height: 4px;
}
.down-s {
    background-position: -12px -28px;
    width: 8px;
    height: 4px;
}

flydev · May 24, 2018

And it work ?

flash · May 24, 2018

The dropdown wont open when i click on it? Strange..

Edited May 24, 2018 by Flashmaster82

flash · May 24, 2018

This is how it looks like now, when i go over with the mouse the cursor will show upp but when i click on it it wont open?

Edited May 24, 2018 by Flashmaster82

flydev · May 24, 2018

Damn the <div class="dropdown"> is missing.

echo "<div class='dropdown'>
          <div class'gf-flags-wpr'>
             ...
          </div>
      </div>";

It should work now, if not, then rename the class .dropdown to .lang-dropdown and replace each occurrence in the CSS code I give you.

flash · May 24, 2018

Happy dance!!! ? yaaay!!! I think i looks awesome now and it works perfect! Thank you so much for the help you are the best!!

flydev · May 24, 2018

Good ! ?

angelo, italy · October 6, 2022

Hi,

this is an easy way to have beautiful icons in the languages switcher:

<?php
foreach ($languages as $language) {
if (!$page->viewable($language)) continue; // is page viewable in this language?
if ($language->id == $user->language->id) {
echo "<span style='padding:3px;border-bottom:1px solid #333'> ";
} else {
echo "<span style='padding:3px'> ";
}
$url = $page->localUrl($language);
$hreflang = $homepage->getLanguageValue($language, 'name');
$lan = $language->title;
$it = '<img src="' . $config->urls->templates . 'images/italy.png" style="width:30px"/>';
$en = '<img src="' . $config->urls->templates . 'images/gb.png" style="width:30px"/>';
if ($lan == 'IT') {
echo "<a hreflang='$hreflang' href='$url' >" . $it . "</a></span>";
} else {
echo "<a hreflang='$hreflang' href='$url'>" . $en . "</a></span>";
};
}
                                                                                        ?>

Bye!

Sign In

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

Recommended Posts

flash

Gary Austin

flash

flash

flash

flydev

bernhard

flash

flydev

flash

flydev

flash

flydev

flydev

flash

flash

flydev

flash

flash

flydev

flash

flydev

angelo, italy

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details