+1-757-461-3022 x124

Uploading and Managing Product Photography for your xTupleCommerce site

Product photos are an essential part of your eCommerce site. They are so important, that I’ve written an article about how to properly take product photos, what equipment to use and strategies for taking as many shots as possible in a day.

But once you have your shots, you’ll be ready to load them into the ERP to be rendered on your xTupleCommerce web portal. Below you will find instructions on how to do that in a variety of ways. You can upload one image at a time, host the images on another web server and point to them from the ERP or do a bulk upload of images using the CSVImp tool that comes with xTuple’s ERP. 

Recommended Sizes and Formats

Before we dive into uploading images to your xTuple ERP, let’s discuss the appropriate image sizes. The information below is for the standard xTupleCommerce theme. 

Notice that on the xTupleCommerce web portal, when you roll over a product image a magnified version of the area you are rolling over appears to the right. By uploading the product photos in this size you will be preparing the site with a thumbnail image, the product image and the magnified image. The system will take your one image file and use it in these three manners.

All Products Page - The space that is available for images is 260 x 135. Images that are larger will be shrunk down to fit in this area and stay in proportion to the original size.

Individual Product Page - The space that is available for images is 360 x 360. However, larger images can be used. If the product image is larger than 360 x 360, when the user rolls over the image with their cursor, a magnifying glass will zoom into the area that the cursor is over. 

Recommended Product Image Size - The best product images are in ratio to 237x125. This size is a perfect fit for the Products page. If you increase this to be a perfect fit for the indivdual Product page, the size would be 360 x 190. Personally, I'd recommend making all your images 1000 wide x 528 tall. 1000x1000 is the maximum I’d recommend. 

Compressing Photos

To optimize the loading of product photos you want to use compressed JPEGs. When photos come out of your camera, they are usually several megabytes (MB) in size. If these large images are used, it’ll slow down the loading of your Products page. Your images must be compressed for the web. When I say compressed, I mean you should use software to alter your JPEGs into 72 DPI images that are updated to a specific resolution and have compressed colors. Your goal is to  compress each file size down to less than 100k if you can. But, having outstanding photos trumps file size. You do not want pixelated photos. If your photos include a wide range of colors it may be difficult to compress them to less than 100kb without losing quality. It’s a fine balance.

To compress your photos you can use one of these software packages:

Photoshop - This is the industry standard for editing photographs and preparing them for use in print, web and broadcast media. It can be a costly option compared to the other options below, but it is worth considering if you are going to take your product photography and your website photography seriously. Click here to learn more about Photoshop. 

JPEGMini - This software is specifically built for compressing JPEGs and prepping them for the web. It’s known to compress images even better than Photoshop as the loss of quality is minimal and the file sizes are smaller. Click here to learn more about JPEGMini.  

Cloudinary - Cloudinary’s main purpose is to host photos and media on the web that will be used on other websites. One of the great features that they offer is JPEG compression within their hosting software. Not only can you compress images but you can apply effects like adding rounded corners, adjusting color saturation and adding filters. In my opinion, it’s a great service and I recommend it to customers often when they can use a free account. A free account will allow you to host up to 10 gigs of media, which is enough for thousands of compressed images. The paid accounts are not worth the money for most xTupleCommerce customers unless they are using Cloudinary for more than simple image hosting, image compression or need to host more. Click here to learn more about Cloudinary.  

Adding Images to the ERP

Now that your images are ready for your xTupleCommerce site, let’s get them uploaded. To get the product photos onto your web portal you must load the images into the Documents tab of the product’s Item Master window. There are three ways to do that and we’ll go into detail about each below.

