A FIX for the Image Resize "white space" issue

[Jesse]

LET ME SUMMARIZE THIS TOPIC.... I have posted two different modifications here. I'll call them Mod1 and Mod2. The first one, Mod1, presented in this first post demonstrates a simple code change that will cause cropping of larger images. I don't recommend this change unless you want it. Mod2 on the other hand, will ensure even the smallest uploaded images are shown properly in thumbnail images (without excess white-space). The only drawback with Mod2 is that watermarks on images probably wont work. Using both Mod1 and Mod2 will guarantee no white-space ever, but "tall" images may be cropped more than you'd like. Your choice.


The white border around my thumbnails after they've been re-sized has bothered me, so I set out to fix it today. This doesn't help with really small pics, but it does with larger ones.

Currently, it looks like thumbnails are re-sized so that no cropping occurs. I suppose that's good, but when the re-sized image is overlaid on the new white background image, this can create an unsightly white border (as called the "white space" issue).

To fix this, I've reversed the way the image is re-sized, ensuring that no empty space exists, with some minor cropping to the thumbnail only. I have not tested this with watermarks.

THE FIX - this is a simple change, going from the characters >= to <.

Edit file: /oc-includes/osclass/classes/ImageResizer.php

On line 73, change:

Code: [Select]

                if(($w/$h)>=($width/$height)) {
to

Code: [Select]

                if(($w/$h)<($width/$height)) {

My initial tests show this works. Still some more playing to do, but so far so good!

I've attached an image showing two "before" and "after" examples. One taken from my carousel, and one from "Latest Ads".

[Juan Ramón]

But.. with this change you resize the image?

[Jesse]

Yes, this still re-sizes the pictures similar to before, but with slightly more cropping (better cropping in my opinion), that ensures no white space (as long as pics aren't too small). There is still a white space issue with small images, but that is OK for now. :-) I'll keep working on this as I have time.

Try it out, it works great! 

[Jesse]

Juan,

Here's a visual comparison of the current OSClass upload/re-size and my slight modification. I used a "vertical" photo for this, which is going to be cropped more since it's being "fit" into a horizontal ratio. There is of course not as much cropping on a normal "horizontal" photo. I used this to emphasize what it does differently.

UPDATE: I see the problem why if you upload a 240x200px image why it won't remain that size once it makes it to the final thumbnail image. As you prob already know, the image starts out at the 'large' size, then goes to 'preview' then 'thumbnail' sizes. At the large size, the original uploaded 240x200px image remains scaled 1:1 as it's placed on the new 'white' image... so no scaling. But this 'new' image is then scaled down to create the 'preview' image, then scaled again to create the thumbnail image, preserving the 'white space'. I believe you said this was for making use of the watermark. BUT... each image should be able to be generated separately, which would preserve the full 240x200px image size of my original 'test' image. I'll continue to play....

[Jesse]

SOLVED!

My hunch was correct.... I was able to create all three images (large, preview and thumbnail) from the same original image.

Simple fix... edit file ItemActions.php located in /oc-includes/osclass/.

On lines 1045 and 1050, change "$normal_path" to-> "$tmpName".


I've attached two sets of example images. The first one I used an image 200x240 pixels, which is the exact size of my thumbnails set in the Dashboard. The 2nd set used a larger image, 800x600px.

And notice, NO WHITE SPACE AT ALL in the thumbnail images!!! 

Some notes: I have not tested this with watermarks, but I don't plan on using them, so it does not matter to me personally. Also, by changing the image path names above, I don't know if this has any unknown consequences. So far, it works great!

[Needle]

Nice work! 

[Jesse]

Thanks! It was really simple actually as you can see. But just took some "hunting". :-)


Notes to all: If you don't like the 'cropping' that occurs, just don't use my modification shown in my 1st post.
Everyone should benefit from the 2nd mod shown just above. Just play with them with different image sizes and ratios and see what you like.

[SuperAtic]

Work great!! Nice work! 

Thank you very much Jesse!

 

[fareed]

Replace the lines in oc-includes/osclass/classes/ImageResizer.php,

Code: [Select]

if(($w/$h)<($width/$height)) {
                    //$newW = $width;
                    $newW = ($w > $width)? $width : $w;
                    $newH = $h * ($newW / $w);
                } else {
                    //$newH = $height;
                    $newH = ($h > $height)? $height : $h;
                    $newW = $w * ($newH / $h);
                }
with

Code: [Select]

if($w >$width) {
                    $newW = $width;
                    $newH = $h * ($newW / $w);
                } else {
                    $newH = $height;
                    $newW = $w * ($newH / $h);
                }
And the white spaces will be less and the thumbs will look better. Hope this works for u guys.

[zioweb]

Thank you I solved with your help!!!!

[anaya2007]

not work on repurpose theme, how can we do please?

[marxxx]

don't work on v3?

[Legion]

i got this error

Fatal error: Uncaught exception 'Exception' with message '/www/offersvalley.com/oc-content/uploads/42.jpg does not exist!' in /home/u983896123/public_html/oc-includes/osclass/classes/ImageResizer.php:34 Stack trace: #0 /home/u983896123/public_html/oc-includes/osclass/classes/ImageResizer.php(28): ImageResizer->__construct('/www/offersvall...') #1 /home/u983896123/public_html/oc-includes/osclass/ItemActions.php(1283): ImageResizer::fromFile('/www/offersvall...') #2 /home/u983896123/public_html/oc-includes/osclass/ItemActions.php(201): ItemActions->uploadItemResources(Array, 144) #3 /home/u983896123/public_html/item.php(140): ItemActions->add() #4 /home/u983896123/public_html/index.php(91): CWebItem->doModel() #5 {main} thrown in /home/u983896123/public_html/oc-includes/osclass/classes/ImageResizer.php on line 34

[zepht]

SOLVED!

My hunch was correct.... I was able to create all three images (large, preview and thumbnail) from the same original image.

Simple fix... edit file ItemActions.php located in /oc-includes/osclass/.

On lines 1045 and 1050, change "$normal_path" to-> "$tmpName".


I've attached two sets of example images. The first one I used an image 200x240 pixels, which is the exact size of my thumbnails set in the Dashboard. The 2nd set used a larger image, 800x600px.

And notice, NO WHITE SPACE AT ALL in the thumbnail images!!! 

Some notes: I have not tested this with watermarks, but I don't plan on using them, so it does not matter to me personally. Also, by changing the image path names above, I don't know if this has any unknown consequences. So far, it works great!

Nice work. I can't see these lines. I use 2.3.5 version of Osclass.

[Donal]

i have the latest version of OSClass installed. like all updates code moves, but for love or money i can not find "$normal_path"so i can change it  to-> "$tmpName".

Does anyone know the lines that its located,

Thanks