Jump to content

Adding image field to language

Recommended Posts


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:

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
Result on a german page:
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:
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:

Result German:
Everything is fine with this workaround. But why isn't working with the first code? Thanks for any help.
ProcessWire 2.7.2

Share this post

Link to post
Share on other sites
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:

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By louisstephens
      Hopefully this is the right place, if not, please move it to the proper sub. I installed the multi language module on my development (sandbox) set up not too long ago to test out a few things. From the start, I ran into some issues with dependencies not being met/installed, so I thought that I would simply just uninstall what had been. Unfortunately, that took me down a road of using some code in my home template to remove the modules (cant find it at the moment). After some struggling, I finally got it uninstalled, but it left behind 3 fields,
      language language_files language_files_site I thought that I could simply remove them from the languages template and then delete them, but I get the following error:

      I was wondering, is there a way to remove these using the api? I couldn't add any new users to the setup until I made "language" not required, but I was hoping to just remove all of the fields.
    • By bartelsmedia
      "Deepl" is an unbelievably good (paid) text translation service, that mops the floor with Google Translate.
      They have an API and it would be awesome, if there would be a module, that would integrate it for easy content translation.
      It could be a right-click context menu on the language tab:

      It should ask from which of available other language it shall take translate from.
      What do you think?
    • By gregory
      Hi guys.
      I would like to show only the first image as a preview of a slideshow. The code below shows the first image but is repeated. Do you know a solution? Thank you
      //Call image foreach($story->galleria as $img) { echo "<img src='{$story->galleria->first()->url}' alt='{$story->galleria->first()->description}'>"; }  
    • 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:
      Not yet complete. Translations that non-superusers will see is prioritized.
      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:
    • By Gadgetto
      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:
      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:

      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!
  • Create New...