Formatting Product Images

[voigt.jeremy]

I am trying to re-size the product images in my template.

 

http://conversationsacrossborders.org/presta/product.php?id_product=47

 

The images I have are smaller and I want to box around them to have less white space between the border and the image. I've been experimenting with product.css, but nothing seems to change the padding.

 

Any help is greatly appreciated.

[Mike Kranzler]

I am trying to re-size the product images in my template.

 

http://conversations...p?id_product=47

 

The images I have are smaller and I want to box around them to have less white space between the border and the image. I've been experimenting with product.css, but nothing seems to change the padding.

 

Any help is greatly appreciated.

 

Hi voigt.jeremy,

The image in the link you provided above is actually at full size, the white box is actually part of the uploaded file. If you would like to have it displayed better, you will need to crop the source file to remove some of that white space, and then re-upload it.

 

I hope this helps.

 

-Mike

[voigt.jeremy]

I see that now too, when I click "view image" I can see the white box. What I don't understand is that the white box is not part of the original file. I even double checked with the file on my computer. Is it somehow being added when I upload the file through the back office?

 

I just looked at the file in the product page on the back office and the white box is not there. Only the black and white head shot. No way to crop the white space if it does not exist in the original file.

 

Suggestions?

 

 

Thanks for the quick reply.

 

Jeremy

[Mike Kranzler]

Hi Jeremy,

Can you please attach the file here? I'll be happy to take a look. If that is, in fact, the case, it's possible that the file is just too small, so PrestaShop is compensating to avoid posting a blurry file.

 

-Mike

[voigt.jeremy]

That might be the case...it is a small picture.

 

If that is the case...how do I get prestashop to just display the pic at the actual size without adding the white border?

Edited June 29, 2012 by voigt.jeremy (see edit history)

[Mike Kranzler]

If that is the default size of all of your images, you would want to go to Preferences > Images in your Back Office and then change the default size of Large images to 75 x 75. Then at the bottom of that page you would click "Regenerate Thumbnails."

 

However, please note that this will be the default image size for all of your product listings, so you'll want to make sure that they all have the same aspect ratio.

 

I hope this helps.

 

-Mike

[voigt.jeremy]

Mike,

 

Very helpful. Thank you. I'll give that a go and hopefully it works.

 

I appreciate your assistance.

[Mike Kranzler]

Good luck! Let us know how it goes!

 

-Mike

[voigt.jeremy]

Worked! The speedy and specific help is very much appreciated.

[voigt.jeremy]

Any reason you can think of that prestashop is adding the white border to the images in the product list:

 

http://conversationsacrossborders.org/presta/category.php?id_category=18

 

I would like to eliminate this one as well.

 

Thanks,

JV

[Mike Kranzler]

Hi Jeremy,

You would need to do the same thing with your "Home" images through the Back Office under Preferences > Images as well.

 

I hope this helps.

 

-Mike

[voigt.jeremy]

That makes sense to me, but "Home" is not one of the options for regenerating....I resized the "Home" category, but that just reduced the image size and retained the white border.

 

[Mike Kranzler]

Please try regenerating "All" images and let me know if that works any better for you.

 

-Mike

[voigt.jeremy]

I tried that, but the white border persists. Hmmmm.

[halennoor]

i saw another topic about this white border around the image. Seems like you need to work on the image.inc.php to edit the white patch. Here.

Edited July 2, 2012 by halennoor (see edit history)

[PariGupta]

Hi Mike,

 

I want to delete that white border. i want only product image without any border. How can i do this? See the white border. I dont want this. please reply

Edited July 4, 2012 by PariGupta (see edit history)

[Mike Kranzler]

Hi PariGupta,

Your images do not have the proper aspect ratio for the default image sizes in your theme. PrestaShop adds that white border rather than warping and resizing them to fit, You will need to change those default sizes through the Back Office under Preferences > Images, and then regenerate your thumbnails.

 

-Mike

[voigt.jeremy]

Mike,

 

I still cannot get the images in the product list to display without the white border. Your suggestions fixed the problem on the actual product display page, but not the listing page. I tried the suggestion from halennoor above and now any new images uploaded are not displaying at all.

 

Could really use some help as I am scheduled to make this cart live by September 5th for my site, but with the image problem I won't be able to meet that deadline.

 

Sincerely,

 

Jeremy

[voigt.jeremy]

