As well as using the product image dialogue in the Product Editor to upload a single product image at a time, it is possible to upload a batch of images via SFTP, and then use the Import/Export Center to assign each image to the correct product.
The Knowledge Base article Connecting to a website using SFTP explains the process of using SFTP to upload files, such as a batch of images, to the store's server. And the Knowledge Base article Import / Export Center, explains the options and features of the Import/Export Center.
Uploading Product Images via SFTP
caution
The files that power the Modular Merchant shopping cart software will be visible when logged in by SFTP. The shopping cart software files are owned by the SFTP user account, which means it is possible to overwrite core files by uploading files with the same names.
Overwriting any of the shopping cart's files (especially those that begin with the prefix "ad_") will result in degraded performance of the shopping cart software.
The exception is the following two locations, which contain customizable images and templates. Uploading custom files, such as images and templates, into the following locations is okay, and should not interfere with the software's functionality:
If the store is installed in the /httpdocs/ directory:
/httpdocs/images/
/httpdocs/template_packages/
If the store is installed in a subdirectory, such as: /httpdocs/store/
/httpdocs/store/images/
/httpdocs/store/template_packages/
In order for uploaded product images to work correctly, the images should be uploaded to the store's /images/default/ directory.
example
If the store is installed in the /httpdocs/ directory:
/httpdocs/images/default/
If the store is installed in a subdirectory, such as: /httpdocs/store/
/httpdocs/store/images/default/
When using the product image upload dialogue in the Product Editor, it is only necessary to upload the large version of the product image, and the shopping cart software will automatically create medium, small, and basket thumbnail versions of the image. However, when product images are directly uploaded to the store via SFTP, the shopping cart software will not automatically create the thumbnail versions. Instead, each thumbnail version must be manually created, and the thumbnails must then be uploaded to the correct directory.
The thumbnail images might be created by resizing the default image, using an image editor such as Photoshop. Each version of the image will need to have the same name, so the versions would need to be saved in different folders on the source computer.
example
The batch of product images to upload contains the following three large images, stored in the uploads folder on the source computer:
uploads/diagram1.jpg
uploads/diagram2.jpg
uploads/diagram3.jpg
The medium thumbnails have been created by using Photoshop to resize each large image to 300 pixels wide. The medium thumbnails are stored in the thumb_m folder, inside the uploads folder, on the source computer.
uploads/thumb_m/diagram1.jpg
uploads/thumb_m/diagram2.jpg
uploads/thumb_m/diagram3.jpg
The small thumbnails have been created by using Photoshop to resize each large image to 150 pixels wide. The small thumbnails are stored in the thumb_s folder, inside the uploads folder, on the source computer.
uploads/thumb_s/diagram1.jpg
uploads/thumb_s/diagram2.jpg
uploads/thumb_s/diagram3.jpg
The basket thumbnails have been created by using Photoshop to resize each large image to 50 pixels wide. The basket thumbnails are stored in the thumb_b folder, inside the uploads folder, on the source computer.
uploads/thumb_b/diagram1.jpg
uploads/thumb_b/diagram2.jpg
uploads/thumb_b/diagram3.jpg
Including thumbnails and large images, the full batch of product images to upload consists of the following folders and files on the source computer:
uploads/diagram1.jpg
uploads/diagram2.jpg
uploads/diagram3.jpg
uploads/thumb_m/diagram1.jpg
uploads/thumb_m/diagram2.jpg
uploads/thumb_m/diagram3.jpg
uploads/thumb_s/diagram1.jpg
uploads/thumb_s/diagram2.jpg
uploads/thumb_s/diagram3.jpg
uploads/thumb_b/diagram1.jpg
uploads/thumb_b/diagram2.jpg
uploads/thumb_b/diagram3.jpg
To upload the batch of images, including thumbnail versions, upload the files for the large image to the store's /images/default/ directory. Upload the medium thumbnails to the store's /images/default/thumb_m/ directory. Upload the small thumbnails to the store's /images/default/thumb_s/ directory. And upload the basket thumbnails to the store's /images/default/thumb_b/ directory.
example
The large images, stored in the uploads folder on the source computer, should be uploaded to the store's /images/default/ directory:
Files on source computer |
Target location in store's SFTP connection |
uploads/diagram1.jpg
uploads/diagram2.jpg
uploads/diagram3.jpg |
If the store is installed in the /httpdocs/ directory:
/httpdocs/images/default/
If the store is installed in a subdirectory, such as: /httpdocs/store/
/httpdocs/store/images/default/ |
The medium thumbnails, stored in the thumb_m folder inside the uploads folder on the source computer, should be uploaded to the store's /images/default/thumb_m/ directory:
Files on source computer |
Target location in store's SFTP connection |
uploads/thumb_m/diagram1.jpg
uploads/thumb_m/diagram2.jpg
uploads/thumb_m/diagram3.jpg |
If the store is installed in the /httpdocs/ directory:
/httpdocs/images/default/thumb_m/
If the store is installed in a subdirectory, such as: /httpdocs/store/
/httpdocs/store/images/default/thumb_m/ |
The small thumbnails, stored in the thumb_s folder inside the uploads folder on the source computer, should be uploaded to the store's /images/default/thumb_s/ directory:
Files on source computer |
Target location in store's SFTP connection |
uploads/thumb_s/diagram1.jpg
uploads/thumb_s/diagram2.jpg
uploads/thumb_s/diagram3.jpg |
If the store is installed in the /httpdocs/ directory:
/httpdocs/images/default/thumb_s/
If the store is installed in a subdirectory, such as: /httpdocs/store/
/httpdocs/store/images/default/thumb_s/ |
The basket thumbnails, stored in the thumb_b folder inside the uploads folder on the source computer, should be uploaded to the store's /images/default/thumb_b/ directory:
Files on source computer |
Target location in store's SFTP connection |
uploads/thumb_b/diagram1.jpg
uploads/thumb_b/diagram2.jpg
uploads/thumb_b/diagram3.jpg |
If the store is installed in the /httpdocs/ directory:
/httpdocs/images/default/thumb_b/
If the store is installed in a subdirectory, such as: /httpdocs/store/
/httpdocs/store/images/default/thumb_b/ |
In this example, simply upload the entire contents of the source computer's uploads file to the store's /images/default/ directory. Since the thumbnails in this example are saved in folders on the source computer that correspond to the thumbnail directories within the store's /images/default/ directory, the thumbnail images will automatically be uploaded to the correct thumbnail directory.
Files on source computer |
Target location in store's SFTP connection |
uploads/diagram1.jpg
uploads/diagram2.jpg
uploads/diagram3.jpg
uploads/thumb_m/diagram1.jpg
uploads/thumb_m/diagram2.jpg
uploads/thumb_m/diagram3.jpg
uploads/thumb_s/diagram1.jpg
uploads/thumb_s/diagram2.jpg
uploads/thumb_s/diagram3.jpg
uploads/thumb_b/diagram1.jpg
uploads/thumb_b/diagram2.jpg
uploads/thumb_b/diagram3.jpg |
If the store is installed in the /httpdocs/ directory:
/httpdocs/images/default/
If the store is installed in a subdirectory, such as: /httpdocs/store/
/httpdocs/store/images/default/ |
The entire batch of product images and thumbnail versions has been uploaded to the store via SFTP, the next step is to assign each product image to the correct product.
Assigning Product Images via the Import/Export Center
Using the Import/Export Center, located at [Admin > Import/Export Center], it is possible to download a spreadsheet listing all current products.
In the Select Desired Action section of the Import/Export Center, select export products and then click Continue... The page will reload with additional options. In this situation, the recommended options in the Data Export Preferences section would be as follows:
Data delimiter tab
Data format CONDENSED: single row for each item
Translate SID numbers No
Truncate State ISOs No
After filling out the Data Export Preferences settings as desired, proceed to the Select the fields to include in the export file... section. Click the green checkmark at the right of the field selection menu twice (once to select all fields, and again to unselect all fields). Scroll down the list of product fields and select only the following: Image Caption, Image Display Order, Image SID, Image URL, Name, and SID. Then click the Save Preferences AND Export Products button at the bottom right of the page. An "Opening product_(yyyy-mm-dd).txt" popup window will open. Choose to save the file.
The saved file may then be opened as a spreadsheet, using a program such as Excel. The spreadsheet will contain a row for every product. Simply go through the list of products and type in the image name and path in the Image URL column. To assign multiple images to a single product, enter the images as a semi-colon separated list.
tip: remove unnecessary rows
When assigning product images to products in this way, the shopping cart software will create a new product image record for each image listed in the spreadsheet.
If an image was already assigned to a product before exporting the spreadsheet, then when the spreadsheet is imported, the shopping cart software will keep the existing product image record for that product, and will also create a new product image record using the same image. As a result, on the product detail page in the storefront, the product will suddenly have two of the same image displayed.
In order to avoid duplicate images, delete any rows that correspond to products that are not having new product images assigned.
For instance, if the store contains 200 products, but only 50 products will have new images assigned in this way, that leaves 150 products that are not having new product images assigned. The export spreadsheet will contain 201 rows (the header row plus 200 product rows). The 150 rows corresponding to products that are not having new images assigned should be deleted. Then, after images have been assigned to the desired 50 products, the updated spreadsheet will contain 51 rows (the header row plus 50 product rows). The updated spreadsheet will then be saved and imported.
example
In the first part of this article, the images diagram1.jpg, diagram2.jpg, and diagram3.jpg were uploaded to the store's /images/default/ directory:
/images/default/diagram1.jpg
/images/default/diagram2.jpg
/images/default/diagram3.jpg
The image diagram1.jpg will be assigned to product SID 123, and the images diagram2.jpg and diagram3.jpg will both be assigned to product SID 456. The images will be added to the product spreadsheet as follows:
SID |
Name |
Image URL |
101 |
Paint Set |
images/default/illustration.jpg |
123 |
Model Car |
images/default/diagram1.jpg |
456 |
Model Train |
images/default/diagram2.jpg;images/default/diagram3.jpg |
508 |
Model Airplane |
images/default/img001.gif |
Note that in the import spreadsheet, the image URL does not include the leading slash (it is written images/default/ instead of /images/default/). The rows that correspond to products that are not being updated with new images should be deleted before the spreadsheet is saved and imported.
When the spreadsheet has been updated and saved, go back to the Import/Export Center in the store's admin area, and this time change the dropdown options to import products, then click the Start over button. The screen will refresh with import options instead of the export preferences. Click the Continue button. At the next screen, click the Browse button, locate the updated spreadsheet file, then click the Upload & Scan Data File button. A popup should open briefly as the file is scanned, then close. The main window should advance to step 3 of the import process, with a notice indicating the file is ready to be imported. Click the Import Data File button. The file should now be imported, updating the product records with the appropriate images.
Notice that the import spreadsheet only lists the large version of each product image. It is not necessary to manually assign the thumbnail images -- the shopping cart software will automatically locate the correct thumbnail for each image, by using the file from the thumbnail directory that has the same name as the large image. |