Small (Thumbnail) Images - Big Images - Simplest Way?

beckysmith · December 4, 2002

Okay, I've been hunting around for a while and seen many topics - but they either offer very complicated suggestions/changes or add far too many options that I really don't need.

So in very simple terms (for this very simple girl!)

I want to have the option to upload a small image for the thumbnail and a big image for when people click on the product for more information. And that's it! I will manually format the pictures in Photoshop as there isn't that many.

So in admin, simply:

Upload Thumbnail/Small Image

Upload Big Image

(So it displays the Thumbnail/Small Images on the product_info.php page and the index page listing the products - once the user clicks on the graphic it opens the Big Image for a more detailed look as usual)

What is the absolute simplest way to get this working? I am using a late August snapshot btw...

dreamscape · December 4, 2002

this is what I do... it was part of a contrib that was similar, but used the PHP imaging features to resize the big image to thumbnails, which I did not like...

step 1: open popup_image.php and change the BODY to this:

<body onload="resize();">

<?php



define('IN_IMAGE_SUBDIR','images_big/');

// if the big image isn't shown unkomment the next line, and check the path:

// maybe you have to remove '/'. or adjust the path, depends on your configuration 

  // echo DIR_FS_CATALOG.'/'.DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'];

         if (is_file(DIR_FS_CATALOG.'/'.DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'])) {

               $image=DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'];

         }

         else {

               $image=DIR_WS_IMAGES . $products_values['products_image'];

         }

          echo tep_image($image, $products_values['products_name']);

?>



</body>

This code basically looks for an image in the directory "images/images_big" and shows it if it is there... if not, it will show the thumbnail...

thats it! Just put the thumbnails in your images directory, and create a directory called "images_big" inside the images folder (images/images_big) and upload the full size images into the images_big folder. The thumbnails can be uploaded via admin... but I don't have a solution to upload the big images via admin... using FTP to upload them works just as well I think.

beckysmith · December 4, 2002

Hi Joshua! I will give that a go :) Thank you!

raym · December 5, 2002

This didn't work for me but had a welcome side benefit.

I need to show the back and front of a product. Uploaded the back.jpg to big_images using same name as small.jpg now when user clicks the small.jpg on product info page, the back.jpg pops up. This is just what I've been searching for. Thanks.

I think what Becky wanted though is small pictures on front page etc, when user clicks these thumbnails they are taken to the product info page, this page displays a bigger picture of original thumbnail image (without using click to enlarge). Sorry if I'm wrong!!!

This would be a handy feature.

dreamscape · December 5, 2002

This didn't work for me but had a welcome side benefit.

I need to show the back and front of a product. Uploaded the back.jpg to big_images using same name as small.jpg now when user clicks the small.jpg on product info page, the back.jpg pops up. This is just what I've been searching for. Thanks.

I think what Becky wanted though is small pictures on front page etc, when user clicks these thumbnails they are taken to the product info page, this page displays a bigger picture of original thumbnail image (without using click to enlarge). Sorry if I'm wrong!!!

This would be a handy feature.

I don't see how it didn't work for you... what you are describing is exactly what it is supposed to do... show the image in "images_big" when you click on enlarge image on the product info page...

I thought this is what becky was talking about... I went and read over it again a few times and see I may have been wrong... I thought she wanted this... sorry for any confusion

beckysmith · December 5, 2002

Joshua is right :) It worked great for me... I did want the click to enlarge as the main problem with the HTML resize is the time of loading for the big images.... But thanks for the concern!

Btw, for other people trying this, I had to remove the Small Image Width and Small Image Height numbers in Admin (Configuration -> Images)

And made sure that Calculate Image Size was still set to TRUE.

:)

Thanks again Joshua!

raym · December 5, 2002

My mistake :oops: , I've been overdoing it :shock:

Thanks Joshua,

December 11, 2002

Ok, I need to do the same thing as beckysmith, but I do not want to manually use photoshop as I have 15000 products, and 2500 pics and then the rest are suplemented with manufacturer logos.