All I get with new images is the description:

 

http://conversationsacrossborders.org/presta/category.php?id_category=19

[halennoor]

Mike,

 

I still cannot get the images in the product list to display without the white border. Your suggestions fixed the problem on the actual product display page, but not the listing page.

 

I tried replicating your situation. Apparently when I regenerate the images, looked like the changes are displayed for product images but not on category page where you have the product listing, as well.

 

What I did was I reviewed it in a different browser and it was actually already fixed. Try clearing cache or review it on a different browser just to see if that's the problem.

 

 

I tried the suggestion from halennoor above and now any new images uploaded are not displaying at all.

 

On the missing image, the topic i highlighted was supposed to help you on editing the background color and shouldn't result in missing links of the images. the solution requires you edit the image.inc.php whereby the white background is replaced with the color chosen ( according to the thread, it replaced 255,255,255 to 0,0,0 which essentially is replacing the white to black). It shouldn't ( if done correctly make your image disappears). You should be able to revert to the original color code and reinstate all the changes made and regenerate new images without much problem. Come to think of it, perhaps it wasn't really entirely in the context of what you would wanna do.

 

 

However, as Mike has mentioned that "PrestaShop adds that white border rather than warping and resizing them to fit"

 

If your images are not cropped, within the aspect ratio according to the type of image you are working on ( the product, home, category etc as listed in the back office) you will get white patches ( or any background color specified in the image.inc.php) added around it.

Edited August 21, 2012 by halennoor (see edit history)

[PariGupta]

Thanks Mike !!!! Its solved

[voigt.jeremy]

Halennoor,

 

Thanks for taking a look. Re: white border: I've tried multiple browsers, and cleared the cache, as you suggest, and the problem persists.

 

I restored the image.inc.php page after I realized it was not addressing my current problem, though I appreciate the suggestion. The images I am uploading are not cropped, and should match the ratio of the image type I am working on (double checked).

 

The only thing I can think of that might be a problem is a while back while working this same problem, I deleted the default image preference names and sizes and then added two sizes "Large" and "Home" with the sizes matching the sizes of my photos. In deleting the default settings, could I have caused my own problems (both the white border remaining on old images and the newly uploaded images not displaying)?

 

Thanks,

Jeremy

[voigt.jeremy]

I updated presta shop this morning hoping that might help my situation. I've updated to version 1.4.8.3. Now the images on my product listing pages still have the white border (http://conversationsacrossborders.org/presta/category.php?id_category=13), and the individual product pages have the images at the incorrect size (http://conversationsacrossborders.org/presta/product.php?id_product=14).

 

I wish I could understand how to manipulate these images more easily.

 

