beckysmith Posted December 4, 2002 Share Posted 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... Link to comment Share on other sites More sharing options...
dreamscape Posted December 4, 2002 Share Posted 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. The only thing necessary for evil to flourish is for good men to do nothing - Edmund Burke Link to comment Share on other sites More sharing options...
beckysmith Posted December 4, 2002 Author Share Posted December 4, 2002 Hi Joshua! I will give that a go :) Thank you! Link to comment Share on other sites More sharing options...
raym Posted December 5, 2002 Share Posted 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. Link to comment Share on other sites More sharing options...
dreamscape Posted December 5, 2002 Share Posted 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 The only thing necessary for evil to flourish is for good men to do nothing - Edmund Burke Link to comment Share on other sites More sharing options...
beckysmith Posted December 5, 2002 Author Share Posted 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! Link to comment Share on other sites More sharing options...
raym Posted December 5, 2002 Share Posted December 5, 2002 My mistake :oops: , I've been overdoing it :shock: Thanks Joshua, Link to comment Share on other sites More sharing options...
Guest Posted December 11, 2002 Share Posted 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? Link to comment Share on other sites More sharing options...
dreamscape Posted December 11, 2002 Share Posted 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. The only thing necessary for evil to flourish is for good men to do nothing - Edmund Burke Link to comment Share on other sites More sharing options...
Carcrafter Posted December 11, 2002 Share Posted 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/ Ed Caggiani Custom Porsche accessories, news, discussions Link to comment Share on other sites More sharing options...
mbianchi Posted December 13, 2002 Share Posted 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 Link to comment Share on other sites More sharing options...
dreamscape Posted December 13, 2002 Share Posted 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 The only thing necessary for evil to flourish is for good men to do nothing - Edmund Burke Link to comment Share on other sites More sharing options...
tbiser Posted December 20, 2002 Share Posted 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! Consulting - If you're not a part of the solution, there's good money to be made in prolonging the problem. Link to comment Share on other sites More sharing options...
Guest Posted December 21, 2002 Share Posted 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 Link to comment Share on other sites More sharing options...
tbiser Posted December 21, 2002 Share Posted 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 Consulting - If you're not a part of the solution, there's good money to be made in prolonging the problem. Link to comment Share on other sites More sharing options...
Guest Posted December 21, 2002 Share Posted 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 Link to comment Share on other sites More sharing options...
Guest Posted December 28, 2002 Share Posted 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... Link to comment Share on other sites More sharing options...
Ryanc Posted January 1, 2003 Share Posted 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 Link to comment Share on other sites More sharing options...
Ryanc Posted January 1, 2003 Share Posted 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. Link to comment Share on other sites More sharing options...
jesse9201 Posted February 9, 2003 Share Posted 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. Link to comment Share on other sites More sharing options...
dreamscape Posted February 9, 2003 Share Posted 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?? The only thing necessary for evil to flourish is for good men to do nothing - Edmund Burke Link to comment Share on other sites More sharing options...
jesse9201 Posted February 9, 2003 Share Posted 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 Link to comment Share on other sites More sharing options...
dreamscape Posted February 10, 2003 Share Posted 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. The only thing necessary for evil to flourish is for good men to do nothing - Edmund Burke Link to comment Share on other sites More sharing options...
jesse9201 Posted February 10, 2003 Share Posted February 10, 2003 Thank you so much Joshua - your tips have saved me hours of hair pulling! :) Link to comment Share on other sites More sharing options...
GF Posted March 17, 2003 Share Posted 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 Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.