MOD: Multi-Language Themes (Support RTL/LTR images)

[amirw2k]

Hello all,

I'm running a gallery (1.42) that is using two languages:
English + Hebrew (LTR/RTL)

Maintaining such a gallery in both RTL/LTR directions can be a real pain.

You can't use the same theme for both English and Hebrew because the RTL/LTR differences are making the image files show wrongly and distort the design. This happens when you have an image frame that distiniguishes the right and left border, such as the Transmission theme and others.

I wanted to create a fast and simple solution to make one theme support multiple languages so when you switch a language, the design shows properly.

This MOD involves creating a new theme for each language you use. Please note that you must create a theme for EVERY LANGUAGE. If you don't use a language from the big languages list, you will have to remove the file from the \lang directory. When you switch a language, the theme will automatically switch to a theme with the same name as the language.  If you're not concerened with RTL/LTR directions, this MOD is not for you.

Before you change anything, backup your files and verify that you understand what this MOD is doing !

The idea is very simple and include two small changes to the file "include/functions.inc.php"

First we will link the name of the language with a name of a theme, so when we change a language, the theme will be changed as well.

Find this line in functions.inc.php:

Code Select Expand

$return.= '<select name="cpgLanguageSelect" class="listbox_lang" onchange="if (this.options[this.selectedIndex].value) window.location.href=\'' . $cpgChangeUrl . '\' + this.options[this.selectedIndex].value;">' . $lineBreak;

Replace with this line:

Code Select Expand

$return.= '<select name="cpgLanguageSelect" class="listbox_lang" onchange="if (this.options[this.selectedIndex].value) window.location.href=\'' . $cpgChangeUrl . '\' + this.options[this.selectedIndex].value + \'&amp;theme=\' + this.options[this.selectedIndex].value;">' . $lineBreak;

To complete the change, we have to change the way coppermine deals with languages and add support for theme as well:

Find this line in functions.inc.php

Code Select Expand

if ($key!="lang"){$cpgChangeUrl.= $key . "=" . $value . "&";}

Replace with this line:

Code Select Expand

if ($key!="lang" && $key!="theme")$cpgChangeUrl.= $key . "=" . $value . "&";

To make it work, you have to take the directory of your favorite theme, create a new directory under the /themes directory and call it with the name of the language.
For example:
english
hebrew

Copy all the files to each directory, and now is the tricky part: You have to replace all references to the theme's name with the name of the language. The best is to use a mass replace application such as Ultra-Edit.
For example: Replace all occurences of "transmission" to "hebrew".

Please remember, that when you do a mass replace, the image file-names will also be changed so you'll have to change the file-names under the images directory as well.

The last thing to do is to fix the RTL problem with the images: Switch an image which is supposed to be located on the right to the left, and vice-versa. This can be done by renaming the files.

That's it, you're done !

Final notes: although this sounds a little bit clumsy, this MOD works very well with two languages and you can even use it to put static text inside the theme files so the titles will be in different languages. The only two changes that you make are to the file functions.inc.php. All the rest is simply manipulating two new themes.

Of course, the real solution for this problem will be to deal with image file like phpBB (images directory per langauge), but until it happens you can use this one.

Edit: To hide the default language from the languages list, comment the following lines in functions.inc.php:

Code Select Expand

          //if ($CONFIG['language_reset'] == 1){
          //    $return.=  '<option value="xxx">' . $lang_language_selection['reset_language'] . '</option>' . $lineBreak;
          //}


Amir W.

[donnoman]

Granted, I really don't know what I'm doing regarding internationalization issues, when I was working with a user who had an English and Arabic gallery I ran into the same thing.

I just when through the themes and and replaced the {LANG_DIR} token to LTR.

The user seemed happy, and the format of the theme wasn't broken.

What are the downsides of just setting LTR even when using a RTL language?

[amirw2k]

There is a major downside for using RTL (Right-To-Left) pages - it means that the whole page will be shown in a reversed way.

When dealing with tables, the switch from LTR to RTL puts the first column to the right as the first column to the left, and vice versa. The easiest way to describe the problem is using the arrow images that browse to the next/previous photo. If you put the arrow that points to the right at the right column, and you put the arrow that points to the left at the left column, and then you switch from LTR to RTL, the arrow that points to the right will now be located at the left column.
Instead of looking properly like this:  <   >
It will look like this: >   <  The solution for this is to rename the file names (left-arrow is switched with right-arrow).

When you have a theme that uses a design with columns and different images at the right/left columns, the whole design is ruined. You can use a simple theme with no special graphics and then you will not have this problem. I guess this user you mentioned used one of the simpler themes so he wasn't affected by this, or maybe he simply used only one language and didn't care for switching from RTL to LTR.

As I was saying in my previous post, the way to solve this is to use a different directory for images in different language. phpBB use this system and it works very well.

One last note. If you want to make coppermine RTL/LTR compliant, you must not use in the core file phrases like "align=left" or "align=right". It must be taken care of by the RTL/LTR. I had to edit some files and remove many of the "align=left" to make it work in LTR/RTL properly. If you're interested I can show you some examples.

By the way, it is possible to use LTR and still use the same language, but then you lose the direction of the web-page. When you work in RTL then everything is aligned to the right and this is the most convenient way for dealing with RTL languages. When you write from right to left, you want the menu to be on the right side instead of the left, you want the titles like album title, category title, etc. to be aligned to the right, and you want the text boxes to be aligned to the right. This can acheived easily by switching LTR to RTL with no other modification. Of course, you must never use the align property (excluding the align="center") so it can work automatically.

Best Regards,
Amir W.

