Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

Thumbnail Images


Recommended Posts

I am relatively new to osCommerce but have a solid understanding of computers and programming. I have a quick question.


As i can tell, osCommerce uses one large pic for a product, then it takes that large image and has the browser resize it to create a thumbnail image of the product. Then when the "click to enlarge" link is clicked the normal picture is shown in a separate window.


Is there a way to supply different pictures, one for the thumbnail and the other for the full size image. This will eliminate the distorded resizing effect that occurs when the browser automatically resizes images, thus adding a more professional and sharper look.


Thank you in advance for your help and support.

Link to comment
Share on other sites

In our our store I've solved this problem with a following PHP code:

(I replaced original picture code in product_info.php with this code)

 // check if the picture really exist...
 if (file_exists($product_info['products_image'])):
    // ...and read width and height of the picture
    $imagehw = GetImageSize($product_info['products_image']);
    $imagewidth = $imagehw[0];
    $imageheight = $imagehw[1];
    // Check that picture file is not empty!!! 
    if ($imagewidth != 0):
       // Width of the desired picture is 150 px, so ...
       $newwidth = 150;
       $aspect_ratio = $newwidth / $imagewidth;
       // Count new height with a correct aspect ratio
       $newheight = floor($aspect_ratio * $imageheight);
    else :
       $newwidth = 0;
       $newheight = 0;
   // Set and print out <img> tag if the picture really exists
 $picture_ref = '<img src="' . $product_info['products_image'] . '" width="' .  $newwidth . '" height="' . $newheight . '" alt="' . $product_info['products_name'] . ' - Click to enlarge">';
 echo $picture_ref;

You need to modify your product_info.php (and maybe other product_listings too) a little bit to get this working, but I think it's still easier than handle thumbnails. We have nearly 5,000 products in our store, so this really was much easier than create and handle all those thumbnails... ;)

Link to comment
Share on other sites

Thanks for the tip, I did find a way to answer my own question ... however you do make a good point, it would take quite a bit more time to create two pics for each item.


Can you link me to your store, I'm very curious to see the result of your code.


Thanks for your help.

Link to comment
Share on other sites

OK, here it comes: Peliarkku game store->Tomb raider 4. Site is in Finnish language only but you'll see there text link "Lis?tietoja" (it means "additional information" in English) on the left and thumbnail on the right. This thumb is (still) generated by Osc, so it's forced to given dimensions (60x75, it should be 60x84). <_<


Click an image and you'll see it in original size (as OsC shows it, window is sometimes smaller than an image!).


Clicking a text link should open a pop-up window with product picture and product description. In this window product image is reduced with PHP (width is 150 px and height is counted just like in code example) and it has a correct aspect ratio... ;)

Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...