1

i'm building a multiple language (Spanish/English) site with PHP & CSS.

I have this piece of code in my common.php file to point to different css files depending on the language the user defines:

<?php
if ($_GET['lang'] == 'en')
$cssFile = 'english.css';
elseif ($_GET['lang'] == 'es')
$cssFile = 'espanol.css';
?>

This is an example of how my english.css file looks:

#rightHome h3 {
padding-top: 20px;
text-indent: -999px;
background: url(images/latestworkTitle.png) no-repeat;
background-position: 0 20px;
}

And my espanol.css file looks like this:

#rightHome h3 {
padding-top: 20px;
text-indent: -999px;
background: url(images/latestworkTitleES.png) no-repeat;
background-position: 0 20px;
}

Also my index looks like this:

<?php
include_once 'common.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jimena Contreras | Film Scoring Composer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="alternate" type="application/rss+xml" title="Jimena Contreras's News Feed"  href="http://www.jimenacontreras.com/news.xml" />
<link rel='index' title='Jimena Contreras | Film Scoring Composer' href='http://www.jimenacontreras.com/' />
<link rel='prev' title='Biography' href='http://www.jimenacontreras.com/biography' />
<link rel='next' title='Resume' href='http://www.jimenacontreras.com/resume' />
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="Jimena Contreras is a film scoring composer based in  Mexico City specialized in feature films, short films, documentaries, spots & TV Series." />
<meta name="keywords" content="film scoring, composer, compositora, bandas sonoras, feature films, short film, TV Series, peliculas" />
<meta name="robots" content="INDEX, FOLLOW" />
<link href="styles.css" rel="stylesheet" />
<link href="menuprueba.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="<?php echo $cssFile; ?>" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/contact-form.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
</head>
<body>
<div id="container">
<?php 
include ("header.php");
// Define our array of allowed $_GET values
$pass = array('home', 'biography', 'resume', 'filmography', 'contact', 'compositions- performed-or-broadcasted', 'resume2', 'resume3', '1015', 'i-laugh-not-to-cry', 'with-2-of-sugar', 'feminine-lips', 'crumbs-of-venus', 'pito-the-movie', 'the-mapuche-nation', 'creando-conciencia', 'building-unam', 'monsivais-honoris-causa', 'mexico-68-olympic-games', 'the-mexican-people', 'raining-colors', 'eyes-of-paradise');
// If the page is allowed, include it:
if (in_array($_GET['id'], $pass)) {
include ( $_GET['id'] . '.php'); 
}
// If there is no $_GET['id'] defined, then serve the homepage:
elseif (!isset($_GET['id'])) {
include ('home.php'); 
}   
?>
<?php 
include ("footer.php");
?>
</div>


</body>
</html>

And my lang.en.php file looks like this:

<?php
/* 
------------------
Language: English
------------------
*/

$lang = array();

define('HEADING_NEWS', 'Latest News');
define('TEXT_NEWS1', '<span class="date">04.24.2011 </span>| <span class="news">Festival   Tour <br /><br /></span>Wishing the best of lucks for my last work "Crumbs from Venus",   shortfilm of Maira Bautista Neumann being sent to various festivals around the world.<br /><br />Good luck!');
define('TEXT_NEWS2', '<span class="date">02.26.2011 </span>| <span class="news">NYU! <br /><br /></span>Ready to start the adventure in NY in the ASCAP Workshop at NYU, will be taught by Sean Callery (24, La Femme Nikita).');
define('TEXT_NEWS3', '<span class="date">02.26.2011 </span>| <span class="news">New Project <br /><br /></span>Working on the soundtrack of P.I.T.O The Movie, a film by Fer Ortega, production by Yenin Escotto<br /><br />Click<a href="http://www.elpitolapelicula.com" target="_blank"> here </a> to go to the official website.');
?>

Now the thing is that in my home page when you toggle between english & spanish everything works fine (meaning that text & images change), but when you click to go to another page e.g. biography the text is translated but the image remains the same, so my question is, what am i doing wrong?

To view the site working you can go to http://www.jimenacontreras.com

Any help is much appreciated, i hope i'm clear enough and that my question is easily understandable.

Thanks in advance.

J.C. Chávez S.