Any Ideas?

dreamscape · December 11, 2002

this is the contrib I took the popup code from:

http://www.oscommerce.com/downloads.php/co...ions,505/type,3

it resizes the big images for you to thumbnails using one of the PHP imaging things... it might suit you.

Carcrafter · December 11, 2002

I'm using the NetPBM based contribution found at http://www.oscommerce.com/downloads.php/co...ions,345/type,3

This works great for me. Basically, I have it setup to create a small and medium image for my cart. The small image is used in the product lists, the medium image is used in product details, and the original large image is seen when the user clicks on the "Click to Enlarge" link.

The main benefit for me is that I only need to add one image, the large one. Then the code automatically generates the other two. The quality is excellent...WAY better than having the browser resize the image for you.

Check it out at https://www.carcrafter.com/catalog/

mbianchi · December 13, 2002

Hi Dreamscape.

Thanks for the solution to the popup issue here. I gave it a test and everything worked, excpet one thing. The popup window shows the larger image but the window itself is still very small, about the size of the thumbnail. The window can be resized manually, but how can I make sure that the window comes up the same size as the larger image?

Thanks for your help!

Mark

dreamscape · December 13, 2002

Hi Dreamscape.

Thanks for the solution to the popup issue here. I gave it a test and everything worked, excpet one thing. The popup window shows the larger image but the window itself is still very small, about the size of the thumbnail. The window can be resized manually, but how can I make sure that the window comes up the same size as the larger image?

Thanks for your help!

Mark

whoops, I forgot to copy the entire code, which includes the resize function... thanks for pointing that out...

the code in popup_image.php should read like:

<?php

/*

 osCommerce, Open Source E-Commerce Solutions

 http://www.oscommerce.com



 Copyright (c) 2002 osCommerce



 Released under the GNU General Public License

*/



 require('includes/application_top.php');



 $products_query = tep_db_query("select pd.products_name, p.products_image from " . TABLE_PRODUCTS . " p left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id where p.products_id = '" . $HTTP_GET_VARS['pID'] . "' and pd.language_id = '" . $languages_id . "'");

 $products_values = tep_db_fetch_array($products_query);

?>

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html <?php echo HTML_PARAMS; ?>>

<head>

<title><?php echo $products_values['products_name']; ?></title>

<base href="<?php echo (getenv('HTTPS') == 'on' ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

<script language="javascript"><!--

var i=0;

function resize() {

 if (navigator.appName == 'Netscape') i=40;

 if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);

 self.focus();

}

//--></script>

</head>

<body onload="resize();"> 

<?php 



define('IN_IMAGE_SUBDIR','images_big/'); 

// if the big image isn't shown unkomment the next line, and check the path: 

