Zen Cart Tips and Tricks: Adding Descriptive Text to Mouseovers on Additional Product Images

There are many things that make Zen Cart fabulous, and one of them is the built in easy-to-use support for additional product images. While you could insert these manually into descriptions, there really is no need.

The system that Zen Cart has by default will automatically detect and insert additional product images as long as you pay attention the naming scheme. So as a quick introduction to the main topic of this post, here is how it works. Let's say that for one of my products I've named the product ID "prod001". I'm quite fond of labeling my images with the product ID - mostly because it saves me the trouble of having to remember what is what. So in this example, my image is prod001.jpg and I've already added this appropriately when creating the product description.

So if I have 8 other images for prod001, the only thing I have to do is name these images in a similar way. For Zen Cart's default additional product images system to work, I must include the same base name, in this case prod001. I try to keep it simple by just naming the additional images things like prod001_1.jpg or something that describes it like prod001_Side_View.jpg or something like that. I really like to know what things are without having to open up the image to remind myself. As long as I include the same base (name of the first/main image minus the file extension), Zen Cart will do the rest.

Recently, a client wanted to have particular descriptive text appear when hovering over the additional product images. The default in Zen Cart is that when you hover over the image (the alt tag) is simply the name of the product. Well, who needs 8 or however many images with the same alt tag.

So here is simple code change that will allow you to automatically have different descriptive text when hovering over one of the additional product images:

1. The file to modify is additional_images.php located under Includes --> Modules (folder).
2. In this file, you should see the following line of code:
   
   " $img_thumb = zen_image($products_image_directory . $file, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); "
3. You can replace this line with the following 3 lines:
   
   " $img_alt_main = str_replace($products_image_base,'',$file); $img_alt = str_replace($products_image_extension,'',$img_alt_main); $img_thumb = zen_image($products_image_directory . $file, addslashes($img_alt), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT); "
4. You can then either replace the existing file or use the also-fabulous Zen Cart overrides system by putting the file in a folder with the same name as your template under the Includes--> Modules folder.
5. Now, whatever you want to have appear when hovering over the additional product image, you would simply include this in the file name.
   
   So what particular code modification does is tell Zen Cart to put in the image alt tag whatever appears after the base name in the additional image filename (minus the extension). So in my earlier example, when hovering over the image, I would see "Side_View". If you are naming your additional files with numbers or letters, this code change will not be useful. But if you label them with names like colors, sizes, the view of the photo, etc. etc., you might find this quick little change to be quite useful.