This blog post is appropriate for SuiteCommerce and all versions of SuiteCommerce Advanced.
Our favorite SuiteCommerce solutions consultant is back again with another useful tidbit for all SuiteCommerce and SuiteCommerce Advanced sites. This time, Mike Lynch is broaching the typically manual process of renaming your product images to fit your site's naming convention. There is still some manual work you'll need to do, but his suggestion will help cut that down and also help reduce the likelihood of mistakes. I'll let him take it from here.
For most customers who publish their products on SuiteCommerce, they are receiving their product information — content, pricing and imagery — from their suppliers in whatever format those suppliers choose to export from their own systems.
This is OK for all the product data, but the images need to be named according to your existing SuiteCommerce configuration which can mean a lot of manual renaming work.
By the same token, a new SuiteCommerce customer faces the prospect of establishing a naming convention for images and, as above, manually renaming all their images to be uploaded to the NetSuite file cabinet.
Outlined below is a handy method of getting all your images named correctly so they can be uploaded to NetSuite and automatically associated with your items.
Step 1: Standardize Image Sizes
This might already have taken place, but if you're receiving images of all different dimensions from your suppliers, it's a good time to get them all into standard sizing so they show up nicely in a grid on the SuiteCommerce product list pages. The best way to do this is to make them all the same height at the very least, and if possible both the height and width to be the same for all images.
You can check the dimensions of images in the Setup > SuiteCommerce Advanced > Setup Website, then edit your website and go to the Advanced tab. In the Image Resizing section, you can see the size that the server uses for thumbnails, main images, zoom images, fullscreen, etc, where the fullscreen size is best to use as this is the maximum zoomed size of the images on your PDP.
On this page you can also see the Images Folder, which is the location in the file cabinet where your product images live. Since we're doing a bulk upload, we'll be using the Advanced Add feature built into NetSuite to upload a zip file of all our images once we've named them correctly.
Also note that the naming convention for the images is also set here. In my example I'm using a field called Image Code as my file identifier, and a period (
.) character to separate the categories or matrix options in the file names.
So, for example, if my Image Code field held a value of ABCD1234, and if I was dealing with a matrix item that was the color green, then my image would need to be named ABCD1234.media.Green.01.jpg.These might be different depending on your site settings, so double check before moving.
Here's a screenshot of my demo settings:
For my site, I have resized all of my images so that they have a maximum height of 1200px — you can do this manually, or there are a number of applications that can do this for you.
Step 2: Item Import CSV
With your naming convention and images prepared, we need to move onto how we're going to generate the correct file names for the images.
The next logical place to go in regard to your image names is to gather up all your image identifiers (eg SKU numbers) in your item import CSV file. This gives us a column that we can use to rename our files based on the image identifier, along with any matrix values that we want to use for naming in the process.
See my example CSV file, items-CSV.csv, or the example below:
I've included matrix color options for some but not all of my items — we'll look at this in more detail shortly, but what I want to do is create a process that will rename my image files and take into account the matrix color if one exists.
Step 3: Gather Your Image Files
Next, we want to get all of our image files in one place. These may have been provided to you in a zip file from your supplier, from a download, or directly via FTP.
For now, put them all into a folder that we will use as a working directory, eg:
After this, we want to get a nice orderly list of all the image file names in this folder.
Step 4: Get the Image List
My example only has eight images, but most of the time you'll be doing this with tens or hundreds of images at a time, so we want something that will scale for the scenario.
So, let's get a list of images. To do this, we need to go to the command line and move change directory to the folder location. For example:
cd C:\Documents and Settings\mike\documents\ItemImages
You should obviously change the path depending on your setup.
When you're in this directory, you'll need to export a list of the file names to a text file. Therefore, run the following commands:
dir /b > myimagelist.txt
ls > myimagelist.txt
In each scenario,
ls will list the contents of the directory, and the commands afterwards will save that to a file.
Using my example images, my myimagelist.txt file contains:
fancy camera with lens 01.jpeg
From here, we can begin to prepare for the final outputted images.
Create a directory called renamed — this is where our final images will end up.
Step 5: Create Copy Commands in Spreadsheet
The trick is going to be that we're going to copy the image files from the source directory into our newly created renamed directory. In the process of copying the files, we're going to rename them based on the data in the CSV file. To do that, we need to generate the correct commands for each one, and, for that, we're going to head back to our spreadsheet.
It sounds difficult, but it's actually pretty simple:
- Create a copy of your item import CSV file and open it up in your chosen spreadsheet application
- Add a new column called something like ImageFile
- Add another column called CopyCommand
Open the text file and paste in the list of file names into the ImageFile column. Note that this assumes that your import sheet rows are in the same order — if they're not, you'll need to sort them correctly beforehand.
Now for the magic!
Put one of the following formulas into cell K2, assuming that this the first cell in the CopyCommand column:
="copy """&J2&""" renamed\"&D2&".media"&IF(LEN(I2)>0,"."&I2,"")&".01.jpg &^"
="cp """&J2&""" renamed/"&D2&".media"&IF(LEN(I2)>0,"."&I2,"")&".01.jpg &&"
After hitting Enter, it should return something like this:
copy "1920px-1980_-_VAZ_2101.JPG" renamed\LVAZ2101.media.01.jpg &^
cp "1920px-1980_-_VAZ_2101.JPG" renamed/LVAZ2101.media.01.jpg &&
Let's take a look at the transformation that's happened here:
- The quote marks mean we want to print a string, which we do with
cp, which are the commands to copy a file in each of the environments
- In the case where we want to include quote marks in our output, we've put three in a row — this will catch scenarios where file names contain spaces
- We have &J2&, which grabs the file name from the previous column
- There's then three more quotation marks to close it out
renamed/ part is the path of the new directory
&D2&".media" grabs the value from the ImageCode column and appends
.media to the end
- We then check for a possible matrix option, and include it, if it exists, with
- Lastly, we append a numerator and a file extension, followed by a command to run another command with ".01.jpg &^" — this means we'll chain the commands together and run them all at once
Drag the corner of the cell into the remaining cells in this column to generate the rest of the commands.
Step 6: Run the Commands
Highlight the entire CopyCommand column (except for the header text) and copy it. In your command line window, paste it in but before you hit Enter, make sure you remove the final
&^, as we want the command sequence to end after the final command in the chain. If you're using a version of Windows prior to 10, you might need to select the paste command in the top left corner of the command prompt window.
Hit Enter and it should go through each one, creating copies of the images in the destination folder.
All the images should have be in the renamed directory with the correct file names.
Step 7: Zip and Upload Your Images
Select all of your images in your new folder and compress them to a zip file (eg Send To > Compressed (zipped) folder in Windows). Head back to the file cabinet in NetSuite and go to Web Site Hosting Files > Live Hosting Files > Images. Click Advanced Add and begin the process to import the images.
Once it completes, look up one of your products in NetSuite that you uploaded images for, you should see your new image in the Associated Images tab:
And if you check on the frontend by visiting a PDP, you can also see that it has taken effect:
And who said spreadsheets couldn't be fun?
I have attached a Mac version and a Windows version of the spreadsheet, which you can use to follow along step by step, if you like. They should work in Microsoft Excel, Google Sheets, and OpenOffice Calc.
You can take these spreadsheets and extend them for extra use cases, such as multiple images per item, additional matrix options, and trimming other unimportant data from image file names.