// maybe you have to remove '/'. or adjust the path, depends on your configuration 

    // echo DIR_FS_CATALOG.'/'.DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image']; 

         if (is_file(DIR_FS_CATALOG.'/'.DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'])) { 

               $image=DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image']; 

         } 

         else { 

               $image=DIR_WS_IMAGES . $products_values['products_image']; 

         } 

          echo tep_image($image, $products_values['products_name']); 

?> 



</body>

there that should resize the popup window to the size of the large image... my mistake for not including the header

tbiser · December 20, 2002

Ed,

I really love the Porsche site, and like your idea on the multiple sized images in the catalog. I took your advice, and I now have NetPBM and the contribution working. It's great! Can you share with us how you made the mid-sized image? Thanks again for the tip!

December 21, 2002

I am a newbie to php and oscommerce... (like you don't know)...(':roll:')

I am working with a catalog of all different sized pictures. I don't want to do the size massaging manually. Is there a syntax for setting the size in % rather than the default "nnn" wide and "nnn" high? ...as in the image settings of admin? The pictures I have are different proportions... some tall and narrow, some wide and short, so a "pixel" specification won't work. A percent spec would be just the perfect thing for the small images on product pages.

The pop-up can be as big as Rhode Island... I would like to use a different picture (same name but different extention) for the popup when "click to enlarge" is engaged. Is there a simple way to do this?

Thanks in advance for any help or pointers to other resources!

JLee

tbiser · December 21, 2002

Best thing I've found is to add the contribution mentioned above. It takes your original image and "creates" a smaller thumbnail, if one is not found. It requires that NetPBM is installed on your server, but if you have that installed, or can get your webhost to install it, then installation of the contrib is a breeze. Then, of course, there are a lot of suggestions on this forum on how to do what you want to do. But this one seems to be the cleanest and the easiest (best of both worlds!).

Also, for others interested...

I'm sure there's been a few inquiries of the aforementioned contrib to create transparent thumbnails. Since it's difficult to STFW for information on how to do this using NetPBM, I thought I'd post this little enhancement....

Instead of this...

case 3: // PNG

$cmd = "pngtopnm '$src'|pnmscale -xysize $width $height|ppmquant 255|pnmtopng $trans > '$dst'";

break;

    case 1: // GIF

$cmd = "giftopnm '$src'|pnmscale -xysize $width $height|ppmquant 255|ppmtogif $trans > '$dst'";

break;

    case 2: // JPG  

$cmd = "djpeg '$src'|pnmscale -xysize $width $height|cjpeg -quality 90 > '$dst'";

Add the transparent switch to pnmtogif (or pnmtopng - I think), like such...

case 3: // PNG

$cmd = "pngtopnm '$src'|pnmscale -xysize $width $height|ppmquant 255|pnmtopng -transparent rgb:ff/ff/ff $trans > '$dst'";

break;

    case 1: // GIF

$cmd = "giftopnm '$src'|pnmscale -xysize $width $height|ppmquant 255|ppmtogif -transparent rgb:ff/ff/ff $trans > '$dst'";

break;

    case 2: // JPG  

$cmd = "djpeg '$src'|pnmscale -xysize $width $height|cjpeg -quality 90 > '$dst'";

rgb:ff/ff/ff means that "white"or #ffffff will be transparent. This works great with images which have a clean white background with no shadows, such as those items used in the demo product database. Check out the results at www.ulrichbiser.com and notice how cleanly the images are reproduced. The original images all have white backgrounds.

Not too sure if this will work with PNG formats, but I don't see why not. In fact, I would think that instead of having it recreate PNG or JPG, you could pipe them all into a transparent GIF. I only use GIFs, so take for what it's worth. Hope this helps somebody...

...now, if I can only figure out how to make a medium sized image using this same contrib. Ed? Anybody?

Thad

December 21, 2002

Thanks thiser!

quick scenario

I am provided with two images of each product. One is fairly small and is a .gif. The other is large and is a .jpg.

The detail of the products is obviously much better in the .jpg and is intended for the "close up" look. I could live with the untidyness of the small pics if I could get the .jpg to display upon clicking the "click to enlarge" link.

The catalog is located at url: http://httpsuites.com/oscommerce

One of the small images appears periodicly in the specials box. It is entirely too large, but...

It is a Brass Prancing Stallion. You can see my dilemma maybe?

Perhaps someone can suggest something that takes into account the differing proportions of some images...

I will give a try to using the code you provided and simply specify the jpg image and see what happens...

JLee

Best thing I've found is to add the contribution mentioned above. It takes your original image and "creates" a smaller thumbnail, if one is not found. It requires that NetPBM is installed on your server, but if you have that installed, or can get your webhost to install it, then installation of the contrib is a breeze. Then, of course, there are a lot of suggestions on this forum on how to do what you want to do. But this one seems to be the cleanest and the easiest (best of both worlds!).
<snip>

Thad

December 28, 2002

Btw, for other people trying this, I had to remove the Small Image Width and Small Image Height numbers in Admin (Configuration -> Images)

And made sure that Calculate Image Size was still set to TRUE.

So what does Calculate image size actually do? im a bit confused by it...

Ryanc · January 1, 2003

hey dreamscape,

I have pasted the code and replaced the old popup_image.php but the smaller image is still showing up in the popup window. Any suggestions on how to fix this? my OSC is installed in a folder name 'shop', and the big image directory is located at /shop/images/images_big

thanks

Ryanc · January 1, 2003

Well whaddaya know! I'm a total PHP newbie but I figured out what was wrong and fixed it! (it was a pathing problem)

Disregard previous post.

jesse9201 · February 9, 2003

It worked just as you said Josh, however, my large images also show the following:

/home/mysite/public_html/catalog/images/images_big/1294.jpg

How do I delete this???

Thanks! :)

this is what I do... it was part of a contrib that was similar, but used the PHP imaging features to resize the big image to thumbnails, which I did not like...

step 1: open popup_image.php and change the BODY to this:
<body onload="resize();">

<?php



define('IN_IMAGE_SUBDIR','images_big/');

// if the big image isn't shown unkomment the next line, and check the path:

// maybe you have to remove '/'. or adjust the path, depends on your configuration 

  // echo DIR_FS_CATALOG.'/'.DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'];

         if (is_file(DIR_FS_CATALOG.'/'.DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'])) {

               $image=DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'];

         }

         else {

               $image=DIR_WS_IMAGES . $products_values['products_image'];

         }

          echo tep_image($image, $products_values['products_name']);

?>



</body>
This code basically looks for an image in the directory "images/images_big" and shows it if it is there... if not, it will show the thumbnail...

thats it! Just put the thumbnails in your images directory, and create a directory called "images_big" inside the images folder (images/images_big) and upload the full size images into the images_big folder. The thumbnails can be uploaded via admin... but I don't have a solution to upload the big images via admin... using FTP to upload them works just as well I think.

dreamscape · February 9, 2003

It worked just as you said Josh, however, my large images also show the following:

/home/mysite/public_html/catalog/images/images_big/1294.jpg

How do I delete this???

Thanks! :)

I don't understand your question... where do they show this line at??

jesse9201 · February 9, 2003

Hello Joshua,

This shows right above the "big" images (when you click on enlarge picture, inside the new window right above the actual photo):

/home/mysite/public_html/catalog/images/images_big/1294.jpg

dreamscape · February 10, 2003

then you have uncommented the line that shows the path:

// echo DIR_FS_CATALOG.'/'.DIR_WS_IMAGES.IN_IMAGE_SUBDIR.$products_values['products_image'];

the two // need to be there to keep it form showing... it is just part of the code, if you are having problems getting the images to show, so you can see the path. by default in the code it is commented out, but you must've mistakenly uncommented it.

jesse9201 · February 10, 2003

Thank you so much Joshua - your tips have saved me hours of hair pulling! :)

GF · March 17, 2003

I'm using the NetPBM based contribution found at http://www.oscommerce.com/downloads.php/co...ions,345/type,3

This works great for me. Basically, I have it setup to create a small and medium image for my cart. The small image is used in the product lists, the medium image is used in product details, and the original large image is seen when the user clicks on the "Click to Enlarge" link.

The main benefit for me is that I only need to add one image, the large one. Then the code automatically generates the other two. The quality is excellent...WAY better than having the browser resize the image for you.

Check it out athttps://www.carcrafter.com/catalog/

Is there a recent version of the Netpbm contribution that is compatible with oscommerce-2.2ms1?

Thanks

George

Small (Thumbnail) Images - Big Images - Simplest Way?

Recommended Posts

beckysmith

dreamscape

beckysmith

raym

dreamscape

beckysmith

raym

Guest

dreamscape

Carcrafter

mbianchi

dreamscape

tbiser

Guest

tbiser

Guest

Guest

Ryanc

Ryanc

jesse9201

dreamscape

jesse9201

dreamscape

jesse9201

GF

Archived

Browse

Activity