How do I add multiple images to a product?

A product owns 1 filename ...

Note: the base image name is the original image name loaded for the product.

The concept of multiple images is best explained using an example: 
From the Admin, you edit a product and specify an image file called:
a_bugs_life.gif 
and put it in the 
/images/dvd
 directory via the drop down.

Now you use your FTP program to upload additional images to /images/dvd

  • a_bugs_life_01.gif
  • a_bugs_life_02.gif
  • a_bugs_life_03.gif
  • a_bugs_life_04.gif


I used the numbers so these would load in order, as the additional images are loaded alpha/numeric.

For the large image (used in popups) I use FTP and upload:

  • /images/large/dvd/a_bugs_life_01_LRG.gif
  • /images/large/dvd/a_bugs_life_02_LRG.gif
  • /images/large/dvd/a_bugs_life_03_LRG.gif
  • /images/large/dvd/a_bugs_life_04_LRG.gif


For the medium image (used as the main image on the product_info page) I upload via FTP:

  • /images/medium/dvd/a_bugs_life_MED.gif


NOTE: There is ONLY ONE ( 1 ) Medium Image used per Product on the Product Info page: (pages named product_info, product_music_info etc.) The naming is related directly to the original image.

Now you do not need to use subdirectories for loading your images.

All images can be loaded to:

  • /images
  • /images/large
  • /images/medium

Suffixes

You can also change the suffix for Large and Medium from _LRG and _MED to something else or to nothing at all.

I use the suffixes so when looking at 2000 images I can tell what size I am really looking at just from the name. (Very handy for troubleshooting whether the right image is being loaded.)

In a future release, this will be more automated with options for auto-generating the thumb and medium based on dpi, height, width and compression ratio
For now, it uses the same directories that the auto-generated would use, but you do the FTP manually for the different sizes and additional images.


Additional information

Note: the base image name is the original image name loaded for the product.

The suffix of _MED and _LRG is optionally defined but very handy for distinguishing image names from a visual standpoint.
The medium images are kept in the/images/medium directory and the large in the /images/large directory

Additional images can be the base name of the original image plus anything after that. For example:

Original Image: fred.jpg

All of these are considered additional images because they contain the base image name PROVIDED you are in the /images directory:

fredabc.jpg
fred_73b2.jpg
fred_01.jpg
fred_02.jpg
freddy.jpg
fredrick.jpg

The advantage of the numbering on the additional images like: _01 _02 _03 is that they will sort in this order when displayed.

These images are places in the same directory as the main image such as /images

The large image match would then go in /images/large or /images/large with the Admin defined suffix added to it of _LRG

fredabc_LRG.jpg
fred_73b2_LRG.jpg
fred_01_LRG.jpg
fred_02_LRG.jpg
freddy_LRG.jpg
fredrick_LRG.jpg


However ... if using SUBDIRECTORIES such as /images/mystuff then you need the underscore ( _ ):

Original Image: fred.jpg

All of these are considered additional images because they contain the base image name PROVIDED you are in the /images/mystuffsubdirectory or/images/dvd or any other subdirectory of /images:

fred_abc.jpg
fred_73b2.jpg
fred_01.jpg
fred_02.jpg
fred_dy.jpg
fred_rick.jpg

The advantage of the numbering on the additional images like: _01 _02 _03 is that they will sort in this order when displayed.

These images are places in the same directory as the main image such as /images/mystuff or /images/dvd 

The large image match would then go in /images/large/mystuff or /images/large/dvd with the Admin defined suffix added to it of _LRG

fred_abc_LRG.jpg
fred_73b2_LRG.jpg
fred_01_LRG.jpg
fred_02_LRG.jpg
fred_dy_LRG.jpg
fred_rick_LRG.jpg

While both methods are available with or without the underscore, it is recommended to utilize the underscore to avoid confusion. This also provides more flexibility on the image names. However, if you prefer to do without, both methods are available.

The use of subdirectories help on speed or directory limits, especially on slower servers or servers with limitations. 

NOTE: not all files show via your FTP program when you get into the 1000s of filenames within a directory.


ANOTHER WAY TO LOOK AT IT ...

1) the thumbnail, which is the smaller image, in the /images/ folder.
2) the "medium" image, which is ONLY used on the Product Info page as the primary product image. And ONLY the first "medium" image is ever used.
3) the "large" images matching the name patterns of all your thumbnails, which if the thumbnail is clicked, will show the large image.

- /images/abcd.jpg -- the thumbnail shown in all the category pages and sideboxes
- /images/medium/abcd_MED.jpg -- the main product image shown on the product page itself
- /images/large/abcd_LRG.jpg -- the large version of the main product image, which is shown if the medium image is clicked

- /images/abcd_1.jpg - extra thumbnail shown only on the bottom of the product page
- /images/large/abcd_1_LRG.jpg - large version of the abcd_1 thumbnail

- /images/abcd_2.jpg - extra thumbnail shown only on the bottom of the product page
- /images/large/abcd_2_LRG.jpg - large version of the abcd_2 thumbnail

- /images/abcd_3.jpg - extra thumbnail shown only on the bottom of the product page
- /images/large/abcd_3_LRG.jpg - large version of the abcd_3 thumbnail



Related topics

a. Attribute images can be added to individual attribute options via Admin -> Catalog -> Option Values
b. You can edit the _MED and _LRG defined suffixes in Admin->Configuration->Images

TIPS

It is wise to NOT use the following symbols in your image filenames: + [ ] $ ' " \ / ()

Also, in case it's not self-evident, the files have to actually exist on your server. So, if you're selecting the "Use an image on the server" instead of uploading a file directly, and things aren't showing up, then that probably means the image file you specified doesn't actually exist on the server. 


If you wish to bypass the multiple image capability, you have two options ... which are explained in this FAQ: 
Turning off Additional Images .
  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

How can I find out what version of Zen Cart or PHP or MySQL I'm using?

To find out what version of Zen Cart or PHP or MySQL you are currently using, you can simply go...

Getting a BLANK PAGE? Here's the answer ...

If you're getting a blank page when trying to browse to a certain page on your store, or after...

What's New in the Upcoming v2.0 release?

Database Abstraction Layer and Sql CacheThe abstraction layer has been re-factored to include a...

Image Preparation - How-to

I've seen several posts where people obviously aren't quite sure about the best way to set up...

Some tips to modify stylesheet

1. Download Web Developer extension for FireFox here2. Install & restart FireFox. You should...