Horrible or Awesome #2 - Thumbnail Images
Why would you want to speed up load times for slow connections, or make your pictures look better? Good looking images are the sign of professionalism and class, and you surely don't want your site to have either of those.
Sure, successful shop owners say better images sell more products, but you don't have to listen to those people. After all, what does a successful shop owner know that you don't?
Never mind that image contributions like the excellent On The Fly Auto Thumbnailer or the UltraPics contribution actually decrease your workload while producing better images. Keep posting your 800k images to your site, and laugh at those people who talk about "Site optimization" and "load times". You think jagged images are nice, and that's just fine with me.
How does that grab you - if you are running standard osCommerce, maybe with a template - I can almost guarantee that you have not truly considered YOUR CUSTOMERS satisfaction. Read on…
Thumbnail contributions are the bee's knees. They rock, and you are going to love them. They improve load times, they make your images look better, and a site with thumbnails projects an overall more professional appearance to the customer than one with browser-resized images.
There are quite a few thumbnail contributions out there. Some allow you to upload small, medium and large pictures, some allow additional product images to go along with your main image, and some automatically resize large images into multiple sizes using image libraries like GD, GD2 or ImageMagick installed on your server (contact your host to see which you have). The point is, you can get an image contribution that will work with your hosting plan even if you don't have the advanced image library features.
A couple I have checked out and liked (I am sure there are more):
UltraPics: Allows multiple images, multiple file sizes, optional automatic resize using php libraries.
On the Fly Auto Thumbnailer: Simple, automatic thumbnail generation for your single product image. Not as much cool added stuff like multiple images, but easier to install. Requires GD2 or ImageMagick libraries to function.
Most of this post is courtesy of my good friend Jason over at JC Commerce.
What I usually do for my clients is amend a couple of files, like this;
- admin/categories.php - in here I add calls to "large_product_image". I usually just copy "products_image".
- I then add an extra row in the database to deal with this.
- A couple of language changes to make the customer aware that "products_image" is now a thumbnail, and "large_products_image" is now used for a larger image only in the image pop-up.
- Change 1 line of code in "popup_image.php" to check whether a large image exists and show it. if it doesn't exist, then show the thumbnail.
All of that is maybe 5 minutes work and is less complicated in my opinion than adding other contributions. Here is one I made earlier which you can drop in on an unmodified store…
As you can see, it just adds another browse button. And then does the rest of the processing when you "update" the product. Easy as 123.
I tried the thumbnail and my pop-ups show as thumbnails. I use .gif for small images and .jpg for large images.
Comment by Rudy — February 27, 2008 @ 3:44 pm
Rudy -
1. make sure you did run the SQL (I guess you did as you would have received lots of errors when inputting or editing your product).
2. make sure you did upload the replacement popup_image.php
3. make sure that your product does have TWO images when you add or edit it.
Comment by Gary — February 27, 2008 @ 3:50 pm
The change in the sql did not take place;
Error
SQL query:
ALTER TABLE `products` ADD `large_products_image` VARCHAR( 64 ) AFTER `products_image`
MySQL said: Documentation
#1060 - Duplicate column name 'large_products_image'
Comment by Rudy — February 27, 2008 @ 4:12 pm
So that means you already have a column called "large_products_image". Did you try a different small/large image contribution? Is this a leftover from some previous code you tried?
Comment by Gary — February 27, 2008 @ 4:15 pm
I think I did a multiple image pack that did not work before. If you can tell me which table to remove. I can do it.
Comment by Rudy — February 27, 2008 @ 4:18 pm
I would like to have this work and also have two or three thumbnail in the product_info page.
Comment by Rudy — February 27, 2008 @ 4:19 pm
You might want to backup your whole database before playing with it…
ALTER TABLE `products` DROP `large_products_image`;
After this, run the SQL in the contribution, then you will need to go to your Admin area and add a large image to a product. And then see if you see the large image in the popup in the product_info.php page.
Comment by Gary — February 27, 2008 @ 4:22 pm
I have multiple backups thanks.
Comment by Rudy — February 27, 2008 @ 4:23 pm
It worked thanks. About the multiple thumbnails in product_info, can you help?
Comment by Rudy — February 27, 2008 @ 4:35 pm
Rudy - glad you got it working
For multiple images in product_info.php it's basically a case of looking at admin/categories.php and copying the code base for "products_image" and make it "products_image_two", "products_image_three" and so on - and then make sure to add the corresponding columns in the database. Then call the extra images in the SQL on product_info.php and if the result is NOT NULL, show the image. It's not complicated…
Comment by Gary — February 27, 2008 @ 4:53 pm
Many thanks for this.
Comment by Guilherme Thofehrn — March 6, 2008 @ 3:14 pm
Guilherme - you are very welcome.
Comment by Gary — March 6, 2008 @ 3:23 pm
I would like to try lightbox and still keep my better quality thumbnail. Can you please help me configure this to point to the large image instead of the thumbnail?
Thanks much,
Rudy
Comment by Rudy — March 20, 2008 @ 4:54 pm
I haven't used lightbox recently. I am pretty sure there is a contribution which uses lightbox and 2 sizes of image.
Comment by Gary — March 20, 2008 @ 5:34 pm
Hi there, first of all I wanna thank you for all your work in this blog and in the official OSC forum.
I'm getting desperated to find a way to have the this thumbnail issue solved.
I am a completely newbie in OSC world and I am not very familiar with PHP or MySql.
Can you please help me?
Thank you in advance!
Comment by Moleiro — April 7, 2008 @ 7:38 pm
Moleiro - no problem - if you are unsure how to add a multiple images modification (here's the easy on I made), send me an email to oscshops AT gmail DOT com and I can add it for you at low cost. Thanks, Gary
Comment by Gary — April 7, 2008 @ 9:20 pm
Thank's again!
Just sent you an email a few seconds ago.
Comment by Moleiro — April 7, 2008 @ 9:54 pm
You have mail
Comment by Gary — April 8, 2008 @ 9:05 am
Will this work for all existing images in a store? Or just new ones? Suggestion on a contribution for one that will work for existing images if this one doesn't work?
Comment by Chris — April 18, 2008 @ 9:15 pm
Hiya Chris - yes. My one [ http://addons.oscommerce.com/info/5777 ] will work with less changes than most others. The reason for this is that I used the "product_image" for the thumbnail, and "large_products_image" in the pop-up. Doing it this way affects less files so is much easier to get working.
Obviously once installed, you then need to make a larger image for each product, but as I recall, if there is no larger image, the pop-up will still show the usual small image.
Cheers, Gary
Comment by Gary — April 18, 2008 @ 9:20 pm
[…] All about thumbnail images! and my solution… […]
Pingback by Club osCommerce » Various Reader Questions; thumbanil, vouchers v2, ms2 — May 16, 2008 @ 9:22 am
Hey there. i installed your contribution, looks AWSOME and was super easy to add to my highly modified site. Anyways, i just want to clarify, this is NOT an automatic thumbnailer correct?? It doesnt re-size the images for you, it just puts the script in place to add a smaller image to the product listing or description and pops up to the larger one, correct??
I just want to be sure, because an automatic thumbnailer would be AWESOME
Comment by lindsayanng — September 25, 2008 @ 1:37 am
Linds - this requires you to make two sizes of image, which is (in my opinion) better than an auto-thumbnailer. Different images can be used etc
Comment by Gary — September 25, 2008 @ 7:55 am
I agree. I just wanted to make sure. You can create an autocommand on photoshop where you open as many files as you want, select all and use the command to create a predeteremined size for your thumbnails and there you have it.. 523 QUALITY thumbnails in the blink on an eye..
thanks
Comment by Lindsayanng — September 25, 2008 @ 2:54 pm
Hi there,
I installed your thumbnail contrib too and it looks great. Thanks for
suggesting it! The only thing is, I had to comment out the two
"hide session id" codes or it gave me a fatal error instead of a
catalog page. Will that affect
anything? Sorry if that's a stupid question… I feel like I should
know what a bloody session id is!
It seems to be working great.
Cheers,
Nicole
Comment by steelsomething — September 27, 2008 @ 7:03 pm
Nicole - you most likely have an older version of oscommerce - nothing to worry about. Gary
Comment by Gary — September 29, 2008 @ 8:00 am
Hi,
Install your thumbnail/large image cont and get the following error
1054 - Unknown column 'p.large_products_image' in 'field list'
select p.products_id, pd.products_name, p.products_quantity, p.products_image, p.large_products_image, p.products_price, p.products_date_added, p.products_last_modified, p.products_date_available, p.products_status from products p, products_description pd, products_to_categories p2c where p.products_id = pd.products_id and pd.language_id = '1' and p.products_id = p2c.products_id and p2c.categories_id = '0' order by pd.products_name
[TEP STOP]
Any clues, thanks / Ian
Comment by Ian Milne — October 1, 2008 @ 3:51 am
Ian - you have not run the SQL file using phpmyadmin.
Comment by Gary — October 1, 2008 @ 10:07 am
First thing I did was run the sql file using phpmyadmin.
It added large_products_image after product_image with all the same attributes in table called products. I exited phpmyadmin and replaced the relevant oscommerce files.
Is there another step in creating this mysql entry that I'm not doing?
Comment by Ian Milne — October 2, 2008 @ 1:04 am
Progress… the database that my ISP has phpmyadmin linked to is not my actual working database… it looks like my orginal osCommerce database with lots of junk entries. I discovered this by looking at the data… It has the same name but…
Yet another call to my hosting service… They moved my website to a new server and so far I cannot find a way to change any of this…
Will update when I get this resolved.
Comment by Ian Milne — October 2, 2008 @ 5:29 am
Problem was just as I suspected, now its working and I have a great addition to our website.
Comment by Ian Milne — October 3, 2008 @ 3:54 am
Nice one! Gary
Comment by Gary — October 3, 2008 @ 9:58 am