Gettext: Images and other media
06 October 2007Using the gettext framework to display images and other media in the correct language
Translating image replaced text
If you use CSS to replace your header text with a text based graphic remember these need translating too. By using gettext to change the lang attribute of the xhtml tag, you can then use CSS to change element background images.
This gives added flexibility to language management wordpress plugins like polyglot and language switcher.
1. Prepare the graphics
You’ll need to prepare the graphic text for your chosen languages. Either in separate files or in one file if you are using Petr Stanicek’s (Pixy) Fast Rollovers Without Preload (note: if you create a separate graphic for each language and give it identical dimensions all you need to change in the css is the background image url.)
2. Prepare your CSS
e.g.
html[lang=“en”] #header h1{background-image: url(images/h.gif);}
html[lang=“cy”] #header h1{background-image: url(images/h_cy.gif);}
h.gif
h_cy.gif
3. Prepare your xhtml template
A well formed page should have a language attribute in the html because it helps screen readers speak more clearly and browsers to render characters correctly (more info: Language information and text direction ). It’s also a very useful formatting hook when designing multilingual sites!
<html lang=”<?php _e(‘en’) ?>”>
4. update your .po file
add a message string to your .po file
#: wp-content/themes/test/header.php:42
msgid “en”
msgstr “cy”
When the user switches language the html lang attribute changes and your css pulls in the graphic with the correct language.
Changing file names using Gettext
Translating flash
You can also use gettext with the SWFObject method of embedding Flash files. Use the en string to change the file name of the alternative image and the flash file. When the language is English the image is image_en.jpg and the flash file is flash_en.swf. When the language is switched the gettext translates ‘en’ to ‘cy’ and the file names change accordingly to image_cy.jpg and flash_cy.swf.
Heres the example xhtml
<div id=“flashcontent”>
<img src=“http://www.mydomain.com/images/image_<?php _e(‘en’) ?>.jpg” width=“654” height=“150” alt=”<?php _e(‘Alt text for my image’) ?>” /></div>
<script type=“text/javascript”> /* <![CDATA[ */ var so = new SWFObject(“http://www. mydomain.com/flash/flash_<?php _e(‘en’) ?>.swf”, “myswfid”, “654”, “150”, “6”, “#0e0e70”); so.write(“flashcontent”); /* ]]> */ </script>
</div>