Image Resize Whitespace

[Upswings]

Hello

 

When adding a category or product image, Prestashop sometimes adds whitespace around the image, as shown below. Most of my client's product images are at the correct aspect ratio, so resize down nicely. However, she seems insistant on using smaller images at times, screwing things up.

 

 

My client is a bit of a technophobe, so rather than waste my time trying to explain aspect ratio to her I would like to change the colour from white, to yellow as per the page background so it isn't quite as noticeable.

 

I know in previous versions (perhaps pre 1.5) this was controllable using image.inc.php, but this file is deprecated in Version 1.5 so this solution will no longer work.

 

Does anyone know how image resizing is handled now, and where I need to look to change this colour value?

 

Many thanks!

[yaniv14]

Can you attach a link to your site?

[Upswings]

Unfortunately not, the client has requested that it is password protected and I am not authorised to release the URL.

 

However, you shouldn't really need it for this issue? Appreciate your help but you shouldn't need access to advise?

[Upswings]

Just a little bump

[exposeclothing]

anyone figure this one out?

[yaniv14]

Maybe the cropper js css? I am just guessing because I saw some white background in the css.

Also maybe you can try upload PNG instead of JPG, I know that jpeg cannot have transparent background and PNG can. again I am just firing what ever I can think off.

Edited November 13, 2012 by yaniv14 (see edit history)

[exposeclothing]

Thanks Yaniv14, ill go "splunking" through my test store, and see what i can find

[Dh42]

Ok, this is how it works. There are several image sizes that prestashop uses. You can find them in the preferences >> images section of your back office. Your best bet is to have everything set at 1:1 aspect ratio. If not, all of the images have to match the same aspect ratio and you will not get any whitespace around your images. But say you need everything 4:3 but one page needs to have a cropped 1:1 square image. What you would do is upload your images and have them in the 4:3 format. then yourself you can crop an image and upload it to where you need the 1:1 image to be. You can right click on the image in the front of the shop and see the location you would need to upload the new image. That is how you use image overrides.

[ihkwyh]

You should be looking for #fancybox dash whatever (assuming you're using .png files with a transparent background). If you are using .jpg files change the background in the images. then refer to the #fancybox

[exposeclothing]

iv been altering/editing the images myself, to get them the same height & width to the sizes in the prestashop preferences for images, but it still re-sizes them, and adds the white background.

 

All my images will be portrait type images, so i have the length px set higher than the width in preferences, and the images i upload are set the same, but it still re-sizes. So I tried removing the coloured border of the image block (i had a colour 1px border around my product image), and using photoshop, created the border around the actual image i want displayed, then attempted to increase the width of the image and fill with black so prestashop doesn't re size it but its still resizing the images. Do i have to override every single image?

here is the site, and one of the images im using the test, then ill just use that size for all images... but you can see what i mean by the white, and how iv attempted to "create" the border look. Just not getting far thats all lol

 

http://exposeclothing.com.au/index.php?id_product=115&controller=product

Edited November 14, 2012 by exposeclothing (see edit history)

[doublesam27]

To change the color of the white background of the product images, you need to go to:

classes/imagemanager.php

 

line 174, you define the color ((it was 255, 255, 255), I placed 0, 0, 0

$transparent = imagecolorallocatealpha($dest_image, 0, 0, 0, 127);

 

line 179 you need modify the color too

$white = imagecolorallocate($dest_image, 0, 0, 0);

 

I hope that will help!

[exposeclothing]

Hi Sam, that does look extremely promising within that file, but i changed the lines as you mentioned, and nothing has altered. Have you done this yourself, and was it successful for you? If yes perhaps you could overlook this and point out any errors i may have made? also am i correct that the Rgb value for black is 0 0 0 ?

 

here is line 174 - 179 ...

 

$transparent = imagecolorallocatealpha($dest_image,0 ,0 ,0 ,127);

imagefilledrectangle($dest_image, 0, 0, $dst_width, $dst_height, $transparent);

}

else

