thumbnails & enlarged images

[lightningjkb]

Howdy,

 

I've been looking through the contributions, but maybe I'm missing one. Is there one that will set things up so I use a folder for thumbnails and a folder for the enlarged images and use that for the "click to enlarge" feature instead of the current method? My problem with a lot of the contributions and such I've found is that they are working from the standpoint that all the images are the same size. That's not so in my case.

 

Thanks,

Janice

[rescamilla]

This contrib works for exactly what you describe:

http://www.oscommerce.com/community/contributions,1953

 

I will save you some hassle after you install the contrib with this tip:

When you upload your product pic from the admin add a product screen, be sure it is 100x80 is size. Then upload the large size image into the "big" directory manually(you create this directory when you install the contribution). The contrib does not supply a way to upload the large image via the admin, you need to FTP the file in yourself. And, last but not least, make sure that the large image has the exact same name as the small image.

 

-Ray

[nate_02631]

Here's an easier contrib if you have PHP w/GD 2.0 image library installed (works with older versions w/minor tweaks - see related discussion forum)...

 

http://www.oscommerce.com/community/contributions,2226

[peterr]

Hi Nate,

 

Thanks for the link to the "on the fly" thumbnail creator.

 

I have noticed that the osC contributions I have seen for thumbnails rely on images sizes being 'proportional'. By that I mean most soites have square images, rectangular images, and anything lse in between.

 

I have been 'experimenting with PHP/GD to:

 

1. Create a (background) canvas, can be any colour

2. Place the image on top of the canvas, have it centered.

3. Then do the thumbnail.

 

This way, hopefully, I won;t get any "out of proportion" images, for example, say an image is 432 x 237, it won't go to 100 x 80 without being either squashed or stretched, in fact it looks terrible. On the other hand, a 400 x 320 will thumbnail down nicely.

 

But, as we know, ....... all images are not the same size, and it is a lot of work to make them so.

 

The 'canvas' approach, I think may be a good solution to the 'proportion' problem, and if the canvas colur is the same as the browser background, no one will know there is a canvas there, the images will "look" all different sizes/shapes. :D

 

It's a background project, hopefully it can be an 'add-on' to one of the existing contributions (or there may already be one that does it, but I haven't found one).

 

Peter

[lightningjkb]

This contrib works for exactly what you describe:

http://www.oscommerce.com/community/contributions,1953

 

I will save you some hassle after you install the contrib with this tip:

When you upload your product pic from the admin add a product screen, be sure it is 100x80 is size.

See, that's the problem. This is assuming that my images will look right at 100x80 Not all are that size. And I'd have to go through 100 images and resize them all. Even so, to force some of them to that size would cause some nasty distortion on the image. Or I'd have to play with a lot of cropping, etc. to get them looking decent and all at the exact same size. It's being forced to make all my images the exact same size that I'm trying to avoid.

[lightningjkb]

Here's an easier contrib if you have PHP w/GD 2.0 image library installed (works with older versions w/minor tweaks - see related discussion forum)...

 

http://www.oscommerce.com/community/contributions,2226

Now that looks like it might just do the trick. I'll check it out. Thanks!

[nate_02631]

I have noticed that the osC contributions I have seen for thumbnails rely on images sizes being 'proportional'.

The contribution I mentioned does the scaling for you... Ideally, you would set the small image width/height in your osC config to be the same, as those values become the *max* width and height of the scaled image.

It's being forced to make all my images the exact same size that I'm trying to avoid.

