Problem with CSS image replacement in a multiple language PHP site
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" 开发者_Python百科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.
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.
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
加载中,请稍侯......
精彩评论