image - Thumbnail tips

[Ramesh]

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

[Ramesh]

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]

[DougB]

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.

[loxly]

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

[Ramesh]

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

[idbeu]

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.

[Guest]

I belive that contemporary thory is 96dpi in current versions of windows, and 72dpi in Mac.

[Ramesh]

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.

[maz]

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

[Ramesh]

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 ;-)

[loxly]

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

[maz]

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.

[Guest]

...

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

[Guest]

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.

[Guest]

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

[Guest]

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.

[camaso]

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

[Diajejo]

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

[camaso]

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

[Diajejo]

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

[ajbird]

arghh genious

 

this has been driving around the twist since i installed!! thank you

[shubbert]

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.

[Guest]

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

[Moleiro]

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

[NinjaNeen]

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.