Horrible or Awesome #2 – Thumbnail Images

By | February 26, 2008

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;

  1. admin/categories.php – in here I add calls to “large_product_image”. I usually just copy “products_image”.
  2. I then add an extra row in the database to deal with this.
  3. 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.
  4. 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…

largeimage.gif

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.

58 thoughts on “Horrible or Awesome #2 – Thumbnail Images

  1. Rudy

    I tried the thumbnail and my pop-ups show as thumbnails. I use .gif for small images and .jpg for large images.

  2. Gary Post author

    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.

  3. Rudy

    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’

  4. Gary Post author

    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?

  5. Rudy

    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.

  6. Rudy

    I would like to have this work and also have two or three thumbnail in the product_info page.

  7. Gary Post author

    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.

  8. Gary Post author

    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…

  9. Gary Post author

    Guilherme – you are very welcome.

  10. Rudy

    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

  11. Gary Post author

    I haven’t used lightbox recently. I am pretty sure there is a contribution which uses lightbox and 2 sizes of image.

  12. Moleiro

    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!

  13. Gary Post author

    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

  14. Moleiro

    Thank’s again!
    Just sent you an email a few seconds ago.

  15. Chris

    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?

  16. Gary Post author

    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

  17. Pingback: Club osCommerce » Various Reader Questions; thumbanil, vouchers v2, ms2

  18. lindsayanng

    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

  19. Gary Post author

    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 😉

  20. Lindsayanng

    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

  21. steelsomething

    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

  22. Gary Post author

    Nicole – you most likely have an older version of oscommerce – nothing to worry about. Gary

  23. Ian Milne

    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

  24. Gary Post author

    Ian – you have not run the SQL file using phpmyadmin.

  25. Ian Milne

    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?

  26. Ian Milne

    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.

  27. Ian Milne

    Problem was just as I suspected, now its working and I have a great addition to our website.

  28. Lindsayanng

    Hey, have a teeney, tiny issue. I installed your contribution without a hitch! However, when i was looking through my site, I opened a few of my images and noticed that they all were cut off by about 10 pixels on the bottom.
    Check it out here:
    http://bscphoto.com/catalog/product_info.php?products_id=609
    You dont REALLY notice it because there are no scroll bars, but if you pull the box, an inch of so is hiding there. It is really important that the window shows the whole image because one part of photography is the composition!

    Any help is much appreciated

  29. Gary Post author

    Linds – you should change the basic popup javascript code. If it as me I would add prettyphoto jquery popup.

  30. Lindsayanng

    would you happen to have a link to an oscommerce friendly site with that? I only found ONE download and it was a .rar which my computer will not support.

  31. Ian Milne

    Now I’m really stumped… After installing the large_products_image files I cannot add edit or delete any Category and I can add and edit products but not delete them. Replace admin/categories.php with the original file and everything works. I have done an intensive compare of the two files and can see nothing that should cause these problems…

    Any thoughts…

  32. Gary Post author

    Linds:
    http://www.no-margin-for-errors.com/projects/prettyPhoto/
    Get the “Uncompressed version (Script: 17.6kb / CSS: 6kb)” – then follow the instructions and you’ll be up and running without problems (hopefully!).

    Ian:
    I just tried my shop which runs the large/small thing and I am able to amke those changes without problems. So, the likelihood is either;

    1. Incorrect installation
    or
    2. Some other contribution conflicting.

    Do you get an error message?

  33. Ian Milne

    Gary,

    No error message. However, it behaves differently. In admin with the screen showing Catogories only if I click on edit a category, edit and save, I get a new page with both categories and sub categories listed by sort order followed by a list of all the products. I’ll try downloading the files again and see what happens. Only other contributions are for shipping and payment.

  34. Ian Milne

    Hi,

    Fixed problem by adding your large_products_image code to my original categories.php. Later when I have more time I’ll do another file compare and see what’s different… but for now it works and that’s all that matters…

  35. rikawa

    Dear Gary,
    – I have just installed everything: the 3 files and the code.
    – Selected the small and big images.

    But it doesn´t show the big image, when i click, it just shows the small file size.

    What can be wrong? Does the language site can affect anything?

    Very thanks!

  36. rikawa

    Hi Gary,
    I have juts posted earlier, but don´t know why, it doesn´t show here. So I´m posting again.

    It keep showing the small file, not the big one.

    Have just installed everything:

    – the 3 files
    – ALTER TABLE `products` ADD `large_products_image` VARCHAR( 64 ) AFTER `products_image`
    – selected two images, one small and other big.
    – Zero error message.
    – May site is in Brazilian Portuguese.

  37. Gary Post author

    Rikawa – I haven’t checked that contribution for a while, I think it is coded OK. Make sure you have the small and large image named differently, and make sure you definitely made the correct changes in product_info.php and popup_image.php

  38. rikawa

    Gary, wich changes are you talking about in the product_info.php? Sorry, bu I didn´t know that there was changes to this file. Could you please show me, what do I have to do?

    I just have changed theses three files: the two “categories.php” and “popup_image.php” that came with the pack. And the others:

    – ALTER TABLE `products` ADD `large_products_image` VARCHAR( 64 ) AFTER `products_image`
    – selected two images, one small and other big.

    Sorry for my bad english.
    Thanks.

  39. Gary Post author

    Ah yeah – that was for something else (prettyphoto).
    Just revert to your backup files, and then try a reinstall.
    If you need it I offer an instalaltion service.

  40. rikawa

    How much for the service?
    Also, could you show me any site that use this contribution, just to see, the quality of thumbnails.
    Thanks.

  41. Alex

    what is main difference between your ‘Club osCommerce Easy Thumbnail’ add-on (http://addons.oscommerce.com/info/5777) and ‘On the Fly Auto Thumbnailer’?
    There so many changes and fixed in that ‘On the Fly Auto Thumbnailer’, so it’s unclear, which is last stable version??

  42. lindsayanng

    Hey there Gary.. I have to say THANKS so much for all that you have done for oscommerce.

    I have a question about your large image/thumbnail contribution..

    My website is growing, and FAST!! I went from having 200 products to having close to 20,000 – its all find and good, because it means we are making money.. The bad thing, it takes me FOREVER to open my IMAGES folder where all my product images reside.

    I decided that i DESPERATELY needed a subdirectory, which i found here:
    Image Subdirectory Support Contribution
    I installed it, but then quickly realized that this will only allow me to create a subdirectory for the main product image (or thumbnail) and not for the larger image.

    Would you be willing to upload a patch that will allow it to work with your large images coding?

    THANKS!!

  43. Gary Post author

    Linds – you should be able to make the same changes for the “large” as you did for the “thumbnail”…

  44. Gary Post author

    Alex – “On the Fly Auto Thumbnailer” creates the smaller image automatically based on the larger image.

    My contribution allows you to make your own small/large images so they can be different if you require. Or the same…

    In other words, the two contributions are totally different.

  45. Alex

    Hi Gary,

    which approach have more advantages, to use one image (big) and create thumbnails based on it, or use two different size images? Creating thumbnails dynamically (“On the Fly Auto Thumbnailer”) allows save webspace?

    Thank you.

  46. Gary Post author

    Alex – I believe that it is better to make the thumbnail and the large image different to each other.

  47. Alex

    Does your contribution ‘Club osCommerce Easy Thumbnail'(5777) have improved popup_image.php code, or its unchanged? Will it open popup centered of the browser window, resized to the size of the image, close popup by clicking anywhere on window?
    Original image pop-up provided by osCommerce doesn’t look so good, and it always cuts off the bottom of the image for some reason.

  48. lindsayanng

    Ok, i get it. Played around a little and figured it out.

    Now heres an interesting question that i KNOW i can not answer myself because it is beyond me scope of knowledge. And i KNOW this is not your contribution, but i figured i might ask, as I have not gotten any response from the forum.

    With that file field being there to put the file path in, is there ANY way to have the field autofilled with the category name that i am creating a product in?

  49. steelthings

    Hi Gary,
    I’m trying to add a new category to my store and it won’t let me, but
    it lets me add new products. Is there anything in the Easy Tumbnail
    contrib that would cause that?

    I’m stumped.

    Thanks,
    Nicole

  50. Gary Post author

    Nicole – I think there is nothing in that contribution that would stop you making a new category.

  51. steelsomething

    Thanks Gary,
    I don’t know why, but once I changed both categories.php files back to
    the old ones, I was able to add the categories, move the products
    around, etc. So when I was done I changed it back to the files for
    the contrib so I could add both images, and everything worked nicely.

    I do seem to find (create?) unique problems though, so it’s probably
    just me.

    I love the contrib though!
    Cheers

  52. Jeffry

    Hi There, I am running 2.3.1 and see what you are talking about in your tutorial above.

    However, the issue is I load a Large image. It says it is saving, and yet when I click the thumbnail (which i had previously loaded in the proper size) it just comes up the same image.

    Any ideas? You can click my link for an example item. Also the “click here to enlarge” is not displaying.

    Thanks in advance!
    Jeffry

  53. Jeffry

    Looks like I may of solved it. I just uploaded a “Large Image” in JPG instead of PNG and I get a large pop up now when the image is clicked. But how can I add the words, Click to enlarge?

Leave a Reply

Your email address will not be published. Required fields are marked *