Drupal - different images for different languages

Question

Hi all,

I have to "i18n" an existing drupal installation and add a second language.

I have an image on the homepage that is defined as a 'background-image' in a CSS file.

The image contains text, thus I need to show different images depending if the URL is:

http://mysite.com/en/

or

http://mysite.com/es/

How can I show a different image on the homepage depending on the user language (url based)?

I am pretty new to Drupal, so please don't assume I know anything!!!

update: I was hoping that I could define a particular image as "EN" and add an "ES" alternative, have one URL to the image (that can be used in templates or css etc), but depending on the user language, Drupal would serve up the language specific version. This would be ideal.

update2: Or maybe another approach is possible - to create a new 'content type' that simply contains an image so that: http://mysite.com/node/23 returns the pure image binary (image/jpeg) - then this node could be internationalized/translated like other nodes. I'm really struggling to find the 'Drupal' way to i18n images...

update3: Does Drupal store the user language in the session? If so, I could just write my own script, read the session language and serve a language specific image right? and completely avoid Drupal (eg: http://mysite.com/i18n-image.php?img=logo - ugly, but you get the idea), if so, how does Drupal store the session user language?

Answer 1

I would go with hook_preprocess_page. For example, it can be a good idea to switch style sheets based on the language:

function foobar_hook_preprocess_page(&$variables, $hook) {
  global $language;
  if($language != 'en') {
    $sheets = array();
    foreach($variables['css']['all']['theme'] as $stylesheet => $value) {
      if (strstr($stylesheet, path_to_theme())) {
        $stylesheet = str_replace('.css', '-'. $language->language .'.css', $stylesheet);
      }
      $sheets[$stylesheet] = $value;
    }
    $vars['css']['all']['theme'] = $sheets;
    $vars['styles'] = drupal_get_css($vars['css']);
  }
}

For further explanations, see this blogpost: http://becircle.com/language_based_stylesheet_switching_your_theme

Answer 2

You can use the internationalization module: http://drupal.org/project/i18n

and use the function "i18n_get_lang()" to get the current language.

Name your files depending on the language:

image_LANGUAGE.jpg
image_fr.jpg
image_es.jpg

To embed the images:

<img src="<?php echo base_path().path_to_theme().'/images/'; ?>image_<?php echo i18n_get_lang(); ?>.jpg" />

EDIT:

To implement something similar for the CSS files:

You can create various CSS files depending on the language:

styles.css
styles_fr.css
styles_es.css

Into the main file (styles.css) you can put all CSS that is not related to a specific language. Into the other files you can put the CSS related to a specific language.

styles_fr.css:

div.item1 { background: url('../images/item1_fr.jpg'); }

styles_es.css:

div.item1 { background: url('../images/item1_es.jpg'); }

And then you create a preprocess function for the page in your template.php file that will include the specific CSS style sheet based on the current language:

function YOURTHEME_preprocess_page(&$vars, $hook){
  drupal_add_css(path_to_theme().'/css/styles.css');
  drupal_add_css(path_to_theme().'/css/styles_'.i18n_get_lang().'.css');
}

Or you can directly use drupal_add_css() into a template file.