{

$white = imagecolorallocate($dest_image,0, 0, 0);

[Dh42]

Ok, check this out, this is what I was talking about using custom images. Go to this page and look at the category images http://smiletimedental.org/category.php?id_category=2

 

Then click into a product.

 

http://smiletimedental.org/product.php?id_product=89&prods=

 

See how they are running in two different aspect ratio's.

 

Here are the raw images

http://smiletimedental.org/img/p/2/0/1/7/2017-home.jpg

 

http://smiletimedental.org/img/p/2/0/1/7/2017-large.jpg

 

No whitespace on them and they take up the full box.

[exposeclothing]

Hi designHaus42,

 

Thank-you for your response. I see the how the images work etc, and i assumed they run at different ratios because their different "image types" large_default, and home_default... i don't know, its all confusing to me....i am blonde =)

 

I do think i know where iv gone wrong, i think the image was to large, so it wasn't being re-sized properly, i have been playing around with one of the images that wasn't being scaled properly. I slightly made the image bigger (cm x cm wise) , and reduced the px/cm and now it shows in the store as a large image, without the white edging....

 

also using firebug i noticed i did manage to change the background of the image from white to black, but not the "scaling area" ... but anyway, im just going to use the image that has turned out well as a template for all the other images and just crop/re size to fit the same dimensions.

 

I truly appreciate all the assistance and advice provided.... prestashop has such a great community base,

 

cheers for your time !!

Once again

[Dh42]

What i did was manually upload the sizes that I wanted by passing the whole prestashop image upload.

[exposeclothing]

Oh i see, directly to a file within your webhost, then redirected prestashop to show that image ?

[Dh42]

Actually the easiest way to do it is use prestashop to upload an image for your product. Then which ever image you do not like, right click on it and see where it is stored. Then upload a new image to that location with the same name thru your ftp account and it will replace it.

[win83max]

Hello,

 

First of all, I apologize in advance for my English.

order cropper images (products, categories, .....) in prestashop 1.5, you must file maudifier classes / ImageManager.php the following code which is line 153 :

 

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff > $height_diff))

 

With the following code:

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff < $height_diff))

 

Then go to your Back Office> Preferences> Images, and rebuild your photos.

 

I hope this has helped you.

 

Cordially

Mathieu

------------------------------------------------------------------------

En français :

Bonjour,

 

Tout d'abord, veuillez m'excuser par avance pour mon anglais.

pour pouvoir cropper vos images (produits, catégories, .....) sous prestashop 1.5, il vous faut maudifier le fichier classes/ImageManager.php le code suivant qui est à la ligne 153 :

 

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff > $height_diff))

 

Par le code suivant :

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff < $height_diff))

 

Puis rendez vous dans votre Back Office > Préférences > Images, et regénérez vos photos.

 

En espérant que ceci vous aura aidé.

 

Cordialement

Mathieu

[scam36]

So, as far as I have understood your question, Upswings, just change your Prestashop>pref>images> to 'always use png'.

 

Then, change all your jpg pictures to png with your GIMP. Upload them to your products, and SOLVED !

no need to change any code anywhere (presta 1.5.4)

[taniacr]

Hello,

 

First of all, I apologize in advance for my English.

order cropper images (products, categories, .....) in prestashop 1.5, you must file maudifier classes / ImageManager.php the following code which is line 153 :

 

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff > $height_diff))

With the following code:

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff < $height_diff))

Then go to your Back Office> Preferences> Images, and rebuild your photos.

 

I hope this has helped you.

 

Cordially

Mathieu

------------------------------------------------------------------------

En français :

Bonjour,

 

Tout d'abord, veuillez m'excuser par avance pour mon anglais.

pour pouvoir cropper vos images (produits, catégories, .....) sous prestashop 1.5, il vous faut maudifier le fichier classes/ImageManager.php le code suivant qui est à la ligne 153 :

 

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff > $height_diff))

Par le code suivant :

if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff < $height_diff))

Puis rendez vous dans votre Back Office > Préférences > Images, et regénérez vos photos.

 

En espérant que ceci vous aura aidé.

 

Cordialement

Mathieu

 

 

Thank you so much Mathieu   Works in 1.6. Except it's in line 166