We offer professional Design/Code Customisation and Website Optimisation ServiceRequest Service
  • Status: Waiting on customer

FS#11406 - Problems with image dimensions

Hello Marek,

The actual website is lilichic.com (new name more classy) which redirects to liliblingbling.com (old oscommerce site) until the website works well.
I have now migrated to Prestashop 1.6.1.17 and I have made a redirection to liliblingbling.com (I use www.lilichic.com/index.php for the website in Prestashop)

I have some Problems with the image dimensions. Even if I put a size of image like 462 X 578 for the image large default I have then a bigger image 599 X 749 (which is bigger than the original size….)
This happens when I have only one image for a product. If I have more than one image than the size is correct. How can I change this ?

The category image 870 X 300 does not show good in the website. The text is too low and does not look professional. How can I change this ?

All login are in the detail of the account. Thank you for your help.

Kind regards.

This ticket does not depend on any other tickets.

Marek (marek)
Saturday, 13 January 2018, 12:14 GMT+1
Support Team

give me a link to page where I could see the issue

Jean-Pierre (lilichic)
Sunday, 14 January 2018, 18:58 GMT+1

1)Here the url giving you an exemple with the product image showing a dimension of 599 x 749 instead of 462 x 578 (this happens when there is only one image for a product) : https://www.lilichic.com/index.php?id_product=3813&controller=product&id_lang=3

2)Here the url giving you an exemple with the product image with the right dimension 462 x 578 (this happens when there are more than one image for a product ) :
https://www.lilichic.com/index.php?id_product=3784&controller=product&id_lang=3

3)Category image is set to 870 X 300 but then it does not show well on the website. The text is too low and all this does not look professional. How can I change this ? Where and how can I decide which proportion of the category banner will be set for the image and which proportion for the text. Here an exemple without an image but with the text being too low : https://www.lilichic.com/index.php?id_category=109&controller=category&id_lang=3

4) Category image with an exemple with the text too low and the image not showing well : https://www.lilichic.com/index.php?id_category=65&controller=category&id_lang=1

Marek (marek)
Sunday, 14 January 2018, 23:50 GMT+1
Support Team

Go to Image Settings page in your back office and change image sizes as you need

Jean-Pierre (lilichic)
Monday, 15 January 2018, 12:00 GMT+1

Yes I know about the image size as described in your explanation of the setting of the Alysum theme. This is what I did. But as said before when I to the product page the image does not display the given size in the preference / images section. Again here an example : https://www.lilichic.com/index.php?id_product=3813&controller=product&id_lang=3 The image is showing 599 x 749 instead of 462 x 578 (what I have put in the settings of the image and I have generated the images.

Strangely this does not happen when here are more thank one image for a product. Like https://www.lilichic.com/index.php?id_product=3784&controller=product&id_lang=3

And I have still problem with category image showing not good :

Category image is set to 870 X 300 but then it does not show well on the website. The text is too low and all this does not look professional. How can I change this ? Where and how can I decide which proportion of the category banner will be set for the image and which proportion for the text. Here an exemple without an image but with the text being too low : https://www.lilichic.com/index.php?id_category=109&controller=category&id_lang=3

Category image with an exemple with the text too low and the image not showing well : https://www.lilichic.com/index.php?id_category=65&controller=category&id_lang=1

Marek (marek)
Monday, 15 January 2018, 12:11 GMT+1
Support Team

I can offer you following solution

Jean-Pierre (lilichic)
Monday, 15 January 2018, 12:22 GMT+1

Ok fine. Yes I would appreciate this solution in order to have always a text showing well. Thank you.

Jean-Pierre (lilichic)
Monday, 15 January 2018, 12:23 GMT+1

But what about the image size of the products like explained to you ?

Marek (marek)
Monday, 15 January 2018, 13:19 GMT+1
Support Team

The solution for category description is following CSS:

body .cat_desc {
position: relative;
width: 100%;
}

As for product image, have you tried to change images sizes and regenerate images?

Jean-Pierre (lilichic)
Monday, 15 January 2018, 14:51 GMT+1

Thank you for your rely.

In which css file should I put the css code ?

For the product image, yes I did change images sizes and I also regenerated the images. As said when there is more than one image for a product then the size is correct, but if there is only one image then the size is not the one given in the settings....