Here is an image of my image preferences (which I think is the problem, but don't know how to fix):

 

 

 

Thanks to all for any help.

[voigt.jeremy]

Update:

 

I cleared out the cache on the back end of the site and the product listing starting working...the white border is gone.

 

Now I am having 2 new problems.

 

I cannot upload category images. I can see them in the back office but they will not display on the site.

 

The individual product pages have the images at the wrong size....not matter what I do in the preferences....

[halennoor]

Update:

 

I cleared out the cache on the back end of the site and the product listing starting working...the white border is gone.

 

Now I am having 2 new problems.

 

I cannot upload category images. I can see them in the back office but they will not display on the site.

 

The individual product pages have the images at the wrong size....not matter what I do in the preferences....

 

you mean you cannot upload category images or you uploaded them but you cannot see them on the category image section?

If you are able to upload the category image, try regenerating image again and see if the new image is displayed.

[voigt.jeremy]

I uploaded them and can see them on the back office, but not on the page itself.

[halennoor]

i had that problem before as well. so after i uploaded the image i go to regenerate images. Some images just don't seem to go away in one flush . Anyway if you are able to upload them try checking the cache again.

 

On the size of the product images in product pages, I noticed they are all 300 px x 300 px although some are with white strip within them but I don't understand when you say they are all of different sizes.

[voigt.jeremy]

Yes, the product images are all 300 x 300, but in my image preferences there is no size set for 300 x 300. I cannot figure out what they are called ("home," "small," etc.) in order to re-size them.

[voigt.jeremy]

I figured out how to fix the product images by changing the size in the product.css file.

 

I am still unable to view uploaded images for the category. I am able to upload images for the products just fine. But the category won't display on the site, despite seeing it in the back office. It is reverting to a previous image I uploaded months ago. I have regenerated several times and cleared the cache. I am able to delete the image in the Back office and it disappears from the site. Then I upload a different image and when I refresh the previously deleted images comes up. Any other suggestions?

Thanks so very much for all the help.

Edited August 22, 2012 by voigt.jeremy (see edit history)

[halennoor]

I am still unable to view uploaded images for the category. I am able to upload images for the products just fine. But the category won't display on the site, despite seeing it in the back office. It is reverting to a previous image I uploaded months ago. I have regenerated several times and cleared the cache. I am able to delete the image in the Back office and it disappears from the site. Then I upload a different image and when I refresh the previously deleted images comes up. Any other suggestions?

Thanks so very much for all the help.

 

okay, look at your catalog tab > categories and choose the particular category to edit. Look at the image in the back office. If it is still the old one. delete it first using the delete button on that page.

 

If you are familiar with firebug, inspect the image and see the image path. Then delete the particular image file in your ftp ( as an example, for your Summer 2012 category the category image is at /presta/img/c/18-category.jpg -- delete that. )

 

If you do that you should see a broken link after you refresh your page or use another browser. I normally edit in firefox and review in another browser using chrome and firefox.

 

Then upload through your back office in catalog tab again for that category. In fact for this you do not even need to regenerate image. It should appear on your particular category.

 

 

p/s oh yes another common oversight is not setting the preference tab > performance where compile set to YES and cache set to NO for development. Don't forget to set “Force compile” option back to “No” after your done.

 

Just in case you have not done it, when deleting cache, check and clean up these folders manually from your server.

• /tools/smarty/cache
  
• /tools/smarty/compile
  

If you use smarty v2, check these folders:

• /tools/smarty_v2/cache
  
• /tools/smarty_v2/compile
  

Edited August 23, 2012 by halennoor (see edit history)

[voigt.jeremy]

Thank you for this detailed note. I did everything you describe: deleted the image from the catalog tab > categories even though it was the old image...deleted the file in the ftp...I saw the broken link---I use firefox and chrome as well--then I uploaded the new image for the category and, for some reason, it displayed the previous image. So weird and frustrating.

 

Also, I cleared these files too:

• /tools/smarty/cache
  
• /tools/smarty/compile
  

 

Sincerely appreciate your help.

 

I am not sure I understand the "force complie" and "cache" settings in smarty. They are currently set to "force compile = no" and "cache = yes." Are you saying that when I am working in the back office I need to set "force compile = yes" and then set it back to "no" when finished?

 

Thanks again for your help.

Edited August 23, 2012 by voigt.jeremy (see edit history)

[voigt.jeremy]

I've discovered that I cannot see any recently added category images. I deleted the Summer 2012 image (the thumb can be seen here: http://conversationsacrossborders.org/presta/category.php?id_category=6), and re-uploaded it, but again it only shows in the Back office.

 

I decided to test this and made a new category and then added a new image and had the same result (can see it in the back office and the thumb but not on the category page).

Hope this information is useful.

[halennoor]

I've discovered that I cannot see any recently added category images. I deleted the Summer 2012 image (the thumb can be seen here: http://conversations...p?id_category=6), and re-uploaded it, but again it only shows in the Back office.

 

I decided to test this and made a new category and then added a new image and had the same result (can see it in the back office and the thumb but not on the category page).

Hope this information is useful.

 

Weird but I don't see the image in the thumb and I do actually see an image in the category. ?? i saw another topic similar to this but then it was also not conclusive.

 

Perhaps this will shed some light for you?

 

I am not sure I understand the "force complie" and "cache" settings in smarty. They are currently set to "force compile = no" and "cache = yes." Are you saying that when I am working in the back office I need to set "force compile = yes" and then set it back to "no" when finished?

 

 

yes. during development set in performance --->force compile YES cache NO. otherwise changes you made may not show on your front office.

 

try that and see if it works any better. if everything else fails, perhaps you can request Mike or someone from Prestashop to look at your back office etc.

Edited August 24, 2012 by halennoor (see edit history)

[Kingstar]

To remove the border line and display only the image, try this solution:

 

global.css line 313

.products_block li img {
border: 1px solid #d1d1d1;
}

remove border param.

 

Worked for me.

Source: http://www.prestashop.com/forums/topic/298531-solved-how-to-remove-border-around-images/