Jump to content

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

Flashmaster82

By Flashmaster82,
in General Support

 Share

Recommended Posts

Gary Austin Jr. Member

Gary Austin

Posted
Posted

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. 

Link to comment
Share on other sites
Flashmaster82 Sr. Member

Flashmaster82

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Flashmaster82 Sr. Member

Flashmaster82

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
flydev Hero Member

flydev

Posted
Posted

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

 

  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
Posted

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

Link to comment
Share on other sites
Flashmaster82 Sr. Member

Flashmaster82

Posted
  • Author
Posted

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!

12.jpg

Link to comment
Share on other sites
flydev Hero Member

flydev

Posted
Posted (edited)
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 :

  1. define $homepage in the _init.php file :  $homepage = $pages->get('/'); // globally available to the website
  2. define $homepage at the begining of your template file :  $homepage = $pages->get('/');
  3. 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.

sprd-arrows.png.0d220c6d0f77e7e531529705959853e8.png      sprd-flags.png.bb88520768a400bc1dd94e4823bbc28a.png

 

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 by flydev
CSS and flags sprite
  • Like 2
Link to comment
Share on other sites
Flashmaster82 Sr. Member

Flashmaster82

Posted
  • Author
Posted

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?

13.jpg

Link to comment
Share on other sites
flydev Hero Member

flydev

Posted
Posted

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

 

Link to comment
Share on other sites
flydev Hero Member

flydev

Posted
Posted

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

 

  • Like 1
Link to comment
Share on other sites
Flashmaster82 Sr. Member

Flashmaster82

Posted
  • Author
Posted

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

 

Link to comment
Share on other sites
flydev Hero Member

flydev

Posted
Posted

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.

 

 

Link to comment
Share on other sites
  • 4 years later...
angelo, italy Jr. Member

angelo, italy

Posted
Posted

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!

 

  • Like 1
Link to comment
Share on other sites

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