Caution - Image file names cannot have special characters or spaces in them (e.g., #, @, &, etc.). These will cause the image to not load properly.

Adding a photo via a File from your machine

  • In the ERP, open your products Item Master window
  • Navigate to the Documents  tab.
  • Click ATTACH.
  • Leave the first drop-down menu as Related To.
  • In the second drop-down, select the File option.
  • Give the document a name - this should describe what is in the photo and should be unique
  • Click the [...] button.
  • Navigate to the image and click OPEN.
  • Ensure “Save to Database” is checked.
  • Check the “Public can Access File” checkbox.
  • Click SAVE.

This will save the photo file to the ERP. Once the window closes you will see a new row added to the table of Documents. The row you just added will have black text. You may see other rows in that field that are green. The green colored rows are images or PDFs that are published on the web portal. 

To publish the recently uploaded image to the website, use the following steps: 

  • Click on the newly created row for the new image.
  • Click EDIT.
  • In the new window, check the Publish URL on Parent Resource checkbox.
  • If you like, you can change the Weight of the photo (more on Image Weights below).
  • Click SAVE.
  • A new window will appear that says “Sending test request to URL”.
  • Click OK.

The image should now appear on the Product page of the published product.

Note: A second window may appear that references the SSL Certificate. This often happens on dev and stage sites that do not have SSL certificates yet. It’s simply stating that this could be a bad idea if it’s a production site. It’s safe to click “Yes” and move on if you see this window.

Adding a Photo via a Web URL

If your product image is located at a publicly accessible web URL, you can use it to upload the image to the web portal as well. 

To attach a URL, here are the steps you need to follow:

  • In the ERP, open your products Item Master window
  • Navigate to the Documents tab.
  • Click ATTACH.
  • Leave the first drop-down menu as “Related To”.
  • In the second drop-down, select the “Web Site” option.
  • Give the document a name - this should describe what is in the photo and should be unique.
  • Paste the URL (where the file is accessible) into the URL field.
  • Check the Publish URL on parent resource checkbox.
  • If you like, you can change the Weight of the photo (more on Image Weights below).
  • Click SAVE.
  • A new window will appear that says “Sending test request to URL”. 
  • Click OK.

The image should now appear on the individual Product page of the published product.

Bulk Loading Images into the ERP from your machine

If you have a lot of product photos on your local machine, you can bulk load those images onto the ERP database and automate the process of enabling those photos for the web portal.

Before doing this, you should have some familiarity with CSV Importing into the ERP. You can learn more about the CSVimp tool by reading the article: Data Importl Tool (CSVimp).  This article will give you some insight about how data is pushed into the ERP via a CSV import.

Additionally have created two files that will make this easier for you. You can download those two files and read the instructions about how to use them below.

First, download a ZIP file including the Image Import Atlas XML. Then, download this xTupleCommerce Photo Upload CSV Template. 

Once you’ve downloaded these two files you are ready to begin preparing your data for import.

Preparing the CSV with photo data

The first thing you need to do is prep the CSV file with your product image information. Open that CSV file in Excel and let’s look at the data. You’ll see that there are  7 columns of data. They are:
  • target code - This is the SKU of the product of which you are associating the image.
  • target type - The type of source associated with the image. In this case, "I" for "Item".
  • title - The title that you want associated with the image in the Documents tab.
  • file location-url - This is the full path to the file including the file name and extension.
  • file mime type - The mime and file type - typically a png, jpg or jpeg. Match the extension of the file.
  • published - TRUE or FALSE. If True, the image will be published on the website. If False, it will not.
  • weight - The number you enter in this column will control the sequence of the product photos. Weights are explained later in this article.

Your first goal is to represent each product photo with one row in this table. Using the definitions above, fill in each of the cells of each row for each image. Once your data is ready in the CSV, save the file and close it. You are ready to import the data into the ERP.

Importing the CSV Data into the ERP

Now that your data is ready, you are ready to import it into your ERP using the following steps:

  • Log into your xTuple ERP.
  • Go to System > Utilities > Maintain CSV Atlases. This where you will import the XML file that you downloaded. 
  • Click the folder icon to open a file.
  • Navigate to the XML file you just downloaded and select it.
  • Click OPEN.
  • You’ll find that the CSV Tool is also open in a separate window (usually behind the Atlas window).
  • Check the “Treat first row as headers” checkbox.
  • Click File > Open then navigate to the CSV file that you prepared.
  • Go to Import > Start. This may take a few seconds.
  • The system will notify you once the imports are complete,
  • Then you can close these windows and to open one of the product’s Item Masters window to check the Documents tab for the photos.

If your CSV had marked the photos to be published once added and the product has been published to the web, then the photos will appear immediately on the web portal.

Understanding Image Weights

You will likely want to control the order of the photos that appear on a Product page. For instance, imagine that you have a product that requires 10 photos to show all the details of the product. Once you’ve uploaded all 10 images to the ERP, the web portal will simply display them on the Product page in which ever order they were uploaded. However, that may not be acceptable. A customer expects to see an overall shot then multiple subsequent detail shots as thumbnails. To control the order of which photo will be displayed first through the last image, you must alter the image weight.

If you click the Image Weight drop down when editing a published image, you’ll see that the numbers range from -500 to 500. The lowest number represents the first image shown on the website and the image shown on the All Products page. The highest number represents the last image shown. So, if you have 10 images, you could control their sequence by setting 

  • Image 01 to -5
  • Image 02 to -4
  • Image 03 to -3 
  • and so on. 

Another option is:

  • Image 01 at 0 (the default)
  • Image 02 to 01
  • Image 03 to 02
  • etc.

This number is not exclusive—more than one document may share the same weight. Any photos sharing a weight will simply show up in an order defined by the system. 

I would not be surprised if you are confused by reading this. This is actually a common methodology in content management systems (CMS) on the web, but it’s much easier to learn how it works by using the tool rather than reading about it.  I recommend that you log into your ERP and test this out. Make some adjustments, test out the results and continue to tweak to get the sequence of your images matching your desires.

64 users have voted.