[donnoman]

I approached the problem slightly differently. Instead of creating a different theme for each language I wanted to support, I just created two image directories for ltr and rtl.  Coppermine sets the language, so I just modify my theme to replace the language token in more places. IE: in image paths.

move all images into images/rtl and images/ltr

Use something like '.$lang_text_dir.'/  in theme.php

override pageheader to delay processing the button list (or don't use the button list) (specific to the theme)

Code Select Expand

function pageheader($section, $meta = '')
{
    global $CONFIG, $THEME_DIR;
    global $template_header, $lang_charset, $lang_text_dir;
    global $template_sub_menu_button, $sub_menu_buttons,$template_sub_menu; //needed because of delaying processing the buttons

    $custom_header = cpg_get_custom_include($CONFIG['custom_header_path']);

$charset = ($CONFIG['charset'] == 'language file') ? $lang_charset : $CONFIG['charset'];

    header('P3P: CP="CAO DSP COR CURa ADMa DEVa OUR IND PHY ONL UNI COM NAV INT DEM PRE"');
header("Content-Type: text/html; charset=$charset");
    user_save_profile();
   
    //delayed to make sure $lang_text_dir is populated before calling assemble_template
    $params = array('{BUTTONS}' => assemble_template_sub_menu($template_sub_menu_button,$sub_menu_buttons));
    $template_sub_menu = template_eval($template_sub_menu,$params);

    $template_vars = array('{LANG_DIR}' => $lang_text_dir,
        '{TITLE}' => $CONFIG['gallery_name'] . ' - ' . strip_tags(bb_decode($section)),
        '{CHARSET}' => $charset,
        '{META}' => $meta,
        '{GAL_NAME}' => $CONFIG['gallery_name'],
        '{GAL_DESCRIPTION}' => $CONFIG['gallery_description'],
        '{SYS_MENU}' => theme_main_menu('sys_menu'),
        '{SUB_MENU}' => theme_main_menu('sub_menu'),
        '{ADMIN_MENU}' => theme_admin_mode_menu(),
        '{CUSTOM_HEADER}' => $custom_header,
        );

    echo template_eval($template_header, $template_vars);
}

override pagefooter to add replacing the {LANG_DIR} token

Code Select Expand


function pagefooter()
{
    //global $HTTP_GET_VARS, $HTTP_POST_VARS, $HTTP_SERVER_VARS;
    global $USER, $USER_DATA, $ALBUM_SET, $CONFIG, $time_start, $query_stats, $queries;;
    global $template_footer, $lang_text_dir;

    $custom_footer = cpg_get_custom_include($CONFIG['custom_footer_path']);

    if ($CONFIG['debug_mode']==1 || ($CONFIG['debug_mode']==2 && GALLERY_ADMIN_MODE)) {
    cpg_debug_output();
    }

    $template_vars = array(
        '{LANG_DIR}' => $lang_text_dir,
        '{CUSTOM_FOOTER}' => $custom_footer,
        '{VANITY}' => (defined('THEME_IS_XHTML10_TRANSITIONAL') && $CONFIG['vanity_block']) ? theme_vanity() : '',
    );

    echo template_eval($template_footer, $template_vars);
}

search and replace for images in template.html

Code Select Expand


<img border="0" src="themes/powerbookg4/images/{LANG_DIR}/frame_r3_right.jpg" alt="" width="38" height="37" />

now switch the theme into the direction mode it was not designed for, and modify the images in its folder to suit.

Your done.

See the PowerbookG4 theme, where I used this method to provide a NO-MOD theme that looks correct in either language direction.

http://forum.coppermine-gallery.net/index.php?topic=24518.msg112793#msg112793

[donnoman]

How are we supposed to handle fields that WE DO want aligned to either the weak or strong side of the directional language we are in?

I don't think the powebookg4 theme itself specifies any aligns other than center, but I bet a bunch of the core code does.

Looking forward to see what you think of how the powerbookg4 theme works.

[amirw2k]

Hi donnoman,
This is very nice 

I've re-checked the mechanism of phpBB and found out they are using different directories for image-buttons (that have words printed on them). This is slightly a different case. I'm quite confused regarding how they solved the RTL/LTR problem. Since coppermine doesn't use buttons with text on them, it's not an issue here, but maybe it will be in the future.

Anyways, you've done a good work. If you want to align to the left on LTR, you don't need to use align, since it's automatic. Same goes for aligning to the right in RTL.
To align to the other direction, you simply have to add a function (either on the core files or javascript on the theme) that checks on LTR/RTL and returns right/left accordingly.

EDIT: I just noticed that you do use the rtl/ltr directories. Sorry for the mix-up  This is the best solution I can think of right now for supporting RTL/LTR. A one step forward will be to include it in the core files and require from theme designers to use a spcified {IMAGE-FILE-PATH} on all their images. This variable will replace the path to rtl/ltr according to the language.

This is only an idea, but Instead of writing this
themes/powerbookg4/images/{LANG_DIR}/

The theme designer will write this:
{IMAGE_DIR}/

We can keep the files in the images directory for designers that don't know what's LTR/RTL and the core files will replace {IMAGE_DIR} to either of these two:
1. themes/powerbookg4/images/
2. themes/powerbookg4/images/rtl/

Maybe there's a better implementation for this, it's only an idea.

Amir W.

[donnoman]

There's nothing CORE that would be required to change the token to {IMAGE-DIR} and pass a longer path, is just a matter of preference I suppose and settable in the theme itself.

I could do it either way, but since those paths were already made, it would have taken me more work to do what you suggest. If I were doing a theme from scratch, your method would save me some typing.