RSS

Additional images – Using Different Images for a Product

Wed, Mar 17, 2010

Zencart

There are probably various occasions when you want to display multiple images for a product. For example, a zoomin of a specific product detail like the neck-line of a dress or to provide several views (plan, elevation, etc) of a machine. Refer to the following screen shot to get an idea of how different images for a single product can be displayed.

Before you add any additional images to your product, you need to understand how Zen Cart recognizes and handles additional images for a product.

Understanding How Additional Images are Recognized

Zen Cart uses a base name to distinguish the main picture of a product from other additional pictures of the same product. For example, the main picture of a laptop will usually be the front view. The side and back views might make up the other pictures for the laptop. In this case, the image names could be named as follows:

laptop.jpg
laptop_backview.jpg
laptop_sideview.jpg

Typically, an underscore is used to represent additional product images linked to a base name. You could easily have used “laptopa.jpg”, “laptop123.jpg”, “laptoplaptop.jpg”, etc. However, the latter naming schemes are difficult to comprehend and can lead to a maintenance nightmare if you have many products using images with similar names.

For simplicity’s sake, we shall assume that all additional product images referred to in this book use the underscore as the separator to distinguish them from the base name of the product’s main picture. Thus, from the list of sample laptop pictures listed above, the base picture is the one without an underscore (i.e. laptop.jpg). The base picture is usually uploaded when you create a new product in the Admin Console. For the other pictures, they will need to be manually sent to the server via FTP

Adding Additional Images to a Product

Before you can show additional images for your products, you need to enable this feature for your particular product type:

1. Click on Catalog > Product Types to access the Product Types screen.
2. Choose the product type for which you want to have multiple images displayed and click on the edit layout
button on the side-panel.
3. Make sure that the Show Product Additional Images field is enabled.

To add an additional image to a product:

1. Make sure your additional image contains an underscore (i.e. “_”) after the base name of the main product image you have already uploaded. For example, if a product’s main image is “aaa.jpg”, then the base name is simply “aaa”. A possible name for the product’s additional image might be “aaa_side.jpg”. Recall that the underscore is the naming convention we are using for this book to identify the additional images of a product.

2. Upload the additional image via FTP to the same directory where the base product image is located on the server.

To change the layout for the additional product images of a product:

1. Click on Configuration > Images to access the Images screen

2. Specify the required value in the Product Info – Number of Additional Images per Row field.

Incoming search terms for the article:

Related Posts

,

This post was written by:

Kent - who has written 699 posts on Delighted Stupid Wind | Empire Illusion.

Working in the English Search Engine industry, focusing on the new media and new economy, Trying to find out a way for e-commerce integration!

Contact the author

2 Comments For This Post

  1. Jerryactric John Says:

    hey man great post, if you get more than 500 hits per day, maybe we can link to each other or something, drop me an email.

  2. Irma Skarda Says:

    Awesome article.Much thanks again. Much obliged.

Leave a Reply