Images, breadcrumb, osCommerce

My friend Paul recently asked about how to have images in the usual osCommerce breadcrumb…I answered it as a comment to a very old post in this blog, but thought it deserved it’s own post. So…

Step 1. Make yourself a “home” graphic and an “arrow” graphic, save them into the usual osCommerce images directory. I called mine “home.gif” and “arrow.gif”.

Step 2. Open up /includes/header.php and find this:

[php]$breadcrumb->trail(‘ » ‘);[/php]

Change it to this:

[php]$breadcrumb->trail(tep_image(DIR_WS_IMAGES . ‘arrow.gif’, ”, ”, ”, ‘align=”absmiddle”‘));[/php]

This is telling osCommerce to use the arrow image. The parameter align=”absmiddle” is not great, but does OK for this demonstration. Better would be to add a class and then vertical align the class (I’ll cover that another time). align=”absmiddle” lines up the image with the text.

Save the changes and upload the file.

Step 3. Open up /includes/application_top.php and find this:

[php]$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);[/php]

Change it to this:

[php]$breadcrumb->add(tep_image(DIR_WS_IMAGES . ‘home.gif’, ”, ”, ”, ‘align=”absmiddle”‘) , HTTP_SERVER);[/php]

Save the changes and upload the file.

Refresh your osCommerce, and you’ll get a breadcrumb that looks something like this;

Mine is ugly in the extreme, but if you take your time in creating nice images, and then play with the stylesheet, you can come up with all sorts of great idea. Here is what Paul made;

Which I think looks great!

What can you come up with for the breadcrumb in your osCommerce site? More ideas.