NGR Posted March 1, 2004 Posted March 1, 2004 Hi, My site is currently live and I have quite a few visitors on constantly so im reluctant to change too much without knowing if it will work or not!! My images look pixelated because oscommerce are compressing/squashing them! So obviously I need to enhance them a bit! Right, so what im thinking(and yes, gone through the contribs but cant quite find what im looking for) - Can I optimize all my images with say, Fireworks, to thumbnail pics...which will be displayed all over the site - and then when a user actually goes into the product Info and clicks "Click here for a larger image" get it to call a totally different image from a different directory but with the SAME name?? Ive been going through the popup_image.php, now, is it possible to define another images directory, and put all my larger images in that directory and just change the reference here? Or is there something im missing here?? Any help would be greatly appreciated!! Nick :ph34r:
mac5 Posted March 1, 2004 Posted March 1, 2004 My images were getting squished also, so I made everything a square. I uploaded the large image and in the Admin Configuration/Images defined the image size as 100 width/ 100 height. Is there a better way to do this? What if someone wanted non square images that are each different height/width ratios?
fmerrill Posted March 1, 2004 Posted March 1, 2004 <<< What if someone wanted non square images that are each different height/width ratios? >>> set the small image width to what you want, and set the small image height to nothing (blank, not zero) and see how that works for you. it will maintain it's height/width ratio that way.
NGR Posted March 1, 2004 Author Posted March 1, 2004 Mmmmm.... Ok, this is what I did and it seems to be working like a dream! Take ALL your images...put them into one folder! Make a copy of that folder! Right, now... I used macromedia fireworks! All the files in one folder re-size to say, 100 x 80 (These will be the small thumbnail pics that are seen throughout the site)... Then... What I did was upload those files to where they normally would be. ie: catalog/images... Now in that catalog/images make a directry called "BIG" and upload all the original bigger files there! Then the only change you need to make in the "/includes/configure.php", just below define('DIR_WS_IMAGES', 'images/'); add the following define('DIR_WS_IMAGESBIG', DIR_WS_IMAGES . 'big/'); Then the only other change to make it work would be in catalog/popup_image.php find <?php echo tep_image(DIR_WS_IMAGES . $products_values['products_image'], $products_values['products_name']); ?> and replace with <?php echo tep_image(DIR_WS_IMAGESBIG . $products_values['products_image'], $products_values['products_name']); ?> Thats what I did, does anyone see any problems with it?? Have A Looksee Here This way the loading time is much quicker and the pictures are much clearer! The when the user clicks the option for the bigger image the bigger image is called! The reason your images still look quishy after setting the dimensions is because its taking your bigger file, and using the browser to make is smaller - which doesnt do it nicely! Use something like Fireworks or 3D Studio to make the pics smaller! Does anyone see any problems which what I have said - and are the things loading properly on my site?? Thanks people, Nick :ph34r:
TheBlueEyz Posted March 2, 2004 Posted March 2, 2004 That's such an awesome solution Nick :) I'm going to save this thread just because that was so useful! Thank you! Patrick
NGR Posted March 2, 2004 Author Posted March 2, 2004 B) Sweeeeeet.... I actually helped someone!!! :D WHOO HOOOO!!!! Maybe i should start writing my own contribs!!! hehe! Im glad it helped, Nick! :ph34r:
ptrau Posted March 3, 2004 Posted March 3, 2004 There is a contribution that will allow you to display your images in their original proportion. I would also recommend using the contrib that creates auto-thumbnails because OSC just resizes the original image. If you upload a high quality image for the "full-size' display, your thumbnail will also be that high quality which can lead to slow page load times. Contributions "Aliiiiive, it's alive, it's ALIIIIIIIIIIIIIVE!!!"
Guest Posted March 3, 2004 Posted March 3, 2004 I would highly recomend the ultrapics / wysiwyg combination contribution. It will sort out any problems you have or will have with images.
Guest Posted March 4, 2004 Posted March 4, 2004 NGR - Sounds like it should work. I am having pretty much the same problem. My pics are all different sizes. Here's what I did: I created thumb versions in Photoshop, used those in the admin area when creating the products to be displayed, used your code in the proper areas and the result is.......dead image link for "click to enlarge". Also, I was having a problem with all images & graphics being scrunched up all over. So, I went into the admin, set ALL the image attributes to "0" and set the calculate image size to "true". It works perfectly EXCEPT for the actual product images. The graphical titles, buttons, etc. are perfect, but before I added your code it only showed the thumb image for the "click to enlarge" option. Any ideas from anyone on working around this so it will display the original image on "...enlarge" option as well as a thumb? I am a little reluctant to instal the contrib since I don't want to screw it up any more than I have :P
NGR Posted March 4, 2004 Author Posted March 4, 2004 Hi Paul, I also had the dead image like what you said - but it turned out to be because I didnt define the right path! Once i had the right path it worked like a dream, and still is! What i can do, is send me a link to your site and i'll have a look whats wrong for u!! Sweet, Nick
Poom Posted March 4, 2004 Posted March 4, 2004 My site address is http://www.thecdrstore.34sp.com/catalog/ and I cant get this to work :( Please could you haev a look?
Guest Posted March 4, 2004 Posted March 4, 2004 NGR - Thanx. I will give a direct link to a product. I can post the entire code here for both pages if you would like. Althought that would be VERY long post :P Product Link I hope I didn't do anything too drastic :P Thanx in advance NGR
JuxiZoza Posted March 5, 2004 Posted March 5, 2004 Ok, this is what I did and it seems to be working like a dream! Sounds good and it works, but you can save yourself some work. Get the FREE program EZ Thumbnails from http://www.fookes.com/ezthumbs/?Easy%20Thumbnails=2600 You can adjust jpeg compression, brightness, contrast, sharpness, rotate image and resize. When resizing, you have total contol of the output. You can add prefix, suffix, re-name, or leave name alone. Save to same directory or another one. Just make sure that you adjust sharpness when resizing. Oh yea, it will do a whole directory at a time. Depending on speed of your computer, should take 3-5 min to process 1,000 images. One of top 5 FREE programs I have found. You don't need to hack the files to put images in different folders. That can be done on an image by image basis. Just put "big/image.jpg" for image information. If you use something like "Sm,Med,and Lg Images" http://www.oscommerce.com/community/contributions,695 you can have small image for "results" pages, medium for product information, and large for pop-up. Using EZ Thumbnail make the images just the size you need and save on bandwidth. Put in same folder with different prefix or suffix to original file name, or different folders and use "sml/name.jpg", "med/name.jpg", lrg/name.jpg" as image file name. To process a folder of 1,000 images into 3 different sizes, including time to test several images for best settings for brightness, contrast and sharpness settings, PLUS read the folders using "Directory Lister" (DirLister.zip, available from many download sites) for file names and import that listing into Excel to create a text file to use with phpMyAdmin to update osCommerce table... total time < 1 hour. Getting the images onto the server is another matter. But all the grunt work for 1,000 images plus script to update tables < 1 hour.
NGR Posted March 5, 2004 Author Posted March 5, 2004 :D Hi you all... Right, a see a couple of you are having problems.... had a look at some of the links! I helped someone earlier that had these "dead" links - and it turned out to be that when you define "images/big" and make the folder "big" they must be in the same case ie: dont define "images/big" and make your folder "BIG"!!! They are case sensitive... Understand what im saying?? Sweet, Nick :ph34r:
Guest Posted March 5, 2004 Posted March 5, 2004 NGR - I understand what your saying. In another threadthey said to take out the _values part, but either way doesn't work. the folder is created and certain images that should link as the popup image have a dead "x" image :( Oh heck I will put the code for both the popup_image.php and the configure.php....maybe I did a typo or something. Configure.php: [SIZE=1]<?php /* osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright (c) 2003 osCommerce Released under the GNU General Public License */ // Define the webserver and path parameters // * DIR_FS_* = Filesystem directories (local/physical) // * DIR_WS_* = Webserver directories (virtual/URL) define('HTTP_SERVER', 'http://www.elysiangifts.com'); // eg, http://localhost - should not be empty for productive servers define('HTTPS_SERVER', ''); // eg, https://localhost - should not be empty for productive servers define('ENABLE_SSL', false); // secure webserver for checkout procedure? define('HTTP_COOKIE_DOMAIN', 'www.elysiangifts.com'); define('HTTPS_COOKIE_DOMAIN', ''); define('HTTP_COOKIE_PATH', '/catalog/'); define('HTTPS_COOKIE_PATH', ''); define('DIR_WS_HTTP_CATALOG', '/catalog/'); define('DIR_WS_HTTPS_CATALOG', ''); define('DIR_WS_IMAGESBIG', DIR_WS_IMAGES . 'big/'); define('DIR_WS_ICONS', DIR_WS_IMAGES . 'icons/'); define('DIR_WS_INCLUDES', 'includes/'); define('DIR_WS_BOXES', DIR_WS_INCLUDES . 'boxes/'); define('DIR_WS_FUNCTIONS', DIR_WS_INCLUDES . 'functions/'); define('DIR_WS_CLASSES', DIR_WS_INCLUDES . 'classes/'); define('DIR_WS_MODULES', DIR_WS_INCLUDES . 'modules/'); define('DIR_WS_LANGUAGES', DIR_WS_INCLUDES . 'languages/'); define('DIR_WS_DOWNLOAD_PUBLIC', 'pub/'); define('DIR_FS_CATALOG', '/homepages/3/d91080410/htdocs/catalog/'); define('DIR_FS_DOWNLOAD', DIR_FS_CATALOG . 'download/'); define('DIR_FS_DOWNLOAD_PUBLIC', DIR_FS_CATALOG . 'pub/'); // define our database connection define('DB_SERVER', 'db12.perfora.net'); // eg, localhost - should not be empty for productive servers define('DB_SERVER_USERNAME', 'dbo97429506'); define('DB_SERVER_PASSWORD', 'hg2RXpz9'); define('DB_DATABASE', 'db97429506'); define('USE_PCONNECT', 'false'); // use persistent connections? define('STORE_SESSIONS', 'mysql'); // leave empty '' for default handler or set to 'mysql' ?>[/SIZE] Popup_image.php: [SIZE=1]<?php /* $Id: popup_image.php,v 1.18 2003/06/05 23:26:23 hpdl Exp $ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright (c) 2003 osCommerce Released under the GNU General Public License */ require('includes/application_top.php'); $navigation->remove_current_page(); $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_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['pID'] . "' and pd.language_id = '" . (int)$languages_id . "'"); $products = tep_db_fetch_array($products_query); ?> <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html <?php echo HTML_PARAMS; ?>> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>"> <title><?php echo $products['products_name']; ?></title> <base href="<?php echo (($request_type == 'SSL') ? 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 echo tep_image(DIR_WS_IMAGESBIG . $products_values['products_image'], $products_values['products_name']); ?> </body> </html> <?php require('includes/application_bottom.php'); ?>[/SIZE] I have been known for a few typos :P
NGR Posted March 5, 2004 Author Posted March 5, 2004 Hey...Still working my way through your configure.php... Quick question...are u sure you're editing the configure.php found in your catalog/includes folder... Because that looks suspiously like the comes in the catalog/admin/includes/configure.php! Just a thought.... please check....
Guest Posted March 5, 2004 Posted March 5, 2004 Thank you NGR :) Yes, that is the one from catalog/includes/configure.php.
VMJ Posted March 17, 2004 Posted March 17, 2004 Mmmmm.... Ok, this is what I did and it seems to be working like a dream! Take ALL your images...put them into one folder! Make a copy of that folder! Right, now... I used macromedia fireworks! All the files in one folder re-size to say, 100 x 80 (These will be the small thumbnail pics that are seen throughout the site)... Then... What I did was upload those files to where they normally would be. ie: catalog/images... Now in that catalog/images make a directry called "BIG" and upload all the original bigger files there! Then the only change you need to make in the "/includes/configure.php", just below define('DIR_WS_IMAGES', 'images/'); add the following define('DIR_WS_IMAGESBIG', DIR_WS_IMAGES . 'big/'); Then the only other change to make it work would be in catalog/popup_image.php find <?php echo tep_image(DIR_WS_IMAGES . $products_values['products_image'], $products_values['products_name']); ?> and replace with <?php echo tep_image(DIR_WS_IMAGESBIG . $products_values['products_image'], $products_values['products_name']); ?> Thats what I did, does anyone see any problems with it?? Have A Looksee Here This way the loading time is much quicker and the pictures are much clearer! The when the user clicks the option for the bigger image the bigger image is called! The reason your images still look quishy after setting the dimensions is because its taking your bigger file, and using the browser to make is smaller - which doesnt do it nicely! Use something like Fireworks or 3D Studio to make the pics smaller! Does anyone see any problems which what I have said - and are the things loading properly on my site?? Thanks people, Nick :ph34r: When I followed these instructions, none of my normal pictures showed up on my site. I lost all icons, table graphics, etc. What am I doing wrong? Mike Davis www.virtualmusicjukebox.com The Best Digital MP3 Jukebox Player!
VMJ Posted March 17, 2004 Posted March 17, 2004 I just fixed the problem! define('DIR_WS_IMAGES', 'images/'); You don't replace that line, you add the following under it. define('DIR_WS_IMAGESBIG', DIR_WS_IMAGES . 'big/'); I was getting the same problem as everyone else with the dead images. Like someone mentioned, the folders are case sensitive, so in the example above, be sure to name the "BIG" folder in all caps. Mike Davis www.virtualmusicjukebox.com The Best Digital MP3 Jukebox Player!
Guest Posted May 11, 2004 Posted May 11, 2004 Hello, I must be missing something but I can't figure out what it is. I've done everything as described but when I click on the "Click to enlarge" link all I get is a blank page. Any ideas? Thanks!
Bluesky4x4 Posted May 12, 2004 Posted May 12, 2004 <<< What if someone wanted non square images that are each different height/width ratios? >>> set the small image width to what you want, and set the small image height to nothing (blank, not zero) and see how that works for you. it will maintain it's height/width ratio that way. I attempted to do it this way and it won't work. This is on a base install also.
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.