User GuideGetting Started

Getting Started

Sana Commerce 8.3
Your provider

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]

Image file name parts Description
Item No. This is a required value and should match the item number used in Microsoft Dynamics NAV/AX.
Separator This a character which is used to separate the product image name values in the image file name. Default value: '_'
Variant Code This is an optional value and should be specified for product variant images if such are present. If this is an image for a product variant, in the image file name you should also specify the item variant code used in Microsoft Dynamics NAV/AX.
In Microsoft Dynamics NAV item variant code can be seen in the 'Item Variants' table.
If you use NAV Connector with the Fashion add-on, the item variant code must match the vertical item variant code in Microsoft Dynamics NAV.
In Microsoft Dynamics AX product variant ID cannot be seen directly in the AX table but only in the system table in the Application Object Tree. For more information on where the product variants IDs are stored in AX, see 'Product Variants IDs'.
Order number This is a required value which is used to add multiple images to the product. When you need to add only one image you should still use '1' as an order number in the product image name. If more images should be added the second image should have the order number '2', and so on.
Extension This is the extension of a product image file. Supported extensions are: JPG, JPEG and GIF.

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:


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:

64 px
64 px
278 px
278 px
432 px
432 px

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="">
User GuideGetting Started