Mine does the scaling and there's a nifty trick to have an intermediate-size image for the product page - all without having extra t/n's all over the place! (But you've probably figured that out by now!)

The 'canvas' approach, I think may be a good solution to the 'proportion' problem

If you get a gander at the the scaling code, it basically reads the image size and does the scaling using ratios... I do use canvasing as the default "canvas" color when you create a t/n on the fly is black, and rounding errors were sometimes causing thin black lines on the right/bottom of thumbnails... (canvas color can be set at the top of product_thumb.php)

 

I would like to work out transparencies, but the GD 2 library does not include GIF output (liscencing issues) so it has to be done with PNG output (with either GIF or PNG input - not sure if your could specify a "transparent" color from a JPG source)

[peterr]

Hi Nate,

 

The contribution I mentioned does the scaling for you... Ideally, you would set the small image width/height in your osC config to be the same, as those values become the *max* width and height of the scaled image.

 

I haven't used the contribution, I only had a look at what it does, so pardon my ignorance on these matters. :D

 

1. We do not want scaling, because as I said previously, any sort of scaling or resizing, even when keeping the aspect ratio, will _definitely_ result in your (final) thumbnails/scaled/resized images being different sizes, unless the original images are all exactly the same sizes to begin with.

 

2. If the (thumbnailed) images are all the same size, then setting the small image dimensions in osC 'admin' will result in no stretching or squashing, the thumbnail + the (osc admin setting) will result in a proportional sized image.

 

3. If the (thumbnailed) images are _not_ the same size to begin with, you are in trouble, as far as I can see, because the _final_ result will not be in proportion. However, as always, I stand to be corrected on any of this, I'm still learning, and always will be. :D

 

4. By using the 'canvas' approach, any sort of scaling, resizing, thumbnailing, plus the osC small image settings, will _always_ result in the final images being completely in proportion.

 

I do use canvasing as the default "canvas" color when you create a t/n on the fly is black, and rounding errors were sometimes causing thin black lines on the right/bottom of thumbnails... (canvas color can be set at the top of product_thumb.php)

 

So, .... do these thumbnail contributions allow us to (i) first place the original image on a canvas, using a colour of our choosing, and then (ii) specify the aspect ratio and (iii) create the thumbnails.

 

For this all to work out 100% proportional (remember the osC 'admin' small image size factoring into this), as far as I can see, the canvas size needs to be of a pixel height and width equal to the largest dimensions of all the (original) images.

 

I'm still curently doing some testing with all this.

 

This is what the testing is showing when the "canvas" approach is not used:

 

Dimensions shown in brackets are width/height

 

Parent Directory (original images)

======================

 

im43degas.jpg 23k (223 x 400)

im52sisley.jpg 26k (283 x 400)

im54sisley.jpg 26k (400 x 294)

im57sisley.jpg 22k (327 x 400)

 

thumbnails/

=======

 

tn_im43degas.jpg 2k (56 x 100)

tn_im52sisley.jpg 3k (71 x 100)

tn_im54sisley.jpg 2k (100 x 74)

tn_im57sisley.jpg 2k (82 x 100)

 

Now, size wise, great, the thumbnails have reduced down a lot, no real apparent loss in quality either, or any perceived clarity loss, the thumbnails are still quite clear.

 

This was done using an aspect ratio of 25 %

 

Now, let's bring in the osC 'admin' small image dimension factor .........

 

If we use 80 x 100, it will suit the last thumbnail (nearly), but the other 3 will be either squashed or stretched. No matter what setting we use, posibly well over 90% of the thumbnails will be out of proportion, after the 'osc admin image effect' is factored in.

 

Considering we have 57 images, and many more to load, I can only see that using a canvas approach initially, is the only solution for us. I don't see this approach as being difficult, we have already been able to do it with a small subset of images, and the code needs to be enhanced so that a complete directory would be traversed, do the canvas, do the thumbnail, and no matter what osC admin small image setting is applied, the final thumbnail will always be proportional,

 

......... as long as the setting is proportional (aspect ratio) to our canvas size. :D

 

Peter

[O.com]

hi,

 

im trying to use this contribution... but it doesnt seem to be working. i get a parse error on line 187

 

am i doing something wrong? am i skipping a step?

 

 

any help would be apperciated. thank you.

[nate_02631]

peterr, I don't think you get it... Yes, of course the thumbnails will be different sizes - but they will all be the same height or width depending on the overall aspect ratio. Whatever is the longer of the two dimensions will be set to the small image width/height dimension in your config. It doesn't matter if the actual image is 100x100 or whatever as long as the overall proportions are correct which they will always be with this mod.

 

O.com, I assume you mean 187 of html_output.php? You pasted something in wrong - debug or give it another try.

[peterr]

Nate,

 

peterr,  I don't think you get it... Yes, of course the thumbnails will be different sizes - but they will all be the same height or width depending on the overall aspect ratio.  Whatever is the longer of the two dimensions will be set to the small image width/height dimension in your config. It doesn't matter if the actual image is 100x100 or whatever as long as the overall proportions are correct which they will always be with this mod.

 

I realise it is only natural that you defend your own contribution, that's understood. :D

 

Here is a question for you. Using the image sizes below as follows:

 

Parent Directory (original images)

======================

 

im43degas.jpg 23k (223 x 400)

im52sisley.jpg 26k (283 x 400)

im54sisley.jpg 26k (400 x 294)

im57sisley.jpg 22k (327 x 400)

 

could this contribution create thumbnails that are, for example, either:

 

50 x 50

100 x 100

63 x 63

127 x 127

200 x 200

 

WITHOUT loosing the aspect ratio ?

 

That is, _completely_ in proportion, no stretching, no squashing, 100% proportional. :D

 

Peter

[nate_02631]

If you're proposing to change a 223 x 400 to 100x100 thumbnail then you *are* losing the aspect ratio... This mod would scale the "long side" to 100 pixels (in this case the 400px dimension) and would scale the 223 by the proper ratio (in this case .55 of the 400 px dimension or 55 pixels)... The width height ratios of the image is maintained - however the width and height of the thumbnails would not be the same - that doesn't make any sense, really...

[peterr]

Hi Nate,

 

Thanks for clearing that up, it's now obvious that the contribution would not meet our requirements.

 

Thanks,

 

Peter

[nate_02631]

Odd requirements that they are ;) Why on earth would you want the thumbnails with all the extra white space, anyway? :huh:

[sharkey]

Nate, that is an awesome contribution, thanks!

 

I was worried I'd have to manually resize all the images but then I found this.