Friedrich

Adding image field to language

Recommended Posts

Hello,

I noticed today some strange behaviour in connection with the multi-language plugin.

I wanted to create a multi-language page and to display the languages in the frontend. To make it more fancy I wanted to add a flag icon to every language. So I used an image field I already had (image_small) and added it to the language-template. So far so good. Then I uploaded two icons and tried to fetch them in the frontend.

I have the languages default (English/Englisch) and de (German/Deutsch) and the following code:

<?php
echo 'active|'.$user->language->image_small->url;
foreach($languages as $language) {
    echo $language->title.'|'.$language->image_small->url;
}
?>

Result on an english page:

active |/site/assets/files/1021/united-states.png
English |/site/assets/files/1021/united-states.png
Deutsch|/site/assets/files/1081/
 
Result on a german page:
active|/site/assets/files/1081/
English|/site/assets/files/1021/
Deutsch|/site/assets/files/1081/
 
Somehow he can't get the German flag image at all and only the English page the English flag.
 
But if I'm fetching the images from the $languages variable, it works. So I use this temporary as a workaround:
 
<?php
echo 'active|'.$languages->get($user->language->name)->image_small->url;
foreach($languages as $language) {
    echo $language->title.'|'.$languages->get($language->name)->image_small->url;
}
?>
 

Result English:

active|/site/assets/files/1021/united-states.png
English|/site/assets/files/1021/united-states.png
Deutsch|/site/assets/files/1081/german.png
 
Result German:
active|/site/assets/files/1081/german.png
English|/site/assets/files/1021/united-states.png
Deutsch|/site/assets/files/1081/german.png
 
Everything is fine with this workaround. But why isn't working with the first code? Thanks for any help.
 
Environment:
PHP 5
ProcessWire 2.7.2

Share this post


Link to post
Share on other sites
Environment:
PHP 5
ProcessWire 2.7.2

Can you please be more specific on the version of PHP that you are using (i.e. 5.3.8, 5.4, 5.5 or 5.6)?

Share this post


Link to post
Share on other sites

I've stumbled over the same behavior a few days ago running PHP 7 and PW version 3.0.15, so it's not limited to either of those.

Share this post


Link to post
Share on other sites

I've stumbled over the same behavior a few days ago running PHP 7 and PW version 3.0.15, so it's not limited to either of those.

That's good to know and will help in getting this problem resolved.  The question was asked because the OP stated PHP 5, which would be less than what's required to run ProcessWire.

Share this post


Link to post
Share on other sites

Sorry, forgot to mention it. It is PHP 5.5.9.

Oh, you had the same error in version 3. Then it seems to be not fixed yet (if this is actually a bug).

Share this post


Link to post
Share on other sites

