Zen Cart and the art of Image Handling

Welcome to my first Zen Cart article. In this post I’ll try to explain how to manage images in Zen cart and a few tricks I have learned along the way.

By default, Zen Cart displays images in 3 sizes: small thumbnails for the product listing pages, medium for the Product Info page and large, used when the user clicks on the “View Image” link in the product description.

When the user uploads a picture to Zen Cart in the administration interface Zen Cart processes that image when a given page is displayed (Scaling it to the appropriate size for the differnt views).

The problem here is that, out of the box, Zen Cart does not calculates new sizes for the pictures. If the user uploads, for instance, a 400px wide picture, Zen Cart will display it at a smaller size by using the dimensions attribute of the HTML code. In other words, the program will still upload and display a 400px wide picture but at a smaller size. The problem here is that a 400px wide picture displayed at 100px will still take the same amount of time to download and display as the larger image, making the page slower to load. In the list of product or any page where there are more than a couple of pictures this can considerably slow the speed of the page.

The solution is to upload 3 different images for each size. Zen Cart is designed to recognize pictures in its folders that have an extension attached to it to identify their size.
Let’s say that your image name is “productpic.jpg”. We will need to process this image in 3 different sizes.
In Photoshop take the large image generated by your digital camera (NOTE: always take your pictures at the highest resolution possible: it’s easier to take pixels away than to create new ones) and create a small thumbnail with either the width or the height that you had chosen in the Zen Cart image handling dialog, for this purpose we’ll say 100px wide .
(to set the thumbnail size go to: admin site > Configuration [drop down menu] > Images [third from the top] > Small Image Width or Small Image Height) Upload that thumbnail to Zen Cart as you normally would:
Admin > catalog > categories/products > category > product and now your product has a high quality, small thumbnail that will load very fast in list view. With Photoshop or many other (and cheaper) graphic programs you can even batch process your images to create thumbnails in a much faster fashion. I’ll publish a future tutorial on this topic.

For your medium and large pictures, whose size you can set in the Administration dialogs, you can repeat the same process, but instead of uploading the pictures using the Zen Cart administration interface you simply FTP them to their directories making sure to add an extension at the end that will tell Zen Cart that the pictures belong to a certain product but they are a different size. Zen Cart will know to display them in the appropriate pages.

This is how it works:

We have uploaded a thumbnail called “productpic.jpg” at a 100px size.
Now, go back to Photoshop and take the original picture (high res) again. This time make its size 300px (or the size of your medium picture, set at to use as a medium picture always make sure the size is correctly set up in the admin panel).
To set the medium picturesize: admin site > Configuration > Images > Product Info – Image Width (or image height)
Once the new picture is ready, keep the filename the same but add at the end _MED, like this: “productpic_MED.jpg” and upload it to the same folder where the original thumbnail is.

When Zen Cart sees that the picture exist in the directory it will display it instead of taking the thumbnail and resize it to 300px wide. This will create a much better picture without overtaxing your user’s loading times since it will be displayed only when they request to see that product page. Remember that while sizing down a large picture usually will result in very good quality, the reverse is never true.

Do the same for the large pictures. The filename will change to “productpic_LRG.jpg”
Zen Cart will even allow you to define your own _MED and _LRG extensions in the admin interface. I often use just _m and _l and it works just as well.

There are other tricks you should know as well. For instance, it will be unlikely you’ll have all your pictures in a landscape or portrait mode. That means that some pictures will be taller than wider and vice versa. Zen Cart really doesn’t care about that, but your image processing software does. One solution is to crop all your images square, but a better and less labor intensive solution is to separate the portrait and landscape pictures in different folders and to create 2 different batch scripts, one for each. Photoshop CS2 even has a scripting utility (beside the “Actions” palette) that should be able to handle that as well (I have yet to try it), and there are plenty of PHP scripts that handle the process quite well.
Again, I’ll be happy to publish a step by step tutorial in a future article.

Installing a better image handling system

The solution I like best involves installing a Zen Cart contribution called Image Handler 2.0. While its installation it’s not very complicated it’s not for the fainthearted. You should at least have a vague idea of how to use FTP, PHP and the Zen Cart file system. However, once installed it allows you to upload a single large image and have all three sizes created on the fly as needed. No messing around with Photoshop or with multiple uploads. One other great feature is the ability to apply a “watermark” with your logo and a copyright notice on every image. The only drawback I can see is that apparently it creates the images “as needed”, meaning rignt before they are displayed. While this is faster than downloading large images as thumnails, it does put a load on your server.
I use Image Handler2 myself and I am very impressed with it. I am even thinking of creating a template installation for Zen Cart that already has the image handler installed. I’ll keep you posted

I hope this article gave you some idea of the possibilities. For more detail there is a very nice article called Image Management for Dummies (I really dislike that name) that goes in more detail. It’s available here.
For more articles like this, please check out my site at conticreative.com
Thank you for reading so far and feel free to let me know how I can improve this article.

About these ads

11 responses to “Zen Cart and the art of Image Handling

  1. This is a great article. I loaded up a few products and was like “dayamn, 455KB for a thumbnail image!”

    But I figured it out and wahla.

    Thanks

  2. Great article. I myself use Image Handler as well.
    My store is with downloadable products and grows and grows in inventory. Adjusting every picture in an editor would take to much time. It’s ok if you have just a couple of products.
    I’m also very pleased with Image Handler.

  3. Hi

    great post

    I’ll try IH2 in the next few minutes

    hope it work fine for me

    Im hosted in dreamhost and have zencart 1.3.7

  4. Great article! Just getting to grips with zen cart. It’s snippets of information like this that make life so much easier! Thank you!

  5. I see the smiley face ‘g.gif’ top right corner on the page. Is that for your hit counter? lol

  6. This didn’t work for me. What it ended up doing was when you click on the thumbnail. It would then show 3 thumbnails on the next page. One would open small, the next would open medium and the one at the bottom would open large. Am I missing something?

  7. IH does create the thumbnails when requested, but it has a very good cache system. It stores every image it creates on a folder (/bmz_cache) and the second time (and consecutives) an image is requested it is not created again, it is just retreived from the cache folder .

  8. Great article..
    Thanks :)

  9. an online shop with zen cart, it sells LED Strip, flexible LED Strip, LED Power Supply, LED RGB controller, LED RGB Amplifier,LED dimmer,LED Strip Light,etc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s