Calling different images from the CSS based on language

Hi,

We had our company's webpage built using ModX, and we've been pretty successful in updating and maintaining it ourselves. 1 thing I haven't figured out yet though:

1. If the image call comes from the CSS, how do you have the page pull up different graphics based on which language version you are in? Each language version is based on its own template for the home page (3 total). Currently, we have a team bio page with buttons that open the bios, but the text on the buttons is in English. The buttons are JPEGs in the image library. The code is written like this:

#left_container .view_detials .view_box .content a{float:left; width:83px; height:24px; background:url(../images/view_bio_btn.jpg) no-repeat 0 -24px;}

Now, all the other non-English graphics, etc. are loaded in the non-English templates themselves. And there's other parts of the CSS where we list the different pages/images that need to come up when a different language is selected eg:

#left_container .tilte_five_box h5 a.bars_9, #left_container .tilte_five_box h5 a.bars_121, #left_container .tilte_five_box h5 a.bars_212{ height:50px;background:url(../../assets/images/bars/bar_team_bios.jpg) no-repeat 0 0;}

...Where 9, 212, and 121 are the different pages that have to get pulled up based on the language. But how do you write the code to call the different image based on what template/language you are in? Instead of loading the English buttons image into the 2 non-English pages?

Thanks,

Sean O.

When I need to do something like that, I use a small <style>...</style> block in the head of the template just for that directive. That way I can use snippets and TVs to manipulate the CSS.

As far as buttons go, I just use background images, and have the text be actual text, using lexicons if necessary.

Yeah, the way to do that is not have the text in the actual picture, the text is in the html code and is superimposed on top of the picture.

Susan is talking about the smooth tech way, and I would just do the clunky way of making two templates, one for each language. This isn't good if the site and templates are massive, but fine for a few pages. And you mention several templates for front pages, according to language.

Susan is using tvs or snippets and then the style code...but if you just have one page, my way might be easier, just copy the template, change those links to the new picture name or groups of names, however you do it now, and that's it. I assume you have the other pictures for the second language.

It sounds like you might be able to take the text out of the images and use the same image for each language. You can use a MODX language tag for the text so it will match the language:



If you really do need different images, I would be inclined to do it with a TV as well, but like this:

In the template:



Then add the two-letter language codes to the end of the image filenames:



If you use @INHERIT for the default value of the TV, you can set it for any parent and all the children will inherit the value. If the default language is English, for example, you can also set the TV to @INHERIT en so you only have to set it for non-English pages.

Depending on how the site is set up, you might also be able to use this instead of the TV tag in the template:



That would be a lot faster. A quick test with this in the body section of the template will show you if it will work:

<p>Culture Key: [[++culture_key]]<p>

Thanks for the advice all. We do actually use 3 separate templates, one for each language. The trick is the code in the CSS for that page only points to the one image... we worked around it by using verbiage that works in all 3 languages (one of the few examples of this that exists).

Thanks for all your help!

Sean O.

Low tech solutions FTW!!