Hello. I just decided today to get rid of the language names and use flags for a project of mine and got the same issue mentioned by @Friedrich and @BitPoet after setting my languages to Bulgarian (default), English and Russian. For both  - the Russian and English language the icon shows promptly, however only for the Bulgarian one (most likely for the default one) the url does not point to the file but to the folder with the language ID (in my case: site/assets/files/1010

To make the image working, I had to modify a bit the code to check if the language is Bulgarian and add the file name:

<?php
// Showing the language flags
// remember what language is set to
$savedLanguage = $user->language;
$icon = '';

echo "<span style='margin-left:34px;'>";

foreach($languages as $language) {

// if user is already viewing the page in this language, skip it
if($language->id == $savedLanguage->id) continue;

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

// set the user's language, so that the $page->url and any other
// fields we access from it will be reflective of the $language
$user->language = $language;

// ID 1010 is of my Bulgarian (problematic language)  
if($language->id == '1010' ) {
$icon = $language->lang_flag->url . "bulgaria.png";
} else {
$icon = $language->lang_flag->url;
}
// output a link to this page in the other language
echo "<span style='margin-left:10px;'><a href='$page->url'><img src='{$icon}'></a></span>";
}
echo "</span>";
// restore the original language setting
$user->language = $savedLanguage;
?>

Has anyone had a similar case and found some more elegant solution than checking for the language ID and manually assigning the file name after $lang_flag->url ?

Share this post


Link to post
Share on other sites

@ottogal Thank you for the impressive reading. Will redo my language selector keeping the flag as the customer requested it, but will also put the language name so that it is clear what language is used. And yes, I will make sure that every language name is written as per the country standard.

Share this post


Link to post
Share on other sites
8 hours ago, MilenKo said:

keeping the flag as the customer requested it

No chance to make the customer read it, too?

Share this post


Link to post
Share on other sites

Well after your reading I went back to suggest to the "customer" who is a close friend of mine and shared the reading. So now we agreed to have the language names versus the flags or even add a dropdown box listing some countries that speak the selected languages.

Thanks again for the sharing.

  • Like 2

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By franctic-aerobic
      Here's my Norwegian language pack for ProcessWire. I've been adding translations over some time, to suit my own projects users needs.
      Last updated:
      2019/01/04
      Status:
      Not yet complete. Translations that non-superusers will see is prioritized.
      Name:
      ProcessWire-Norwegian-Language-Pack-nb-NO
      Translated using:
      ProcessWire 3.0.123 master
      Number of files:
      177 wire files and 68 site files – ranging from just started to completely translated. The site files includes translation some free and some pro modules, see the complete list in the README.md at GitHub.
      Available at GitHub:
      https://github.com/franctic-aerobic/processwire-norwegian-language-pack-nb-no
    • By Gadgetto
      Hello,
      I'm very new to ProcessWire but already fell in love with this CMS/CMF! I just finished my first small project and as I saw a lot of questions and different answers in this forum on how to set up a nice language switcher for your website, I decided to write my first tutorial.
      ----------
      Please note:
      I rewrote this tutorial since I was made aware and learned that flags should not be used for language selectors!
      There are some threads here in the forum (and from external sources) where this question is discussed:
      https://processwire.com/talk/topic/13196-adding-image-field-to-language/
      http://daily.unitedlanguagegroup.com/stories/editorials/inside-design-language-selector-no-flags
      https://processwire.com/talk/topic/16524-extending-languages-template/
      http://www.flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/
      https://processwire.com/talk/topic/14241-language-names-and-utf8-page-names/
      Thanks,
      @ottogal
      @bernhard
      @jmartsch
      @kongondo
      an all others for your hints!
      ----------
       
      TUTORIAL - Set up a nice language switcher for your website - here we go:
       

      This will be the desired result!
       
      Step 1)
      Setup at least 2 languages in your PW install. In my case it's German (default language) + English:
       

       
      Step 2)
      Add a custom field
      Type = Text
      Name = languagecode
      This will hold the ISO 639-1 two-letter language code for the respective language. The field is needed to provide a simple method for outputting the language code in your templates. Without this field, you will need to programmatically construct your two-letter language code output via PHP (at least for the default language, as ProcessWire doesn't allow to rename the default language and it will always be called default).
      Here is an overview for ISO 639-1 two-letter language codes:
      https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
       

       
      Step 3)
      Add this field to the system template: language.
      To achieve this, go to Setup / Templates and activate the filter Show system templates:
       

       
      Now you can add the previously created field languagecode to the language template.
       

       
      Step 4)
      Edit your languages and fill in the appropriate values.
      a) default (German)
      Name = default (this can't be changed and is read only)
      Title = Deutsch (in both language tabs! - this is important as your visitor should always see his language item ... in his language)
      languagecode = de
       

       
      b) english (English)
      Name = english
      Title = English (in both language tabs! - this is important as your visitor should always see his language item ... in his language)
      languagecode = en
       

       
      Step 5)
      Now we are ready to write our template output!

      As we already have the appropriate two-letter ISO language code (languagecode field), we can use this in our html lang property:
       
      <html lang="<?php echo $user->language->languagecode; ?>">  
      Also the rel alternate output in the html head is simple. Put the following code within your <head></head> area:
       
      <?php // Handle output of 'hreflang' link tags for multi-language (SEO!) foreach ($languages as $language) { if (!$page->viewable($language)) { continue; } // Get the http URL for this page in the given language $url = $page->localHttpUrl($language); // Get the language code using custom languagecode field $languagecode = $language->languagecode; echo PHP_EOL.'<link rel="alternate" hreflang="'.$languagecode.'" href="'.$url.'">'; } ?>  
      In my sample I've used Boostrap 4 and the code below shows a complete navbar with our language switcher (BTW the language switcher will always be visible, even when the bootstrap navbar is collapsed):
       
      <nav id="mainnav" class="navbar navbar-expand-lg navbar-light px-4 px-md-5 sticky-top"> <a class="navbar-brand" href="<?php echo $config->urls->root; ?>"> <img src="<?php echo $config->urls->templates; ?>images/logo-rund-80x80.png" alt=""> Your Site Title </a> <ul class="navbar-nav ml-auto mr-3 mr-lg-0 order-lg-last d-none d-xs-custom-flex language-switcher" aria-label="<?php echo __('Sprache wechseln') ?>"> <?php echo '<li class="nav-item dropdown">'; // Construct the language prompt in the current user language $prompt = $user->language->title.' ('.strtoupper($user->language->languagecode).')'; // Current language = dropdown-toggle echo '<a class="nav-link dropdown-toggle" href="#languages" id="language-select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'; echo '<span class="world-icon"></span><span class="sr-only">'._x('(aktuelle Sprache)', 'navigation').': </span> '.$prompt; echo '</a>'; echo '<div id="languages" class="dropdown-menu dropdown-menu-right" aria-labelledby="language-select">'; foreach ($languages as $language) { // Get the http URL for current page in the given language $url = $page->localHttpUrl($language); // Construct the language prompt in the given language $prompt = $language->title.' ('.strtoupper($language->languagecode).')'; // Next language item (except current language) if ($user->language->id != $language->id) { if (!$page->viewable($language)) { echo '<span class="dropdown-item disabled">'.$prompt.'</span>'; } else { echo '<a class="dropdown-item" href="'.$url.'">'.$prompt.'</a>'; } } } echo '</div>'; echo '</li>'; ?> </ul> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMainMenu" aria-controls="navbarMainMenu" aria-expanded="false" aria-label="<?php echo __('Menü einblenden / ausblenden') ?>"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse my-3 my-lg-0" id="navbarMainMenu"> <ul class="navbar-nav mr-auto"> <?php // Top navigation consists of homepage and its visible children foreach ($homepage->and($homepage->children("template=main-page|news|contact-points")) as $item) { if ($item->id == $page->rootParent->id) { echo '<li class="nav-item active">'; echo '<a class="nav-link" href="'.$item->url.'">'.$item->title.'<span class="sr-only"> '._x('(aktuelle Seite)', 'navigation').'</span></a>'; echo '</li>'; } else { echo '<li class="nav-item">'; echo '<a class="nav-link" href="'.$item->url.'">'.$item->title.'</a>'; echo '</li>'; } } ?> </ul> </div> </nav>  

      That's it! I hope you will like my tutorial and if there are any questions, critics or improvements please let me know!
      Thanks,
      Martin
       
    • By tron1000
      Hello! After I upgraded PW from 2.5.? to 3.0.116, my language tabs in the backend behave strange. I have 3 languages: german, french and english (default). Since I upgraded, all multilingual fields show the 3 tabs (DE, FR, EN) plus an additional textfield below for EN (see screenshots). The german tab is ok, but the upper tabs FR and EN both show the content in french, while the additional tab below shows the english content. When I click on the folder icon to the right to change the view, all looks ok. Also the frontend is ok.
      I uninstalled and reinstalled the module «LanguageTabs», but that didn't help …
      Any ideas?
      Thanks a lot, Andrej


    • By cosmicsafari
      Hi all,
      Thought I had the language translation working but now when I attempt to access the language through the backend (Setup > Languages > My Language) it throws an error:
      Recoverable Fatal Error: Argument 3 passed to ProcessWire\LanguageTranslator::textdomainTemplate() must be of the type array, null given
      Can anybody shed any light on what would cause this error when trying to access my language through the settings in the backend, or attempting to view it on the frontend with its language specific URL.
      The only thing I have changed recently was moving the DB to a different location however the one exported was the one that I previoulsy had my custom language working on it previoulsy.
      Any ideas, im at a bit of a lose as to what would have caused this when it was working previously.
       
    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel