The 2.3 version of osCommerce which is due to be released sometime this week now has support for multiple images within the core. This does away with the need to add in an extra contribution to make your products more attractive to potential buyers.
The new system for adding product images looks like this (admin > categories.php > add new product);
You can plainly see that you will need a “main image” which is to be the dimensions that you set for the “small image width” and “small image height” (admin > configuration > images). This “main image” is used throughout the osCommerce pages and infoboxes etc (eg, new products for month, bestsellers, products_new and so on).
So, how to add extra images?
It’s pretty simple, just click the +Add Large Image link. I have placed a large arrow by it in this image;
Once clicked, this brings up a new entry in the product adding screen, like this;
In here, you can select the image to be shown. Would suggest to keep these images to a manageable size (say about 6 inches by 6 inches). In addition, you can also insert HTML;
What this will do is show the image you select in the gallery view, and the HTML in the popup. In the image above, the HTML is for a Youtube Video. Nice.
How does it look in use
The thumbnails are auto-created by the gallery script. When you hover over these, the larger image above changes. When you click the larger image, you get a popup which opens the image at it’s proper size. Here’s a video;
Re-Ordering the Images
You can also re-order the images, using the tiny “arrow” button, click on this and hold it to drag the box to it’s new position. Then save your changes and refresh your product page, and your images/videos are in their new positions! Excellent!
Removing Extra Images
To remove an extra image, just click the tiny “trash” button and confirm. Then save your changes.
This is a really nice addition to osCommerce that any shop owner should be very pleased with! Nice work Harald & osCommerce Team!
1 small change to make it look better; stylesheet.css, add;
#piGal ul li {
margin-right: 5px;
}
You might also need to increase the width of the container in the product_info.php from 300 to say 325 or so.
What I would also like to do is have the fancybox activate if the tiny images are clicked. So, hover as is (changes to the large image above), but if clicked then also fancybox. Will try to find a solution for that 😉
Hi,
I’m trying to achieve that same look with no luck, seems my pop up images are big but are popping up much smaller when clicked on, I’m such a newbie, is there anywhere I can get step by step instructions on how to create that same look?
Please help me if you can
Thank you,
Kelly
Kelly – this is standard in osc 2.3 and 2.3.1 – so if you use the latest version of oscommerce you should have no problem.
Hi Gary,
How can I change the size of the big images that are shown in the product_info.php?
Greetings,
Frank
Never mind, I figured it out.
product_info.php
$(‘#piGal ul’).bxGallery({
maxwidth: 300,
maxheight: 300,
Thanks for your site!!
Frank
Hi Gary,
Just wondering if you figured out how to load your fancybox by clicking on the thumbnail product image instead of the enlarged version. I too would like this functionality.
I never did – other things took priority. I still intend to, sometime.
Thanks Gary – too bad. I have been poring over all my fancybox and piGal files, but can’t figure it out. If you do hear of a way, please post it! Thank you very much for your efforts – your information has been very helpful!
It is fancy, but I fail to understand it. Previously we uploaded a large image and a thumbnailer mod gave us a small one with no effort on our part. Now we have to create all the small images and upload them AND upload a large image if needed.
If we change the max width and max height settings, does this just scal ethe image or actually produce a thumbnail of smaller size in bytes?
The thumbnail is a scaled down version using js, so it looks good. It is relatively simple to strip out if you do not like it.
I have fiddled with this for awhile now. Yes it looks good, yes it is nice, but I have gotten frustrated. Sorry to vent on your blog.
After lots of trial and error, I now see how most of this works. One last bump in my road. I used easy pop to stock my new site. Had to reload all small images again. Is there a way to bulk load the large images?
EP is not built for 2.3.1, as the larger product images now have their own database table. EP would need to be recoded.
Oh, I used this today
http://addons.oscommerce.com/info/7725
Version 2.76i updated to work with osCommerce v2.3.1.
We all know how contributions go. Some are well written and others are not.
Half a recode is better than none, I suppose. I see no mention of TABLE_PRODUCTS_IMAGES in the EP file, so multiple image support for core is not included in that EP rewrite by the look of it.
Hello Gary,
How would I set each picture so that it’s scaled down to a uniform size? The pictures are being loaded onto the product listing site as their base size (which is too big).
Will I have to manually change all of the image sizes?
Should be scaled down automatically by the bxgallery script. I have seen some issues with corrupt images.
I have used a new install of osc 2.3 with a database from 2.2 which I have running, the product info images were coming up full size so I have a main image and 1 large image which solves that problem but now the image is not aligning right correctly, it doesn’t sit under the price and therefore looks odd – anyone any ideas how to solve this? It is aligned right in product_info.php This is a link to show you what I mean http://www.webbeginnings.co.uk/catalog/product_info.php?cPath=90&products_id=351
Thanks
Play with the css for #piGal. If that does not work, recode the product_info page to use grids in that area. Covered grid layouts during November and December in the blog…
Would like to see some good stuff in your site, have a look at http://vimeo.com/8619844 for an example of what you could do.
I have been playing around trying to find a way to add more then 24 images which I found to be the limit. It will let me enter them but will not save or display more then 24 thumbnails on the product info page here is an example
http://source1global.com/backup/product_info.php?products_id=29
I would like to have 60 pictures instead of the 24 allowed. Any help would be greatly appreciated.
Thanks
Hi – there should be no limit to how many images you can have. The 24 images you presently have are all there, just that the thumbnails are not showing. Why that is, I could not say without delving into code. Possibly and probably there is not enough space in your design to allow them all to show.
I feel like there must be something limiting it because even when I changed size of the thumbnail container or thumnail themselves only 24 thumbs still show (example 4 rows of 6 or 3 rows of 8) also in the admin side it will allow me to put more then 24 images in but once I save the product and go back and edit it only the first 24 images remain.
Has any one else tried more then 24 images ? and if so does it work for you?
I tried adding more then 24 images to a default version of oscommerce and it still does not allow more then 24 images per product.
Hi Krislyn – I have not tested with loads of images. Cannot see why it would cause issues though, it’s very strange. If you do find a solution, please let us know?
I have installed the EP add-on for 2.3.1 – work well, Only problem is that the large images cannot be modified. All my images are in subdirectories (nice and clean) – when uploading a large image or extra image it uploads to the root image folder – HOW CAN I GET IT TO READ THE LARGE IMAGE STORED IN THE SUBDIRECTORY???
EP? Easy Populate?
You would need to recode portions of the admin/categories.php file to enable product uploads into subdirectories. That’s straightforward, there is an already made addon for that (based on 2.2, but 2.3.1 is very similar to 2.2). For EP, that would be more difficult as that has not been properly updated for 2.3.1
Thank you Gary.
“there is an already made addon for that..” – can you provide a link? I am sure it must be on the oscommerce site but finding the add-on your refering too is a task in itself.
I can’t remember what it’s called. It definitely exists though.
Can someone please explain to me in plain english.. How do I create my easy populate database (I’m running the EP_v2_76i_1_231) to upload the new osc 2.3 mutiply images. I’ve tried everything I can think of ie… v_products_images, v_products_images2, v_products_images_2, v_products_images_large, v_products_images_lrg etc….. I’m so frustrated and searching the web for answers to this and i’m coming up empty handed and bald from pulling my hair out. I don’t have time to individually add more images via the osc 2.3 interface. Which i’ve had to do but now when i update my database the extra images get removed and i’m back to square one. This seems the best place to go for answers and i’m sure answering this will help many others.
Tammy – the EP file would need to be recoded to deal with the new way that 2.3.1 handles images. Expensive!
Hello Gary,
I really appreciate this multiple products images function that you made.
Since I installed my site with the RC2a version a while back, it does not come with it. I had to installed some other contribution that is not as good as yours.
I’ve searched upgrade guides all over for instructions for adding this function but could not find it.
Would you be so kind as to provide a step by step add on instruction?
Please help. It is quite important. Thank you so much for your time…
Hi, I advise to upgrade your shop to 2.3.1. If that is not possible due to cost (or time) constraints, then read this: http://www.clubosc.com/backport-2-3-1-images-to-2-2.html
That is something that I can recreate for your shop at quite a low cost. Email me if interested on oscshops at gmail dot com
Hi,
i’ve tried (almost) everything but what you here discibes is impossible in my shop.
when i upload a big image then he shows the big one instead of the orignal picture. and when i click on it it shows nothing.
I don’t reaaly know what’s wrong. The install is fresh oscommerce 2.3.3
Any idea?
regards, Jan
Hi Jan. If you use the large images functions and you want the main (thumbnail) image to show in the array of large images, then you have to upload the image twice; 1 time as a thumbnail, and 1 time as a large image.