We’ve covered uploading multiple categories in wp-e-commerce, but what about images?

Update: If you are using a version of WP-E-Commerce prior to 3.8 then the below should still work. If you are using 3.8 or later, please scroll down to “Version 3.8 +”

It stands to reason that if you are uploading a bunch of products, you will want images to accompany them. This takes a little more work than adding multiple categories, but is significantly easier than adding them one-by-one.

1. Preparing the Images

If you are happy doing bulk resizing/cropping in whichever graphics package you use, then do it! Process your product images so that you have a thumbnail that matches the size defined in your wp-e-commerce installation (96px X 96px is the current default).

Next process your source images again so that you have a large image that is either a manageable size, or sized to your wp-e-commerce product image size settings (128px X 128px is the current default). Once you have thumbnails and full-size images, upload the thumbnails to “wp-content/uploads/wpsc/product_images/thumbnails/” and the full-size to “wp-content/uploads/wpsc/product_images/”. You can now move onto step 2 “Importing”.

If you aren’t happy batch-processing images you can create a directory called “‘wp-content/uploads/wpsc/product_images/temp” and upload all your product images there. Please ensure that the images are at a manageable size (i.e. less than 1000px wide or high).

Next download and save a copy of the “imgprocess.php” script we cobbled together (remove the XXX from the extension) – n.b. this script is largely based on a great function here

Adjust the thumbnail size variables ($thumbwidth and $thumbheight) on lines 3-4 to correspond with the thumbnail sizes specified in wp-e-commerce (default is 96px X 96px). If you want your large images processed as well then add the relevant dimensions to the $largewidth and $largeheight variables on lines 6 and 7. Alternatively, leave them at 0 if you don’t want to resize your large images. Please note that this is a basic script so it only crops images to the exact sizes specified. If you want your large images to be scaled, you will have to add that functionality yourself.

Once you have made your adjustments, upload the script to the root of your WordPress installation (in most cases yoursite.com/imgprocess.php). Please note that this script has not been extensively tested, and you run it very much at your own risk. We highly recommend running it in a test environment first and take no responsibility for anything (from server failure to hives or plagues of locusts) that occurs from the moment you run it!!

If you chose to continue, run the script by entering the location into your browser (in most cases http://www.yoursite.com/imgprocess.php). The script will take a while to execute, but all being well you will see a big ugly message saying “Images processed”. Your thumbnails directory should now be populated with the thumbnails you created.

If you chose not to resize the large images then simply copy the images from “wp-content/uploads/wpsc/product_images/temp” to “wp-content/uploads/wpsc/product_images”. Otherwise, your resized large images should be in wp-content/uploads/wpsc/product_images/’.

Next delete “wp-content/uploads/wpsc/product_images/temp” and delete imgprocess.php.

2. Importing
Open wp-e-commerce/wpsc-admin/includes/settings-pages/import.php
locate the option list:

<option value='name'>Product Name</option>
<option value='description'>Description</option>
...etc

and add the following option value:

<option value='imagename'>Image</option>

Next locate the line

$existing_name = get_product_meta($id, 'url_name');

and add the following above it so it reads:

$image_query = "INSERT INTO `".WPSC_TABLE_PRODUCT_IMAGES."` (product_id,image ) VALUES ('$id','".$cvs_data2['imagename'][$i]."')";
$wpdb->query($image_query);
$imageid = $wpdb->get_var("SELECT LAST_INSERT_ID() as id FROM `".WPSC_TABLE_PRODUCT_IMAGES."`");
//now add image id to product
$image_query2 = "UPDATE `".WPSC_TABLE_PRODUCT_LIST."` SET image = ".$imageid." WHERE id=".$id;
$wpdb->query($image_query2);
$existing_name = get_product_meta($id, 'url_name');

Now add a column to your product list csv that you wish to upload and add the name of each image uploaded to the relevant image
e.g.
SKU, Name, Price, Image
001, Shoe, 100, shoe.jpg
002, Hat, 20, hat.jpg

Upload the csv as normal remembering to assign ‘Image’ to the relevant column, and your products should now be loaded complete with images.

VERSION 3.8 +
Version 3.8 of WP-E-Commerce makes use of the new post-types feature in WordPress. This means we can make use of some core WordPress functions to add our images.

In terms of prepping images, all that’s needed is the full size image this time, no need for a thumbnail. Once the images are ready, FTP them to SITEURL/wp-content/uploads/YEAR/MONTH where year and month are the year and month. So for right now (April 2011), this would be SITEURL/wp-content/uploads/2011/04

Next we can prepare our csv something like this:

SKU, Name, Price, Image
001, Shoe, 100, 2011/04/1.jpg
002, Hat, 20, 2011/04/2.jpg
003, Sock, 23, 2011/04/3.jpg

Take note of the fact that we include the year/month/filename structure in the csv

Now we can update import.php

First we add the option to assign the image name, so locate:

<option value='name'><?php _e('Product Name', 'wpsc'); ?></option>

and then add

<option value='imagename'>Image</option>

Now go to what will be line 162:

wp_set_object_terms( $product_id , array( (int)$_POST['category'] ) , 'wpsc_product_category' );

and add the following directly underneath:

if ( $cvs_data2['imagename'][$i] != '' ){
//need the full location of the file so first we get the upload directory
$upload_dir = wp_upload_dir();
//now build the file location
$filename = $upload_dir['baseurl'] . '/' . trim( $cvs_data2['imagename'][$i] );
//we also need to store just the file location from within the upload directory
$metafilename = trim( $cvs_data2['imagename'][$i] );
//establish filetype
$wp_filetype = wp_check_filetype(basename($filename), null );
//build our attachment array
$attachment = array(
'post_mime_type' => $wp_filetype['type'],
'post_title' => preg_replace('/\.[^.]+$/', '', basename($filename)),
'post_content' => '',
'post_status' => 'inherit'
);
//insert attachment data into WP IMPORTANT - we need to use $metafilename here NOT the filename with the full URL
$attach_id = wp_insert_attachment( $attachment, $metafilename, $product_id );
// you must first include the image.php file
// for the function wp_generate_attachment_metadata() to work
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
//generate metadata
$attach_data = wp_generate_attachment_metadata( $attach_id, $metafilename );
wp_update_attachment_metadata( $attach_id,  $attach_data );
//finished!

}

Now upload your csv via the import section (Settings>Store>Import) and select ‘Image’ for the image name column.
Import, and your products, complete with images, should now be present!