[solved] How to change image frame ratio on home page/product page?

[Elizabeth410]

On the template I am using, the home page images are rectangle shaped, and the product page images are square. This is causing problems (see golf cart cookie as an example) http://beauxdelices.com

 

I would like to use the same image for all situations: product page, home, categories, etc.

 

I tried changing settings in preferences / images but was never able to find a way to get the square image to display properly on the home page.

 

Question:

How do I change the size of the image frames for the home page images (to make them square if I choose) or for the product pages (to make them rectangle if I choose)?

 

Thank you!

[Carl Favre]

Hi Elizabeth410,

 

Have you checked the css files of your slider module? There must be width/height values for the image frame.

[Elizabeth410]

Hello Carl and thanks for your help. The images I wanted to resize are the product

thumbnails on the home page and categories page.

I followed your advice and made the change near line 111 in the global.css

file and it worked, however the bottom part of the border around each image

is cut off.

 

Here is what I did:

- in the Prestashop back office, I changed the home product images

size from 160x186

to 160X160. I then regenerated the thumb nails.

 

In theme276/css/global.css, I change this line:

 

.mask_home {width:164px;height:190px;background:url(../img/mask_home.png)

0 0 no-repeat;position:absolute;left:0;top:0;cursor:pointer;}

 

to this: (only the width and height were modified)

 

.mask_home {width:164px;height:164px;background:url(../img/mask_home.png)

0 0 no-repeat;position:absolute;left:0;top:0;cursor:pointer;}

 

I tried different variations of the width and height, such as 160x160,

164x163, 164x165, etc. but the rounded border was always missing from

the bottom of the image.

 

Any suggestions would be appreciated!

[Carl Favre]

Oh ok, my bad .

 

About the rounded border, mask_home uses a background image for the border : /mask_home.png

 

So if you resize the size, you also have to resize the mask_home image otherwise it is not going to work.

 

Use Photoshop or any other image editors to resize it and it should be good.

[Elizabeth410]

Thank you so much Carl. It worked!

 

Have a great day

[Carl Favre]

Thanks have a good day too .