White border around the thumbnails

OK, here we go. I'm giving these ratios to 6 decimal places, so you can see for yourself.

blackhalo wrote:Alright, here's the proof... the original file size is 602x576...

Aspect ratio: 1:1.045139

1st Try... 387x370 (red strip on right side):

Aspect ratio: 1:1.045946

2nd Try... 1px less as suggested by Fido... 386x370 (red strip on bottom now):

Aspect ratio: 1;1.043243 -- and the suggestion I made was to reduce the HEIGHT by 1 pixel. You reduced the width.

3rd Try... lets try the other dimension... 387x369 (both side borders are 2px - SUPPOSED to be 1px!!):

Aspect ratio: 1:1.048780

4th Try... getting a little closer to success... 386x369 (right side still showing 2px):

Aspect ratio: 1:1.046070

Last Try... this should be it, the perfect ratio... 385x369 (F*CK!!!!):

Aspect ratio: 1:1.043360

So please explain to a graphic/web designer of 15 years...

Is that all? I've been involved in computerised publishing for 35 years.

With an original size of 602 x 576, you are NEVER going to get the result you want.

ZenCart does NOT resize images the way you claim it does. It requires a 3rd party add-on (Image-Handler) to do it.

blackhalo wrote:Not to mention, isn't this a CORE HACK???
So we've got a necessary core hack, to fix something that affects EVERY single OpenCart user.

The "Image-Handler" 3rd party module for ZenCart requires core hacks (or you can use the replacement files that are included). You don't seem to have a problem with "core hacks" in your ZenCart store. Why is it an issue for you with OpenCart?

If you're so concerned about the "red border" you're getting, change the background colour in the OpenCart image handler to match the background colour of your website. Problem solved!

blackhalo wrote:Did you write the handler code or what?
Is my complaint some sort of offense to your code?

No. I didn't write the handler code.

blackhalo wrote:OpenCarts image handling sucks compared to ImageHandler...
especially when you point out that all I should do is hack the core to solve my problem.

fido-x wrote:The "Image-Handler" 3rd party module for ZenCart requires core hacks (or you can use the replacement files that are included). You don't seem to have a problem with "core hacks" in your ZenCart store.

You obviously didn't read this bit.

Core hacks or replacement files -- what's the difference?

Answer: Not much!

I've searched for a way to get rid of that thumbnail borders and found this article. I'll post my solution here just in case somebody happens to search for it here.

There's a lot of images of different size in my OpenCart shop and I didn't want any of them to have a border. So I changed the way OpenCart makes thumbnails. Instead of scaling the image by it's bigger dimension (to fit it into desired size) i've modified the script to scale it by it's smaller dimension. So basically it zooms the thumbnail up a bit to clip white borders. It also clips parts of image but that's a sacrifice for removing the borders.

So, to apply solution, go to system/library/image.php and replace this: With this: So you only change "min" to "max".

Don't forget to delete everything in your image/cache directory after that.

And for users of vQmod i've attached a file with this modification.

Have a good day.

Hi,

Followed this thread as my thumbnails were also showing white around the edges and it was truly annoying.
The fix provided by ax23w4 worked great but now the bigger pictures within the 'lightbox' are also zooming in and
I would like for that not to happen...it degrades the picture and crops out important parts.
Is there any way to regain fullsize pics (not cropped) when viewing the fullsize pic only while leaving the thumbnail fix
in place?

I'm using Version 1.5.1.3, the website is http://metahwonders.com/index.php (you must use the 'index.php' as the site is not live yet and resides behind an index.html). Specifically, http://metahwonders.com/index.php?route ... duct_id=79 . The two pictures of the upright case should be 375x500px when viewed in the lightbox. There are other examples but this one gives the idea of what I'm having the problem with.

Thanx,
Lolly

The solution is much easier than all of this discussion around hacking core code and figuring out aspect ratio's (although I agree the image resizing library should work when you shrink the image proportionally in photoshop or some other calculating software).

The solution is:

1. in the admin section of your site, set the width and height to the actual original image size (for example, if your original image size is 360 x 588, simply put that in there even if you plan on making the image smaller).

2. go to your stylesheet.css and locate these two CSS rules:
.product-grid > div
.product-grid .image img

3. declare a width for both of the above rules (set the width to your new image size that you were originally trying to plug into the back end admin).

Hope this helps!

ax23w4 wrote:I've searched for a way to get rid of that thumbnail borders and found this article. I'll post my solution here just in case somebody happens to search for it here.

There's a lot of images of different size in my OpenCart shop and I didn't want any of them to have a border. So I changed the way OpenCart makes thumbnails. Instead of scaling the image by it's bigger dimension (to fit it into desired size) i've modified the script to scale it by it's smaller dimension. So basically it zooms the thumbnail up a bit to clip white borders. It also clips parts of image but that's a sacrifice for removing the borders.

So, to apply solution, go to system/library/image.php and replace this:

Code: Select all

$scale = min($width / $this->info['width'], $height / $this->info['height']);

With this:

Code: Select all

$scale = max($width / $this->info['width'], $height / $this->info['height']);

So you only change "min" to "max".

Don't forget to delete everything in your image/cache directory after that.

And for users of vQmod i've attached a file with this modification.

Have a good day.

THANK YOU VERY MUCH!

Just perfect!

ax23w4 wrote:I've searched for a way to get rid of that thumbnail borders and found this article. I'll post my solution here just in case somebody happens to search for it here....

You may find this a tidier fix to the problem...
My client wanted the white gone around non-square images. The images used are generated programatically and stored in a cache file. One option is to change the programming to set the colour to match your site background colour so that it blends nicely.. you still get the square border.. but that can be changed to match as well elsewhere.
To change the colour around your images:
system/library/image.php
around line 81 AND 84 change
imagecolorallocatealpha($this->image, 255, 255, 255, 127)
imagecolorallocate($this->image, 255, 255, 102)
TO, for EXAMPLE:
imagecolorallocatealpha($this->image, 115, 177, 247, 127)
imagecolorallocate($this->image,115, 177, 247)
... this gives a baby-blue colour
I used http://www.binaryhexconverter.com/hex-t ... -converter to convert my HEX colours to RGB code
Leave the 127 alone (max transparency- used for png's). DELETE the cache images!! (Since my fix I have spotted that this has been solved in the past in this forum [by fido-x for example]) Happy Coding.

I know this is an older post, but I thought i would explain why this is happening. I glanced at the system/library/image.php and found that if the file you upload is a .png it will automattically resize it with a transparent background, and if you uplolad a file that is anything else like .gif or .jpg then it will put a background on them because those formats do not support transparancy.

There are several ways to fix this.
1. Open file in photoshop and save as a .png
2. use a Online Picture Converter
3. use Pixlr to save your image as a .png. similar to photoshop

Hope This Helps