Ramesh Posted January 4, 2003 Share Posted January 4, 2003 How do I Prevent my thumbnails from appearing squashed ? Osc has a great feature for thumbnails. Normally you specify a image size for thumbnails e.g, 120 x 120 In the Admin section of OSC Configuration ->images Small Image Width 120 Small Image Height 120 Make sure calculate image size to true This is fine if your images have the same scale (i.e, 240x240) But if your original image is say 120x160, your thumbnail will appear squished or squashed ! In OSC , you can prevent this by specifing one fixed size for either the height or width. Then enter 0 for the other. Lets do this : Configuration ->images Small Image Width 120 Small Image Height 0 calculate image size is set to true, remember ? Right now enter your catalog and voila ! Your thumbnails have a fixed width of 120 and the height changes depending on the image. Clicking on the thumbnail to enlarge , shows your image in its original glory ! This is great if your catalog contains a large collection of images from different sources . Enjoy Special Effects / 3d + Flash Link to comment Share on other sites More sharing options...
Ramesh Posted January 4, 2003 Author Share Posted January 4, 2003 Quick Tip. To create smaller images (Thumbnails or large images): Use a Lasso (in your fav. image editor) to select the background or areas of the image of no interest. (In most packages you can hold down shift to make multiple selections) Use the magic wand tool for other areas of similar color. Next , with the background selected , choose the Gaussian Blur filter. (Filter are special plugins which do wild and weird as well as acceptable things to the image that is open) Try different values and until you get an acceptable image. You now have a sharp foreground ( object of interest . Save the image as a jpeg and you will find its file size is a fair bit smaller ! Good Luck. Oh and Remember - JPEGS for photos & high res images. GIFS for flat color images and text.[/color] Special Effects / 3d + Flash Link to comment Share on other sites More sharing options...
DougB Posted January 6, 2003 Share Posted January 6, 2003 I have images of different proportions (some are 100 * 200 others are 500 * 50) using this tip it makes some images great and others horrible. I have therefore set the heights and widths to be both 0 (I guess that setting Calculate Image Size to False would have the same effect. Link to comment Share on other sites More sharing options...
loxly Posted January 6, 2003 Share Posted January 6, 2003 How do I Prevent my thumbnails from appearing squashed ? Osc has a great feature for thumbnails. Normally you specify a image size for thumbnails e.g, 120 x 120 In the Admin section of OSC Configuration ->images Small Image Width 120 Small Image Height 120 Make sure calculate image size to true This is fine if your images have the same scale (i.e, 240x240) But if your original image is say 120x160, your thumbnail will appear squished or squashed ! In OSC , you can prevent this by specifing one fixed size for either the height or width. Then enter 0 for the other. Lets do this : Configuration ->images Small Image Width 120 Small Image Height 0 calculate image size is set to true, remember ? Right now enter your catalog and voila ! Your thumbnails have a fixed width of 120 and the height changes depending on the image. Clicking on the thumbnail to enlarge , shows your image in its original glory ! This is great if your catalog contains a large collection of images from different sources . Enjoy This worked perfectly for me, I even posted in the Dev forum that this should be included in the admin documentation right on the images page. If I set both to 0 my thumbnails would be HUGE :) I actually set width to 90 and that made everything fine. You can go look at http://loxlygallery.com if you like. Site will be undergoing LOTS of design changes this week, but solving that issue was major for me. Debbie [no external urls in signatures please, kthanks] Link to comment Share on other sites More sharing options...
Ramesh Posted January 6, 2003 Author Share Posted January 6, 2003 When using images, remember that the resolution should be no more than 72 dpi for screens. This is the max you can see on a monitor. Many people scan in photos and forget to adjust this. It can usually be found in the image size /settings panel of your graphics program. Higher resolutions are useful for printing Also image gamma (similar to brightness) is different between PCs and Macs . good luck ps: Hi, thanks to all for the emails /messages Special Effects / 3d + Flash Link to comment Share on other sites More sharing options...
idbeu Posted January 9, 2003 Share Posted January 9, 2003 Great tips Ramesh! one small note: some better monitors can display a little over 100 (110) dpi. If your images are small and you can afford the space, try making your images 110 dpi. Link to comment Share on other sites More sharing options...
Guest Posted January 18, 2003 Share Posted January 18, 2003 I belive that contemporary thory is 96dpi in current versions of windows, and 72dpi in Mac. Link to comment Share on other sites More sharing options...
Ramesh Posted January 24, 2003 Author Share Posted January 24, 2003 OK, DPI stands for Dots Per Inch. This is generally used when discussing images, but it really refers to an image resolution when printed or scanned. PPI is Pixels Per Inch and this is the actual value relating to a monitor or screen (or TFT / LCD ..e.t.c) Windows XP has this great feature for text.....it uses Anti-Aliasing (a diagonal line on screen, when looked at closes resembles a series of 'steps' ....anti-aliasing smoothes the steps to give a sharper line.) Having this means text on a screen is much more 'readable' with Windows XP. Special Effects / 3d + Flash Link to comment Share on other sites More sharing options...
maz Posted January 24, 2003 Share Posted January 24, 2003 Tried your suggestion in admin but my thumbnails are still out of proportion. I am using a very recent version of OS COm. Everything worked fine in the older version. Any suggesstions? Maz Link to comment Share on other sites More sharing options...
Ramesh Posted January 24, 2003 Author Share Posted January 24, 2003 Hi, I've just installed a recent snapshot and it still works for me. small image width = 90 small image height = 0 . calculate image size = true try again and post your results. more tips follow: oh btw, this is only suitable for width because if you make the height constant . the images width can vary...if you have a specials image show up on the left...this will expand that infobox which breaks the nice form of the layout. any images on the right will expand so scrollbars appear on the page (ugly ;-) Special Effects / 3d + Flash Link to comment Share on other sites More sharing options...
loxly Posted January 24, 2003 Share Posted January 24, 2003 Tried your suggestion in admin but my thumbnails are still out of proportion. I am using a very recent version of OS COm. Everything worked fine in the older version.Maz Is it just in Admin that the images are incorrect? I don't even see my images in the admin section. I just check them in the catalog. Debbie [no external urls in signatures please, kthanks] Link to comment Share on other sites More sharing options...
maz Posted January 24, 2003 Share Posted January 24, 2003 Thnaks for replying ramesh. Tried exactly as you suggest but no joy. The results are that the widths are much more than 90pixels and vary. They are not consistant. Yet the heights are. small image width = 90 small image height = 0 calculate image size = true I am using snapshot tep_snapshot-20030115 Before that I was using snapshot from last october. What I used there was a contribution called 'Keep Image Proportions' In the earleir snapshot this is what i did : The only file I changed was html_output.php In html_output.php (function tep_image) I replaced: if ( ($width) && ($height) ) { $image .= ' width="' . $width . '" height="' . $height . '"'; } with: if ( ($width) && ($height) ) { $image_size = @getimagesize($src); $ratio = $width / $image_size[0]; if ($image_size[1]*$ratio > $height) { $ratio = $height / $image_size[1]; $width = $image_size[0] * $ratio; } else { $height = $image_size[1] * $ratio; } $image .= ' width="' . $width . '" height="' . $height . '"'; THIS WORKED FINE WITH THE ARLIER SNAPSHOT But in the latest TEP Snapshot the line of code seems to have changed. They have changed it FROM: if ( ($width) && ($height) ) { $image .= ' width="' . $width . '" height="' . $height . '"'; } TO THIS: if ( (!$width) && ($height) ) { $ratio = $height / $image_size[0]; $width = $image_size[1] * $ratio; } elseif ( ($width) && (!$height) ) { $ratio = $width / $image_size[0]; $height = $image_size[1] * $ratio; } elseif ( (!$width) && (!$height) ) { $width = $image_size[0]; $height = $image_size[1]; } } elseif (IMAGE_REQUIRED == 'false') { return false; } } I'm just not sure which part to change. Link to comment Share on other sites More sharing options...
Guest Posted June 1, 2005 Share Posted June 1, 2005 ...They have changed it FROM: if ( ($width) && ($height) ) { $image .= ' width="' . $width . '" height="' . $height . '"'; } TO THIS: if ( (!$width) && ($height) ) { $ratio = $height / $image_size[0]; $width = $image_size[1] * $ratio; } elseif ( ($width) && (!$height) ) { $ratio = $width / $image_size[0]; $height = $image_size[1] * $ratio; } elseif ( (!$width) && (!$height) ) { $width = $image_size[0]; $height = $image_size[1]; } } elseif (IMAGE_REQUIRED == 'false') { return false; } } I'm just not sure which part to change. <{POST_SNAPBACK}> Don't change it. This is the bit that preserves the proportions automatically. I put "0" in mine and all my thumbnails disappeared entirely. Then I looked at this code and set a dimension to nothing (blank) and everything worked, with one exception. Now when I search in categories the images are all replaced with ALT text. Anybody have any thoughts as to why this would happen here and nowhere else? --Mike Link to comment Share on other sites More sharing options...
Guest Posted June 2, 2005 Share Posted June 2, 2005 Try deleting the 0 so you only have a width or a height determined. Works here :) You can also save your jpeg`s as 80% quality and no one will notice unless they tried to print it out, but your image will load 20% quicker. Link to comment Share on other sites More sharing options...
Guest Posted June 2, 2005 Share Posted June 2, 2005 Try deleting the 0 so you only have a width or a height determined. Right, I tried that. That's when the pictures disappeared from the product lists. They're fine on the index and in the product info. --Mike Link to comment Share on other sites More sharing options...
Guest Posted June 3, 2005 Share Posted June 3, 2005 Right, I tried that. That's when the pictures disappeared from the product lists. They're fine on the index and in the product info. --Mike <{POST_SNAPBACK}> Like I said, it works here. Best you put it back then I guess. Link to comment Share on other sites More sharing options...
camaso Posted July 4, 2006 Share Posted July 4, 2006 Whatever I try, the images I upload get displayed at their full size. The orientation of the images is mixed (landscape or portrait). What I need is a thumbnail of 250px in width and proportionally sized height. The Popup-image should then be 400px in width. So I scaled all images to 400px and uploaded them. Now they are always 400px wide, whatever I try (0 or blank or any value for hight and "Calculate Image Size" to false). If I set "Calculate Image Size" to true, the images disappear as well as the Logo in the top left corner. Can anyone help please? Thanks Ralph Link to comment Share on other sites More sharing options...
Diajejo Posted July 6, 2006 Share Posted July 6, 2006 What I did to get different sizes, one for the catalog pic and a larger image was download the 2 different sizes of the same picture. My catalog size pics are 100 pix high. For the inlarge image, I sized that at 250 pix high. I used Gimp program for that. Works great. Thanks, Diana California Wine Sellers www.cawinesellers.com Link to comment Share on other sites More sharing options...
camaso Posted July 6, 2006 Share Posted July 6, 2006 What I did to get different sizes, one for the catalog pic and a larger image was download the 2 different sizes of the same picture. My catalog size pics are 100 pix high. For the inlarge image, I sized that at 250 pix high. I used Gimp program for that. Works great. Thanks, Diana California Wine Sellers www.cawinesellers.com $ Thanks for your reply. Unfortunately I don't understand, HOW you did it. Did you upload 2 differently sized images to your server in two different folders? How did you make the link to the larger one? And how are your settings in the Control Panel? I hope, you can help me! Greets Ralph Link to comment Share on other sites More sharing options...
Diajejo Posted July 8, 2006 Share Posted July 8, 2006 Hi, On my desktop I have a image folder. This is where I keep all my images I use for my cataloge. I use Gimp image program, its free. I make two sizes of each image. If you view any of my images just right click on properties and you can see the sizes I use. To keep them uniform I have them at 100 pixels high for the small image. In the new product page, or editing any product, I use small image and popup image for my catalog. To upload an image click on small or popup and it opens the 'insert image' window. Click on browse and find the folder you keep you images in. Find image, click on that image, then click on open, then click on upload. This uploads the image into your folder of your catalog. Then scroll down and find the image and click ok. Remember to name your images differently. Small and large or the like. I dont control the size of my images in the control panel. I size them with my image program. I hope this helps. If you have any more questions, just let me know. Diana $Thanks for your reply. Unfortunately I don't understand, HOW you did it. Did you upload 2 differently sized images to your server in two different folders? How did you make the link to the larger one? And how are your settings in the Control Panel? I hope, you can help me! Greets Ralph Link to comment Share on other sites More sharing options...
ajbird Posted July 14, 2006 Share Posted July 14, 2006 arghh genious this has been driving around the twist since i installed!! thank you Link to comment Share on other sites More sharing options...
shubbert Posted July 16, 2007 Share Posted July 16, 2007 Also here is a link that I'm trying to get pics to be seen and with no success. I’ve uploaded the pics inside the images folder and the path I get when I right click on the image goes to store then images (http://resourcesonline.us/osCommerce3/catalog/images/store/Audio%20Cables/FUL1_BE112234-10.jpg) I’m very clueless as t how t get these pictures to view. Here is the link to my ecommerce page: http://resourcesonline.us/osCommerce3/catalog/ I have even went as far as creating a folder named store in the images folder to see if the path would fall into place. But for some reason no luck. I have a huge project that is coming up that will require about 5000 products and I do not want to take that on without knowing how to get thee picture viewable. PLEASE HELP ANYONE! I would certainly appreciate it. Link to comment Share on other sites More sharing options...
Guest Posted July 20, 2007 Share Posted July 20, 2007 Also here is a link that I'm trying to get pics to be seen and with no success. I’ve uploaded the pics inside the images folder and the path I get when I right click on the image goes to store then images (http://resourcesonline.us/osCommerce3/catalog/images/store/Audio%20Cables/FUL1_BE112234-10.jpg) I’m very clueless as t how t get these pictures to view. Here is the link to my ecommerce page: http://resourcesonline.us/osCommerce3/catalog/ I have even went as far as creating a folder named store in the images folder to see if the path would fall into place. But for some reason no luck. I have a huge project that is coming up that will require about 5000 products and I do not want to take that on without knowing how to get thee picture viewable. PLEASE HELP ANYONE! I would certainly appreciate it. I don't know if this means anything, but your directory and file naming may be creating the problem. Try two things. Take the space out of Audio Cables or replace it with an underscore... and try lower case letters for your all your folder and filenames. I've seen it break down cuz of this before. -Amy Link to comment Share on other sites More sharing options...
Moleiro Posted July 22, 2007 Share Posted July 22, 2007 I'm sorry but I still can't do it! I'm getting really desperated, because I need this so much. All I need is to specify a file for the small image and other to the big image (the one that appears after CLICK TO ENLARGE). Is it possible to do? Do I have to install any kind of Add On? Thank's in advance. Hi, On my desktop I have a image folder. This is where I keep all my images I use for my cataloge. I use Gimp image program, its free. I make two sizes of each image. If you view any of my images just right click on properties and you can see the sizes I use. To keep them uniform I have them at 100 pixels high for the small image. In the new product page, or editing any product, I use small image and popup image for my catalog. To upload an image click on small or popup and it opens the 'insert image' window. Click on browse and find the folder you keep you images in. Find image, click on that image, then click on open, then click on upload. This uploads the image into your folder of your catalog. Then scroll down and find the image and click ok. Remember to name your images differently. Small and large or the like. I dont control the size of my images in the control panel. I size them with my image program. I hope this helps. If you have any more questions, just let me know. Diana Link to comment Share on other sites More sharing options...
NinjaNeen Posted July 24, 2007 Share Posted July 24, 2007 Hi, On my desktop I have a image folder. This is where I keep all my images I use for my cataloge. I use Gimp image program, its free. I make two sizes of each image. If you view any of my images just right click on properties and you can see the sizes I use. To keep them uniform I have them at 100 pixels high for the small image. In the new product page, or editing any product, I use small image and popup image for my catalog. To upload an image click on small or popup and it opens the 'insert image' window. Click on browse and find the folder you keep you images in. Find image, click on that image, then click on open, then click on upload. This uploads the image into your folder of your catalog. Then scroll down and find the image and click ok. Remember to name your images differently. Small and large or the like. I dont control the size of my images in the control panel. I size them with my image program. I hope this helps. If you have any more questions, just let me know. Diana I'm also not able to get normal size and thumbnail sizes for my product images. I read this post from Diana over a year ago and I am not seeing what she's describing. Maybe the admin panel has changed since then, could someone please confirm this ? I've only been using this a few weeks so unable to know. Eg Diana says "To upload an image click on small or popup and it opens the 'insert image' window. " The only thing I see is 'Products Image' field and a Browse button. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.