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!
Hi,
I really appreciate your tutorials on adding images using a CSV file via E-commerce. One of the newer E-commerce versions has changed its ‘import.php’ file and now the code that I insert into the file doesn’t work. I’m currently using e-commerce version 3.8.
Thanks
Hi Brandon,
Thanks for raising my attention to this, and glad the old code served its purpose as well. I’ve updated the post with code for 3.8 – check out the section titled ‘VERSION 3.8 +’ above.
Let me know how you go!
Matt,
Awesome work on the updates! I think it’s really close but I am having one problem… I’ve uploaded a test csv file with 3 products and 3 pictures. It seems that the first picture on the list uploaded and works well on the product page. However, the second and third images aren’t looking so good. They come out really large on the product list and then when you click to enlarge them, they open an identical page to the one they were just opened up from. I’m not sure if that makes sense, but you can see it in action here on my test page:
http://www.lightningclassic.com/?wpsc_product_category=1967-1969
All three images were nearly the same size so I don’t think it’s size related.
I’m also not sure if it’s related or not, but I see in your notes in the code, you say, “// you must first include the image.php file.” Unfortunately, I searched and couldn’t come up with an image.php file in 3.8. Would I need to get that file somewhere else? Well, thanks again!
Hi Brandon,
Apologies for the slow response, the email regarding your commented got spammed.
You can ignore the comment regarding image.php, its being called in:
require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);
I see from your image directory that only 1 image got resized as a thumbnail:
http://www.lightningclassic.com/wp-content/uploads/2011/04/
Did the upload time out at any point?
I would delete the images via Media>Library and delete the products you added as well (remember to permanently delete)
Then try the process again. If that doesnt work, let me know and I will take a look.
Also, just a thought, but maybe the capital letters in the image filename are causing problems? Perhaps try with different filenames – e.g. 1049.jpg, 1049a.jpg, 1049b.jpg
Matt,
Ok, I tried everything I can think of… I deleted all the images from the media library and FTP, I deleted all products and tried renaming the images and choosing different images, and nothing’s worked so far. Right now I’m using images with no letters. Like you said, it’s just that first image that gets resized as a thumbnail for some reason. I’ve even changed out which image I enter first and it’s whatever image I choose to be the top image on the csv file that gets resized. Any other ideas?
Thanks again
Hi Brandon,
I’ve tested this again locally using very large images and its fine.
I’m going to set up a test install on my server and see if that works.
I suspect the script is timing out. Take a look at these suggestions and see if they help maybe? – http://nick-hoffman.blogspot.com/2009/09/importing-large-wordpress-blogs.html
I’ll comment again when I’ve tested on my server
Hi Brandon,
It worked on my server as well: http://haycroftmedia.co.za/wordpressdemo/?page_id=3
I think it must be timing out for you?
Out of interest, what sizes are your thumbnails set at?
Hey Matt,
Ok, I’m an idiot. My problem was that I didn’t upload any thumbnails. I was thinking that since your instructions said in the beginning to scroll down to “version 3.8″, I could skip the whole “Preparing the images” section you have so I just uploaded the full size images. I’ll try the imgprocess.php script and make some thumbnails and let you know how it goes. You rock! Thanks for the help.
Well, forget all that last comment I just left. I thought you were asking what size my thumbnails are, because you were saying that I should’ve uploaded some. But I re-read your instructions again and see that I didn’t need to upload thumbnails.
On another note, I found my problem… If there is a space at the end of the image reference on the csv file, it doesn’t create a thumbnail. It still shows a full size image, but for some reason it won’t create a thumbnail because of a space. So, I think it should run alright now. Again, thank you for all of the help!
Hi Brandon,
1. You don’t need to make thumbnails (apologies for the confusion). I haven’t looked at the wp_insert_attachment function closely though, so as a last resort it might be possible to generate your own thumbails, rename them as IMAGENAME-WxH.EXT and upload them as well, and then run the script, but not sure about that? (n.b. for a jpeg image called hat where your thumbnail sizes are defined as 96px in width and height, you would create a thumbnail of the same size and rename as hat-96×96.jpg
2. As the above (1) is sketchy at best, I’m glad you spotted the problem – leaving a space is pretty likely to be the cause of the error. Let me know if you are successful (fingers crossed), and thanks for persevering.
Cheers
Matt
Hi Brandon,
While testing some new code, I realised that if a user doesnt upload image, the code will still run creating a bunch of broken links to images that aren’t there.
To avoid this I put the code inside an IF statement (see above for the updated code)
I added
if ( $cvs_data2['imagename'][$i] != ” ){
before the code that processes the images
and
}
at the end.
Hi, Matt. I’ve been playing with this script and I’m having problems with the thumbnails, too. I installed a fresh version of WP 3.1.1 and the latest WP E-Commerce plugin ) 3.8.1. The only difference in my installation is that I chose not to organize my media by month/day. The products import correctly and attach the image but the thumbnails are not created during the import and no attachment metadata are created either. Do you have any ideas how to fix this?
By the way, I’ve confirmed that the image file name does not have any spaces after it as Brandon mentioned.
Thanks!
kcm
Nevermind, Matt. I figured it out. The issue is that wp_insert_attachment requires the full path to the image, not just the filename and in your code $metafilename only contains the file name. I changed this on line 7 above:
$metafilename = $cvs_data2['imagename'][$i];
To this:
$metafilename = $upload_dir['path'] . ‘/’ . $cvs_data2['imagename'][$i];
And it started creating thumbnails for me. Thanks for a great post. It was very helpful.
Hi Kevin,
When I used the full image path with wp_insert_attachment it didn’t work for me, but I was letting WP organise my media for me, hence the storing of the full path and the relative path.
From what you say it would seem that the full path is required when organising your own media. Thanks for letting me know.
Hi Brandon,
I’ve updated the code again to include php’s trim function – this removes any whitespace at the end of a filename so even if you were to upload a csv with spaces after the filename, it should now remove them. Thanks for letting me know, it should lead to the code being even easier to apply for the next person!
Matt,
Wow! That’s great news. It’s been tough trying to go through my csv files and make sure the spaces are out of every single item, because somehow importing these lists to csv naturally created spaces for me. Thank you!
Worked great, doing your multiple category thing now too. I notice mine will time out if i try to do more than 100 at a time.
THANKSSS FOR THISSS
How would i modify this for the 3.8+ wp-ecommerce version where lets say i have all the images in the directory /wp-content/themes/twentyten/images/supplier/ instead of by the month and year format?
i think i figured this out… thanks again man for all your help! and useful articles!!!
Hi Gavin,
for time outs you could look at increasing server memory limit (not an expert on servers etc, so may be wrong):
add something like this to wp-config.php:
define(‘WP_MEMORY_LIMIT’, ’96M’);
For custom directory structure on images, take a look at Kevin McGillivray’s comment (but it seems you’re sorted now?)
thumbnails import separated from images in >=3.8.xxx?
“In terms of prepping images, all that’s needed is the full size image this time, no need for a thumbnail”
But I want to prepare my thumbnails, without background, etc etc, and keeping those different from the big image.
Is it possible?
Pardon, why my comment/question has been deleted? Without any answer? Am I asking something I shouldn’t?
Anyway, I’ll try again, maybe it has been a mistake.
Your piece of code works really great to me. But I need to upload thumbnails different from original image they link to.
Why? Because my client likes the idea to have subjects with transparent background (png) thumbnails, and jpg original big images.
You can see it at http://www.outletlesposedimilano.it/
Do you think you will help me?
Thank you so much.
heyciao.
Hi heyciao,
Your comment wasn’t deleted, it just doesnt show on the site until its been approved, and I’ve been busy on a project so have taken a while to tend to my own site.
In order to have different thumbnails you would need to save your thumbnails as:
IMAGENAME-WxH.EXT
IMAGENAME – this must be the same name as the full-size image
W = thumbnail width (as per your WPEC settings)
H = thumbnail height (as per your WPEC settings)
EXT = image type (e.g. jpg or gif) – this must be the same as the full-size image.
So using my example above, I load 3 products:
001, Shoe, 100, 2011/04/1.jpg
002, Hat, 20, 2011/04/2.jpg
003, Sock, 23, 2011/04/3.jpg
My thumbnail width is set to 96px and height 55px.
So I would:
1. prepare my images and their thumbnails.
2. upload 1.jpg, 2.jpg and 3.jpg via FTP, then run the import
3. Having done this, I can now see that 1-96×55.jpg, 2-96×55.jpg and 3-96×55.jpg have been auto-created by the wp_insert_attachment function, I would simply FTP my custom-thumbnails (that have the same names) overwriting the auto-generated images that are already there.
Hope that works for you!
Yeah, thank you, pushing at was not in my intention.
Well, “EXT = image type (e.g. jpg or gif) – this must be the same as the full-size image.” was the question.
I want png thumbnails and jpeg big images. But I will solve it filtering the final output and str_replacing the EXT.
A smarter question is how to “toggle/set this image as product thumbnail”.
Have you any idea on how to use set_post_thumbnail function correctly, in addition to your piece of code?
While googling couple of days for import with images, I found just a few resources.
Your code is the best, also coming from a simple and correct idea: let’s do just as wp would do. You can do it because you are confident with that code.
And it is available, free of charge.
Others wanna be paid, and, as far as I could know, they found you, did not tell anybody, wrote down a plugin to sell, $9 minimum price. And what we have is almost the same we get here, the big is done.
You should really find the time to complete your import with the wp “Media options” functionality and packing a plugin.
Free coupon to me for motivational training.
Good job, and thank you for all.
heyciao
Hi heyciao,
why not use .png for both? (but yes, filtering output is fine otherwise), or am I misunderstanding the question?
as far as I know the WordPress post_thumbnail functions just extends the attachments you already have so all images would still need to all be in the same format.
you still get a free coupon though
Matt,
How do we make it work if we want to import html for the description? Say something like: Test Product
table – tr – td – test product /td – /tr – /table
Hi Rich,
Remove the esc_attr function from the import script for whichever field you are adding the HTML to. For example if there’s HTML in the content and additional description fields:
line 126 and 127:
‘content’ => esc_attr( $cvs_data2['description'][$i] ),
‘additional_description’ => esc_attr(
$cvs_data2['additional_description'][$i] ),
change to
‘content’ => $cvs_data2['description'][$i],
‘additional_description’ => $cvs_data2['additional_description'][$i],
Bear in mind that the esc_attr function Encodes <> & ” ‘so should you have ampersand, double quote or single quote in the content for that field, it could break the import.
Hey Matt, Firstly i wanna thank you for this excellent information,
Just a lil query , i have the image files as links in the csv. when i try to uplad them . .they don’t import images . .does that mean i need to strictly import the images in the 2011/07[cos it's 7 now] directory and then update the links wid /2011/07/imagename.jpg?
Hi Rishav,
Yes, you need to import the images to the relevant directory and add 2011/07/imagename.jpg (unless you do this on Monday, in which case its 2011/08/imagename.jpg
)
Haha thank you for the prompt response Matt,
I’m personally gonna do everything to spread the word abt your website. : ]
Hey Matt,
I can now almost successfully mass upload images thanks to you! However, I ran across a small problem.
The images I define in the csv are not set as the product thumbnail by default after upload. I have to go through each product, click Upload Image, and click “Use as Product Thumbnail”. And after I do that, everything looks right on the site but the images in the product list become big (an example: http://i54.tinypic.com/2rxfnfr.png). Can’t seem to figure this out, is this an issue with the theme?
1. Used a small csv sample of 6 products
2. All images are being automatically resized as thumbnails (in 2011/07 folder)
3. I get this PHP Warning now when I goto Product>Images>Product Image Gallery: Warning: array_merge() [function.array-merge]: Argument #1 is not an array in /xx/xx/xx/xx/display-items-functions.php on line 1018
Your help is greatly appreciated
Hello Ross,
Trying to answer what i know.
Q2. Yes automatic thumbnail creation is an added feature in wpec3.8 ..and that just creates a separate file with image-96×96.jpg while the original file is untouched.
Q3.I had a similar problem It’s pretty simple to get rid of that . locate items-functions.php
Find this line of code>
$metadata['sizes'] = array_merge( $generated['sizes'], $metadata['sizes'] );
Replace it with
$metadata['sizes'] = array_merge( (array)$generated['sizes'], (array)$metadata['sizes'] );
And Matt,
, but my product image is not getting displayed withing the respective product description page . The thumbnail is created etc. but no full image display.
Sorry to bother you again
Can you tell me if there’s a line of code to add somewhere that would make it display? : ]
I’ve Noticed the problem is only when we import the product from the [modified]importer.
so i’m assuming there has to be an additional call to the image in the display-items-function.php .
i have to make it work today . .else my client will kill me.
This is the manual upload http://postimage.org/image/uzhjqyhw/
This is the CSV upload without the image. http://postimage.org/image/uzo5wch0/
Can someone help me out with that? it’s really important? :S
@Ross and @Rishav:
I set-up a clean install of WP and wp-e-commerce 3.8.6
I followed the tutorial from ‘VERSION 3.8 +’ onwards
I used images that were 1024px in width and saved them to wp-content/uploads/2011/08/
I attempted to add 3 products
My csv looked like this:
1,Shoe,100,2011/08/1.jpg
2,Hat,20,2011/08/2.jpg
3,Sock,23,2011/08/3.jpg
I updated import.php as instructed
I ran the import
My 3 products loaded correctly with thumbnails that linked to full-size images.
My install of WPEC used whatever the default theme is for WPEC.
Maybe try doing the same. This might help establish whether it an issue with the theme you are using. If not, it might be something to do with your server set-up? Let me know.
N.B. @Rishav, I would recommend that you do not make any changes to WPEC core. I realise that I am contradicting myself as import.php is part of core. However, once your products are imported, it won’t matter if an update to WPEC over-writes your amended import.php file, but any changes you have made to display functions will be overwritten affecting your site layout. If I had a bit more time, I would convert my import script to a plugin and thus avoid over-writing core.
Matt, can you please add code for uploading category if it does not exists. it as hard to enter them manually when you have got more then 500 categories in your product feed
Thank you, very nice blog
Hi Max,
No problem, I will write a new post on importing to new categories as soon as I get a chance.
Off the top of my head, the process would probably involve using the wp_insert_term function (which inserts the category if it doesn’t exist, otherwise does nothing), and the get_term_by function to return the ID of the category. After this has been looped for each category assigned to the product, a category array can be inserted along with the other product data.
Matt,
Can you please confirm that this fix is working with WP E-Commerce Version 3.8.6.1?? I followed your exact instructions but the “image” option is not populating in the appropriate drop down. Bahhh I’m going mad I tell you maddddd. I don’t think it is a caching issue. I took the liberty of reinstalling but it was to no avail. Any help in this matter will be immensely appreciated. Thanks
Hi Rich,
I haven’t tried this with WPEC 3.8.6.1 yet, but I just ran a compare between import.php on the last version and the current one, and they appear to be identical.
Hey Matt,
Just wanted to let you know the error was on my end. For some odd reason my FTP Client wasn’t over riding the necessary import.php file. All good now.
Thank you for your tremendous TUTS. They’re really bad a**!!
Warning: array_merge() [function.array-merge]: Argument #1 is not an array in /home/lsprmos2/public_html/wp-content/plugins/wp-e-commerce/wpsc-admin/includes/display-items-functions.php on line 984
Show
14_5_thumb
This is a message I continually get when trying to upload picture. I am using 3.2.1 wp and 3.8.6.1 wp ecommerce. Help!!!
good morning friend I have a question, I have the wp e-version 3.8.6.1 comecce Wp-e-commerce/wpsc-admin/includes/settings-pages/import.php but the file does not come out all the options told to seek I really need help because I have 3000 products in stock and do not want to walk up through 3000 photo
Hey Rich,
Glad you got it sorted and glad you like the tuts, tell your friends!
Hi Launa,
I need some more detail – when you say ‘when trying to upload picture’ – what are you referring too? My code above for adding images or the in-built functionality for adding images?
I will be releasing my code as a plugin within a week or so (fingers crossed), so maybe that will solve the problem I’ve already used it with 3.8.6.1 and uploaded images without any problems)?
hi Gustavo, I’m not sure I understand your question (sorry)?
This code will be available as a plugin in a week or two, hopefully that will help.
I did everything correctly, but when i go to upload my text product csv files the import button won’t work? When i revert the import.php file back to its original state it works… any thoughts? I really want to add the images!
Thanks,
Jason
Hi Jason,
This is not a problem I’ve ever encountered. Unless its browser related (unlikely, but what browser are you using?), then it sounds like you need to go back over the tutorial again. Alternatively, if you can afford to wait a week or two, I will be releasing this code as a plugin soon.