Getting Started

Product Images

This chapter is a walkthrough on how to prepare product images and link them to the products in your products catalog. The entire process of preparing product images consists of the following steps:

Step 1: Prepare product images.
Step 2: Give the correct names to the product images.
Step 3: Put the images to the Web server in the correct directory.
Step 4: Link the images to the products by running the 'Image link' task.
Step 5: Check that the product images are shown in the webshop.

To prepare product images and link them to your products catalog:

Step 1: Prepare product images which will be used in your products catalog. You should create one image for each product and product variant. All images should have a size not less than: width - 432 px and height - 432 px.

Step 2: Give the correct names to the images. The image name format should be exactly as described below:

[Item No] [Separator] [Variant Code] [Separator] [Order number].[Extension]

The examples of the product image names: 1001_1.jpg (with a separator '_') 1001_M_1.jpg (with a variant code 'M')

Step 3: When the images (not less than 432 x 432) per product and product variant are ready with the correct file names, they should be put to the Web server. All product images should be put to the following location of the Sana Commerce frontend directory:

/content/files/images/ProductImages

Step 4: Now you should run the 'Image link' task to resize the images and link them to the products. In the Sana Commerce backoffice click on 'Tools -> Scheduled tasks' and run the 'Image link' task.

When the 'Image link' task is finished you should see the product images in your webshop.

For more information about tasks, see 'Image Link Task' and 'Schedules Tasks'.

Step 5: Open the webshop and check that the product images are shown. The product images should be also shown in the Sana Commerce backoffice product descriptions.

Now the product images are linked to the products catalog and should be available in your webshop.

Below you can read more detailed information about the image link process and conversions which happen with the product images when the 'Image link' task is running.

When you run the 'Image link' task, in the Sana Commerce frontend directory (/content/files/images/ProductImages/), where you put the product images, three more folders are automatically created: 'Small', 'Medium' and 'Large'. The 'Image link' task automatically resizes all your product images from the 'PruductImages' folder and put them according to the size to the 'Small', 'Medium' and 'Large' folders. This is done because product images of three different sizes are used in the Sana Commerce webshop:

• Small images are shown in the image carousel on the product details pages and on all other pages where the product thumbnails are present.
• Medium images are shown on the product details pages.
• Large images are shown when you click on the 'Large image' link on the product details page.

The product images are automatically resized to the sizes which do not exceed:

Therefore, when you prepare the product images you should create only one image of a large size (can be any size not less than 432 x 432) for every single product and product variant and put them to the 'ProductImages' folder. When you run the 'Image link' task the product images are retrieved from the 'ProductImages' folder, resized and distributed according to their sizes among three folders. When the images are resized and placed to the appropriate folders according to their sizes, the images in the 'ProductImages' folder are automatically deleted, if the 'Image link' task has been successfully finished.

If you need to change already existing product image, you should put the new image with the correct product image file name to the 'ProductImages' folder and run the 'Image link' task. The image will be resized and replace the appropriate image with the same name in the 'Small', 'Medium' and 'Large' folders.

If you redesign your webshop the default image sizes can be redefined or if needed you can add other image sizes. This can be done in the 'web.config' files of the Sana Commerce frontend and backoffice. In the 'web.config' files locate the <image-sizes> section and add a line in the following format, where you should specify the image size name (small/ medium/ large or any new), width and height of the images:

<size name="name" width="" height="">