Knowledge Base

Product Images in eTrader

eTrader's Product Image Gallery

Version 3.9 added a product image gallery / carousel / zoom / lightbox feature. The feature uses a few simple operating rules that have implications for how you organise your images in eTrader.

The gallery allows you to display multiple images for each product. It is displayed on the Product Detail page, and makes use of 4 different sizes of image. You configure the 4 image sizes in the site settings page (Back Office->Shop->Settings).

You upload images for a product from the Product Images page which is accessed from the Product table in Back Office -> Products. Once you have uploaded one or more images, you select which image to display in the catalogue in the edit product page.

When you upload a product image, eTrader automatically creates four smaller images to the sizes you have configured and stores them in different folders (with the same filename) for use by the gallery and catalogue:

  • Images
    • Thumbnail (used by standard catalogue and image gallery thumbnail display)
    • Small (used by gallery catalogue)
    • Regular (used in image gallery main display)
    • Large (used in image gallery zoom and lightbox/enlarge features)

You upload images into the root Images directory. The catalogue and image gallery make use of images in the four special folders. The images in these folders must have the same filename as the full-sized images to which they are related.

Smaller images are created automatically to the correct sizes both when you upload a new image, and when you add an existing image from the Images folder to a product.

Tips and tricks

The automatically created thumbnails only work if you are using thumbnails that are a reduced size version of the main image. If you are using a detail from the full image as a thumbnail, you'll need to create and upload them manually.

eTrader's catalogue and product image gallery are designed to display images of standard (configurable) sizes. If you want to display images of different shapes or sizes in the catalogue, consider making them a standard size by adding a transparent background to them.

Remember that you can upload images without any size restriction using the content editor. These images can be freely used in product detail (and any other content) pages.

Hiding the image gallery

Finally, if you don't want to use the image gallery feature, simply hide it using CSS.