Formatting images for Zen Cart

I found it hard to get my head around how to do this mainly because the Zen Cart documentation on the subject really sux.

Adding images to products is a very standard thing – every product should have at least one image to represent the product. However because the image is displayed in a number of different sizes, you need to provide several different images in the appropriate sizes.

Product images are displayed in 3 forms. Small, Medium & Large. Small images should be no more than 100×80 pixels. Medium images should be no more than 150×120 pixels. Large images can really be any dimensions however for consistency I make them no larger than 500×400 pixels.

The images should be JPG, GIF or PNG.

The best method to upload is via FTP into your /images directory. The Zen Cart admin page can upload images however it’ll only do one and not the 3 formats required. It also won’t do multiple images for a product (on top of the 3 different formats).

When you upload your small image the path should be prefixed with /images. When you upload your medium image the path should be prefixed with /images/medium. When you upload your large image the path should be prefixed with /images/large. Medium and large images should also have _MED and _LRG in their file names.

So, a complete set for the file product.jpg would look like:

/images/product.jpg – 100×80 pixels
/images/medium/product_MED.jpg – 150×120 pixels
/images/large/product_LRG.jpg – 500×400 pixels

Also for reference, categories and manufacturers have their own dimensions. Categories should only have a single image sized to no more than 100×57 pixels. Manufacturers should only have a single image sized to no more than 100×80 pixels (same size as a small product image).

One thought on “Formatting images for Zen Cart

  1. Pingback: The launch of my eBook store | criten.org

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>