HowTo: Replace node title with a related image

I took over a static site, designed with Dreamweaver. The site design and layout were beautiful, and one of my goals for converting the site to Drupal was to maintain as much of the site's visual appeal as possible. One of the visual elements were sharp graphic titles on each page. And so began my quest to figure out how to replace drupal's text title with these image versions. I tried several methods before coming across the excellent article above (this page's parent), which gave me the following idea (much of the code is lifted directly from that article).

Overview: basic concept

A node on your site has a title, like "Bob's Antiques & Junk", and you want to display the related image file "bobs_antiques_junk.gif" instead of this text title when displaying the node as a page. Furthermore, you want the original title as alt text on the image, and you want "graceful degradation", so the original text title is displayed if the "related image" file does not exist.
What this does is essentially make the Title field of the nodes into an special image selector - if you use a title with an associated image, the image will appear, otherwise, the text title will appear - sweet!

Requirements:

• You are using a template theme.
• You are not averse to a little php.

All code goes into your template.php file.
NOTE: Ignore the opening and closing PHP tags in here. They are just for display and should not be added to your file.
For background info on template.php and the phptemplae_variables function, see:

• template.php: Overriding other theme functions http://drupal.org/node/11811
• Adding function call to _phptemplate_variables http://drupal.org/node/207841
• HowTo: merge multiple _phptemplate_variables functions http://drupal.org/node/152426

Step 1: convert title to related filename

This handy little function will take a title, like "Bob's Antiques & Junk" and convert it to a nice base filename: "bobs_antique_junk". Since Drupal will convert quotes and ampersands to "special characters" (e.g., $#039; or $amp;), it strips those out first. Then does a simple replace to get rid of apostrophe's and ampersands - common in titles. Finally, it replaces remaining spaces with underscores.
This function can be customized to convert titles to filenames however you see fit. Depending on the titles on your site, you may want to extend the substitutions made here. For example, use a regex to match and replace patterns (e.g., preg_replace("/[^a-zA-Z0-9]/", "", $string) ) - this is a little slower, but more general purpose.

Step 2: making the substitution - code snippets

We need both the file system path (to check if the file exists) and the URL (to form the image tag) for the title image. Note: substitute the correct extension and path to your title images - mine are '.gif' files that live in "files/images/titles".

Only perform the substitution if the "related image" can be found. Use $vars['title'] as the alt text for the image tag, and then put the image tag back in to $vars['title'].

A few refinements:
Restrict application of the substitution - see the parent article, which explains this nicely.

Save original title text for use in head and breadcrumb.

Step 3: putting it all together

I hope this helps someone - and if anyone with better PHP skills and Drupal knowledge than I (which means most ;-), has some suggestions for improving this script, please let me know.