General

Product Images Management

Product Image Filename
At first, you should give the correct names to each name of the image. The filename format should be the following:
[Item No]_ [Variant Code] _[Order number].[Extension] 

Item No	is a required field and should match the item no. used in NAV.
Variant Code	is an optional field and when used, it must match the variant code in NAV. It can be only the vertical variant code when the Fashion add-on is used.
Order number	is a required field and is used to support multiple images for the same item. Also when there is only one image available for a product this field should be in the filename with the value '1'. The second image will have order number '2', and so on.
Extension	is the extension of a file; supported extensions are: JPG and GIF.

Here are the examples of the product image names: 1001_1.jpg, 1001_M_1.jpg (with variant code 'M').

Product Image Size
Product images should be supplied in different sizes: Small, Medium and Large. The small image is displayed on the 'Shop Main' page, 'Product Bulk' page and in the image carousel. The medium image is displayed as the product picture on the 'Product details' page and the large image is displayed when the 'Large image' link is selected. Each size is stored in a different folder, so you must prepare three images of each size for every single product. The following table shows the sizes for each type of the image.

Size Requirements: 

	Width	Height
Small	64 px	64 px
Medium	278 px	278 px
Large	432 px	432 px

Product Image File Location
Images should be stored in the appropriate folders relative to their size. These folders are present in the 'Starter Site' folder.
 Small images are stored in '/content/images/ProductImages/Small'.
Medium images are stored in '/content/images/ProductImages/Medium'.
Large images are stored in '/content/images/ProductImages/Large'.
Images are stored on the web server, you need to transfer them using FTP.

Link Product Images to the Products (Automatically)
After images are transferred to the web server they are not available online immediately. Please read the version specific notes below for a detailed explanation:

Tasks in the task scheduler can be scheduled for a fixed time of a day or as an interval (run every X seconds). When it's configured like that, it will run automatically.  For more information please see the chapters about image link task configuration and task scheduler configuration.

Link Product Images to the Products (Manually)
When the 'ImageLink' process is not scheduled as mentioned in the note above, it can be started manually directly from the backoffice.
During this process, the task reads the product image information from the file system, stores this file information in the Sana Commerce SQL database and links it to the corresponding product automatically.

To open the tasks menu:  start the backoffice, type 'tasks.aspx' at the end of the URL in the address bar of the browser and click 'Enter', for example:  'http://[BACKOFFICE_SITE]/tasks.aspx'.


ImageLink Task in the Tasks List

Click the 'Start' button to start the ImageLink process manually.  Check the status of the process in the 'Status' column.
The status of the process changes to 'Started'.  Click the 'Refresh' button and when the status states 'Finished', this means that the ImageLink process was finished successfully without errors. 
If the Status is 'Failed' this means that the task was aborted (by clicking the 'Abort' button) or has finished with errors.  Check the related log files to find the reason of the error.  Run the 'ImageLink' process again afterwards.

View the Available Images
The available images will be shown in the Sana Commerce backoffice when you edit a product (for more information about the Sana Commerce backoffice please read this section):

 
Product Images in the Sana Commerce Backoffice 

Place an Image to the Content
It is also possible to add an image to the content of a product.  Open the Sana Commerce backoffice and open a product in the catalog. Click the   button to open the HTML view. Enter here the following code:
<img alt="" src="/content/images/filename.jpg" />