PHP Internationalization and Localization Localizing Images

PHP Internationalization and Localization

Localizing Images

Problem

You want to display images that have text in them and have that text in a locale-appropriate language.

Solution

Make an image directory for each locale you want to support, as well as a global image directory for images that have no locale-specific information in them. Create copies of each locale-specific image in the appropriate locale-specific directory. Make sure that the images have the same filename in the different directories. Instead of printing out image URLs directly, treat their paths as localizable strings, either by explicitly storing them in your message catalogs or by computing the right path at runtime.

Discussion

The img() wrapper function looks for a locale-specific version of an image first, then a global one. If neither are present, it prints a message to the error log.

Example  Finding locale-specific images

       function img($locale, $f) {

              static $image_base_path = '/usr/local/www/images';

              static $image_base_url = '/images';

              if (is_readable("$image_base_path/$locale/$f")) {

                     return "$image_base_url/$locale/$f";

              } elseif (is_readable("$image_base_path/global/$f")) {

                     return "$image_base_url/global/$f";

              } else {

                     error_log("l10n error: locale: $locale, image: '$f'");

              }

       }

The img() function needs to know both the path to the image file in the filesystem ($image_base_path) and the path to the image from the base URL of your site (/images). It uses the first to test if the file can be read and the second to construct an appropriate URL for the image.

A localized image must have the same filename in each localization directory. For example, an image that says “New!” on a yellow starburst should be called new.gif in both the images/en_US directory and the images/es_US directory, even though the file images/es_US/new.gif is a picture of a yellow starburst with “¡Nuevo!” on it.

Don’t forget that the alt text you display in your image tags also needs to be localized. Prints a complete localized <img/> element.

Example  A localized <img> element

       print '<img src="' . img($locale, 'cancel.png') . '" ' .

                 'alt="' . $messages[$locale]['CANCEL'] . '"/>';

If the localized versions of a particular image have varied dimensions, store image height and width in the message catalog as well. Example 19-4 prints a localized <img/> element with height and width attributes.

Example  A localized <img/> element with height and width

       print '<img src="' . img($locale, 'cancel.png') . '" ' .

                 'alt="' . $messages[$locale]['CANCEL'] . '" ' .

                 'height="' . $messages[$locale]['CANCEL_IMG_HEIGHT'] . '" ' .

                 'width="' . $messages[$locale]['CANCEL_IMG_WIDTH'] . '"/>';

The localized messages for CANCEL_IMG_HEIGHT and CANCEL_IMG_WIDTH are not text strings, but integers that describe the dimensions of the cancel.png image in each locale.

The img() function used here is convenient because it inspects the filesystem at runtime to find appropriate files. However, if your image collection rarely changes (or changes in a predictable way, such as when you release a new version of your software) it can be  faster to store the paths themselves in the message catalog. This requires you to do some upfront work identifying which locales get a locale-specific image and which get a generic version, however.