J.C. Chávez S.
  • 11
  • 1
  • I'm not sure what problem I'm supposed to be seeing. When I go to the biography page, where would I see a problem and what would it look like? I also don't see any h3 tags on the biography page so I'm not sure if there are other image-replacement cases you have that you haven't mentioned. Your site looks nice, by the way, although slow. – kinakuta Jun 13 '11 at 23:16
  • Hey, thanks for replying so fast, well when you go to the biography page in english the title on the right side of the page just above the text says _Biography_ and if you choose spanish it should say _Biografía_ but instead it just stays in English. Also in the bio page there's only h2 tags but the image replacement is exactly the same as the h3 tags in home page. Thanks, i'm glad you liked it, what would you recommend to speed it up? – J.C. Chávez S. Jun 13 '11 at 23:38
  • a few things that can help site performance: combining css files - the fewer http requests the browser has to make to retrieve files, the faster the site will generally be. Same thing with scripts. Load your scripts at the bottom of the body so they don't block DOM construction while the page is trying to load (or use something like Load.js). Make sure you're using css sprites where you can, and the most efficient image formats you can. – kinakuta Jun 14 '11 at 00:00
  • cool dude, thanks for the recommendations on site performance, i'll try to apply them and see how it goes. – J.C. Chávez S. Jun 14 '11 at 00:02
  • I forgot to include too - minify your css and javascript in production - this decreases file size which is especially useful if you start combining them. – kinakuta Jun 14 '11 at 00:15

2 Answers2

0

You don't have '?lang=es' or '?lang=en' part on any pages except for the title one. Hence GET returns nothing. I will personally recommend using folder structure for different languages instead of trying to use the same url. Like: http://www.jimenacontreras.com/ and http://www.jimenacontreras.com//es instead of what you are doing. You can have text in english and spanish stored in the db and have language setup in the include configs file (there will be a separate config file for each language folder.

If you want to stick with this you can set a session variable for cssFile and check it on top of every page. Something liek this:

<?php
  if (isset($_GET['lang'])){
     if ($_GET['lang'] == 'en'){
      $cssFile = 'english.css';
  }
      elseif ($_GET['lang'] == 'es'){
  $cssFile = 'espanol.css';
  }
      $_SESSION['lang '] = $cssFile;
  }elseif(isset($_SESSION['lang'])){
   $cssFile =  $_SESSION['lang '];
  }
   ?>

Also having a bunch of different css and javascript files is a horrible idea speed-wise.

AR.
  • 1,935
  • 1
  • 11
  • 14
  • Hi there, in my header i have '?lang=es' & 'lang=en', and i supposed that having it there and including my header in my index file would be enough to be able to make this work. Also i'm not really familiar with databases so any kind of documentation that i could read would be much appreciated. I f i'd like to stick with this i'd have to place the piece of code you gave me in every page? In e.g the bio page looks something like this: `

    `
     – J.C. Chávez S. Jun 13 '11 at 23:49
  • GET reads from url address and you only get this on one page - if you actually click on English/Spanish. When you go to a different page it doesn't have it. So use sessions if you don't want a separate folder for a different language. – AR. Jun 13 '11 at 23:52
  • Ok i just placed this piece of code on my bio page but nothing happened, also would you recommend getting all the javascript files into a single one, to speed it up? BTW, thanks a lot for taking the time to help me :) – J.C. Chávez S. Jun 13 '11 at 23:57
  • You have to open session before any other code. If you're using included header file (which you probably should) - do it there. Otherwise on top of every file. session_start(); Read here: http://www.w3schools.com/php/php_sessions.asp. And yes, combining js files into one or two will speed it up. Same with css. You'd be making less HTTP calls from your page. – AR. Jun 14 '11 at 00:02
0

Add a lang attribute to the body tag (or where it applies), it's quite a universal one, so many HTML tags have it.

In CSS you can then create selectors that only match a specific language, so to choose the right background images for example. This is done with the attribute selector.

With this way you can seperate data (the language information) from the style (graphics).

body[lang=en] #header { your engish graphic } 
body[lang=es] #header { your spanish graphic }

Depending on the support of CSS version, there is also the CSS 2.1 :lang pseudo class.

Ref: Designing a Bilingual Website: A Quick Case-Study

hakre
  • 193,403
  • 52
  • 435
  • 836
  • Thanks for answering, i'll check this out because this is completely new for me so i really have no idea how to implement it in the site – J.C. Chávez S. Jun 14 '11 at 00:24