Multiple Images in Zen Cart

I decided to tackle a major annoyance of Zen Cart over the Christmas break – multiple images handling. Basically, even the newest versions of Zen Cart allow you to link just one image at a time to your products, and for the rest, it uses an antediluvian system of traversing the image path for the main image name with a suffix.

Other than being a silly way of tackling a simple data problem, this leads to a whole lot of buggy behavior. For example, since the suffixes are numeric, similarly named products where a number is part of the name may end up showing weird or unrelated images.

In the interest of making internet technology suck less, I’m posting what I came up with as a pretty novel solution. I know that others have attempted to deal with this issue, but most of the things I was able to find on the Zen Cart forums include external pages for managing images. I don’t take those modules seriously, since of the main usability issues in Zen Cart is how poorly it keeps context, so adding more and more pages for people to jump through adds to the problem.

Additionally, ZC has massive performance problems due to it’s lack of image compression. This should take care of that with GD.

The fix involves a few customizations of the core Zen Cart admin files, as well as using well-made existing tools to clean up the UI.

Things you will need:

  1. Text editor that doesn’t suck. (Notepad++ is my favorite.)
  2. FTP client that doesn’t suck.
  3. Access to the database (we’ll be improving it)
  4. A decent merge tool, like Beyond Compare. They’ll let you use if for free for a while. You don’t have to buy it.
  5. jQuery (if you don’t know what this is, stop reading this tutorial. you are not worthy)
  6. Uploadify (this is the main upload tool we’ll be using)
  7. GD2 installed on your web server.

Step 1. Update the DB

Login to your db and add a new table for images. To keep naming consistent with other tables in the schema, call it products_images. We’ll be using this table to store our images.

CREATE TABLE `products_images` (
`products_images_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`products_id` int(10) unsigned NOT NULL,
`products_image` varchar(128) COLLATE latin1_general_ci NOT NULL,
PRIMARY KEY (`products_images_id`)
) ;

Step 2. Get uploadify

Download Uploadify and place it at the root of your ZC install.

Step 3. Update Zen Cart

  1. Change your medium image prefix to  “_m” to be consistent with the thumbnail created by this mod. Why? Because I like it that way. If you don’t, you can run through the code and update all references to “_m” with your preferred image suffix. I think my way is easier. (Admin->Configuration->Images)
  2. Download the installation package.
  3. Follow the installation instructions in README.txt

Step 4. Configure Product-Images

I have no clue what thumbnail or product image sizes you use. I’ve made some guesses at a couple useful sizes. But you don’t like that, go ahead and open up /uploadify/uploadify.php, and change the constants at the beginning of the file.

Step 5. Update Existing Images

If you’re like most people, you’re finding these problems (crappy performance, slow load times, no control over multiple images) after running your store for a while. So as an added bonus, I’ve added a quick-and-dirty script to create thumbnails of your existing images. It’s nothing glamorous, and you’ll probably have to run this script 20 or more times to update all your images. The script is called products_images.php, and it goes in the root directory of your store. Just hit it with a browser a few times. It will spit out the details as it creates thumbnails. It will probably time out a after 30 seconds, after which you’ll have to hit it again.

* CAVEAT – if you are dumb, and keep all sorts of illegal characters in your image file names, this script will not help you.

That’s basically it. If you have questions, or want to pay me to do this for you, shoot me an email.