header image
Home arrow Blog arrow IT Blog arrow Zen-Cart Image Management
Zen-Cart Image Management PDF Print E-mail
Written by Bill Parker   
Nov 23, 2007 at 11:17 AM

When adding products to your Zen-Cart catalog you have the option to
reference or upload an image.  Zen-Cart will automatically resize this
image depending on the display that requires it.  A sidebox for new
products or featured products will require a small image (default
height of 80) while a product display page will require a medium sized
image (default height of 120) and finally you have the option to click
on an image in the product display page to view a large photo.

When adding an image to a product you can either reference an existing
file on the server or upload an image.  The file path references the
/images/ directory by default and will upload new images to this
location.  At this point you can leave good enough alone and allow
Zen-Cart to manage your images sizes for you.  By default Zen-Cart
will include size attributes in the <src img> tags so they will
display properly in all their locations.  When doing this clients are
still required to download the full size image then the browser
resizes it when rendering the page.  This can be extremely painful in
terms of bandwidth utilization if you have a typical homepage that is
full of products (example: <a
href=http://www.Warclick.com>www.Warclick.com</a>.

A better way to manage your images and keep you site lean and mean is
to make three versions of each image.  This will allow clients to
download a small 2-4K image for thumbnails instead of a full size
80-300K image then resize it.  Zen-Cart has this functionality built
in however you will need to do some extra preparation to use it.
There are two directories in the images directory named Medium and
Large and if you save your images with _MED and _LRG in these folders
respectively Zen-Cart will display these alternate version for you
automatically.  The result will need to look like this:

Example file name for this case will be xep_hairy.jpg
Your small image with height of 80 would be located at the root of
your images folder:
http://www.xekoshop.com/images/xep_hairy.jpg
Your medium image with height of 120 would be located in the medium folder:
http://www.xekoshop.com/images/medium/xep_hairy_MED.jpg
Finally your large image with native height would be located in the
Large folder:
http://www.xekoshop.com/images/large/xep_hairy_LRG.jpg

Last Updated ( Nov 23, 2007 at 12:30 PM )