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 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
    • By gonzz
      I'm doing an artist site and they want to be able to upload a large .tiff to their portfolio. I need to keep to a copy of the original file in the server for the art distributers, and of course serve jpg in the web front end.
      I had the idea of extending the file or image upload input so that if the image is tiff, keep it, and also convert it to jpg, so I could access through something like $image->originalUrl or $image->size(100, 100)->url 
      I was wondering if you thought this a good idea, or if i'm over-engineering something that could be done simply. Also, I've never extended an input, so any examples are welcome.
      Thanks!
    • By IvanSCM
      JSON files is bad. Need a convenient method of translation.
    • 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:
      2017/10/02
      Status:
      Not yet complete. Translations that non-superusers will see is prioritized.
      Name:
      ProcessWire-Norwegian-Language-Pack-nb-NO
      Translated using:
      ProcessWire 3.0.77 dev
      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 GitLab:
      https://gitlab.com/franctic-aerobic/ProcessWire-Norwegian-Language-Pack-nb-NO
    • By Markus Breitinger
      I want to use Particle.js as background of my page. What modules do i need and where must i put the code?
      The usage of particle.js in plain HTML is in the attached files.
      index.css
      index.html