Image Headers for Product Listing Page

[innovafire]

Hi all.

I had wanted to be able to put some stylized image text above each product listing pages (in place of the category name), and have it different for each category, but I didn't want to affect the category box, as I wanted that to stay as text.

I had not been able to find a solution for this, and so I figured one out myself.

The modification only affects the tpl_index_product_list.php file, located in the /includes/templates/YOUR_TEMPLATE/templates folder.

And you simply change the following line:

<h1 id="productListHeading"><?php echo $breadcrumb->last(); ?></h1>

With this:

<div align="center">
<br/>
<?php 
$spacereplace = trim($breadcrumb->last());
$spacereplace = str_replace (" ", "_", $spacereplace); 
$catimagestring = "<img src=\"/menu/images/$spacereplace.gif\" />"; echo $catimagestring; 
?>
<br/>
</div>

The above stores the images in the main images directory, but that can obviously be changed to whatever you want.

Essentially all it does is take the category name, replace the spaces between words (if any) with underscores, and appends the ".gif" extension and puts in an IMG tag. So you need to have an image file that is named exactly in this way so that it can find the file.

The only drawback to this method (albeit minor) is that you have a few characters that you cannot use in your category names in order for this to work correctly (i.e. / or " or . etc). Maybe there is a way to solve this too, but I am not that familiar with PHP to know what it is yet.

If you want to see it in action, check the following link? (Currently only the first 4 categories are set up with images. So click on one of them.)

http://www.bestpizzainphilly.net/menu

Hope this helps!

Chris

[innovafire]

One more thing is that when you name your image files, make sure that, in addition to the "_" between the words, that the letters match the CASE of the letters in the category name exactly, or it won't find the file.

Chris

[Beth-katherine]

Love what you have done with the images. I see you're almost finished. I'm going to try your technique as it seems it's exactly what I want to do. Sure wish there was a WYSIWYG editior for MACs to just put and place images in exchange for all the hand coding one has to do with PHP.

So from what I understand you said is that you name the category image the same as the category you are replacing with the same CASE, right?


Beth-Katherine