Jean-Pierre (lilichic)
Monday, 15 January 2018, 18:24 GMT+1

hello Marek, I have put your code in the custom css of the theme setting. Hope this is correct.
When I look at the result the text is not aligned with the image. The text begins more to the right.
Here a print screen.

For the product image do you have a solution ?

Marek (marek)
Tuesday, 16 January 2018, 12:45 GMT+1
Support Team

The issue has been fixed. Please check it out

Jean-Pierre (lilichic)
Tuesday, 16 January 2018, 12:57 GMT+1

Hello Marek, sorry but the test is still not under the image. I have attached a picture to it.

Marek (marek)
Tuesday, 16 January 2018, 13:01 GMT+1
Support Team

it's a cache issue. Don't forget to force reload your page or clear browser's cache

Jean-Pierre (lilichic)
Tuesday, 16 January 2018, 14:15 GMT+1

Hello Marek, I have forced the reload of the page and cleared cache on different browsers and machine but the text is still not under image. I don't know what I do wrong. Can you check again please. Thank you

Marek (marek)
Tuesday, 16 January 2018, 14:36 GMT+1
Support Team

I don't know why, but my fix disappears. I just added it once again

Jean-Pierre (lilichic)
Tuesday, 16 January 2018, 16:13 GMT+1

Ok, fine now it works good. Thanks

Remember in this ticket I also spoke to you about the image size of the products.

I have set the image size as described in your explanation of the setting of the Alysum theme. But as said before when I to the product page the image does not display the given size in the preference / images section. Again here an example : https://www.lilichic.com/index.php?id_product=3813&controller=product&id_lang=3
The image is showing 599 x 749 instead of 462 x 578 (what I have put in the settings of the image and I have generated the images).

Strangely this does not happen when here are more than one image for a product. Like https://www.lilichic.com/index.php?id_product=3784&controller=product&id_lang=3

How can this be fixed ? Tank you

Marek (marek)
Wednesday, 17 January 2018, 12:40 GMT+1
Support Team

It's because when you have only one image, there is no thumbnails on the right side and an image looks bigger. That is not a bug, and I can offer you only one solution in this case, increase large images up to 599x749

Jean-Pierre (lilichic)
Wednesday, 17 January 2018, 15:52 GMT+1

Hello Marek, thank you for your answer. The problem I have is that my images form my previous website are all 560 x 700.... so they will all look blurry. Would it be possible to force the dimension of all product images to 462 x 578 or to max dimension I have 560 x 700 in putting something in the css ?

Marek (marek)
Wednesday, 17 January 2018, 23:35 GMT+1
Support Team

I can set "max-width: 462px;" and it will look like this

Jean-Pierre (lilichic)
Thursday, 18 January 2018, 09:44 GMT+1

Hello Marek, yes please put the max-width so the image is not blurry. Please tell me where you put it so I can change if necessary. Thank you

Marek (marek)
Thursday, 18 January 2018, 23:16 GMT+1
Support Team

just use following CSS fix:

#pb-right-column {max-width:462px}
Jean-Pierre (lilichic)
Sunday, 21 January 2018, 19:01 GMT+1

Hello Marek, I have put your proposal in the css but it does not look good with a product having several images. See picture

Marek (marek)
Monday, 22 January 2018, 12:10 GMT+1
Support Team

it works fine for me http://media.promokit.eu/screenshots/monosnap/scr_20180122_121005.png

Looks like it a browser's cache issue

Jean-Pierre (lilichic)
Monday, 22 January 2018, 15:57 GMT+1

Hello Marek, It works fine with a product having only one image. But with a product having several images, it does not look good. The other images are vertical under the main image.
See picture

Marek (marek)
Monday, 22 January 2018, 23:14 GMT+1
Support Team

Try now

Jean-Pierre (lilichic)
Tuesday, 23 January 2018, 12:30 GMT+1

Hello Marek, sorry but it did not change the layout. Still images vertical under the main image. See pictures

Marek (marek)
Tuesday, 23 January 2018, 21:15 GMT+1
Support Team

Look like m fix has been wiped
Try to remove old code and add new

#view_full_size {max-width: 462px}

Loading...