How to show images instead of text

The previous recipe explained how to show an image beside the text.

But what if we want to replace the whole text with an image?

There's a certain CSS solution to this as well. But you may find that it's not perfect, so in this recipe we're not going to use CSS: we're going to use HTML's{IMG} tag.

We have explained previously that Flag uses a template to generate the output. Embedded in this template are some variables, among them $link_text, which is the textual label for the link. Fortunately, Drupal lets us alter variables before they arrive at the template, and we're going to use this mechanism to replace this text with an image tag.

Instructions for Drupal 6

Put the following preprocess function in your 'template.php'.

function phptemplate_preprocess_flag(&$vars) {
  $image_file = path_to_theme() . '/flag-' . $vars['flag']->name . '-' . ($vars['action'] == 'flag' ? 'off' : 'on') . '.png';
  // Uncomment the following line when debugging.
  //drupal_set_message("Flag is looking for '$image_file'...");
  if (file_exists($image_file)) {
    $vars['link_text'] = '<img src="' . base_path() . $image_file . '" />';
  }
}

However, for the theming system to notice this function you'll have to copy 'flag.tpl.php' into your theme folder (better still, create a symlink). (This also makes path_to_theme() point to this theme folder and not to Flag's folder.)

And remember to clear Drupal's cache.

How does it work?

The function above is called whenever a flag is about to be printed. It looks for an image with the name flag-bookmarks-on.png or flag-bookmarks-off.png --depending on the state of the flag-- and, if exists, it shows it instead of the text. "bookmarks" is only an example: the machine-name of the actual flag used will be used. The images should be placed in your theme folder.

Instructions for Drupal 5

We'll use the function above. Paste it into your template.php. However, Drupal 5 is less elegant and is not going to call it. So we're going to call it ourselves, by adding yet more code:

function _phptemplate_variables($hook, $vars) {
  if ($hook == 'flag') {
    phptemplate_preprocess_flag($vars);
    return $vars;
  }
  return array();
}

(If you already have a _phptemplate_variables() function in your template.php, PHP will shout at you. You'll have to merge this code into your existing _phptemplate_variables().)

For all this Drupal 5 trickery to work, you must first copy the little glue function shown in Flag's 'theme/README.txt' into your template.php.

Another Simple Option

For anyone else interested in this, a simple way is to add your images to the appropriate .css class (add flag and unflag), in the admin section set the link text to something short--like ( + ) and ( - ) .

Then, override the flag-wrapper a { class, and set the link color the background (usually white, #FFF ).