• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 12.01.18, 13:16
  • Opened by: Jean-Pierre
  • Closed by: Marek
  • Closed on: 25.01.18, 15:37
  • Reason: Closed
  • Comment: Glad to help!

Ticket #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.

Comments

Marek 13 Jan 2018, 12:14

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

Jean-Pierre 14 Jan 2018, 18:58

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 14 Jan 2018, 23:50

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

Jean-Pierre 15 Jan 2018, 12:00

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 15 Jan 2018, 12:11

I can offer you following solution

Jean-Pierre 15 Jan 2018, 12:22

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

Jean-Pierre 15 Jan 2018, 12:23

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

Marek 15 Jan 2018, 13:19

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 15 Jan 2018, 14:51

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 15 Jan 2018, 18:24

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 16 Jan 2018, 12:45

The issue has been fixed. Please check it out

Jean-Pierre 16 Jan 2018, 12:57

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

Marek 16 Jan 2018, 13:01

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

Jean-Pierre 16 Jan 2018, 14:15

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 16 Jan 2018, 14:36

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

Jean-Pierre 16 Jan 2018, 16:13

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 17 Jan 2018, 12:40

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 599×749

Jean-Pierre 17 Jan 2018, 15:52

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 17 Jan 2018, 23:35

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

Jean-Pierre 18 Jan 2018, 09:44

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 18 Jan 2018, 23:16

just use following CSS fix:

#pb-right-column {max-width:462px}
Jean-Pierre 21 Jan 2018, 19:01

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 22 Jan 2018, 12:10

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 22 Jan 2018, 15:57

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 22 Jan 2018, 23:14

Try now

Jean-Pierre 23 Jan 2018, 12:30

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

Marek 23 Jan 2018, 21:15

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

#view_full_size {max-width: 462px}
Jean-Pierre 24 Jan 2018, 10:33

Hello Marek, Yes it works great now with products having several images. Thank you.
Last thing here, how can the image be centered when a product has only one image because it looks strange. See picture.

Marek 24 Jan 2018, 11:07

try this:

#pb-right-column  #image-block #view_full_size {margin:0 auto}
Jean-Pierre 24 Jan 2018, 14:25

Thank you for the change.

With this css

#pb-right-column  #image-block #view_full_size {margin:0 auto}

I have again the size 599 x 749 instead of 462 x 578 when there is only one image

The previous css #view_full_size {max-width: 462px}

kept the size to 462 X 578 but needs just to be centered for the products having only one image.

Marek 24 Jan 2018, 14:46

Looks like you have removed previous CSS fix, please be careful

Jean-Pierre 25 Jan 2018, 11:20

Hello Marek, I have tested yesterday and did not know that I had to keep the previous css fix. Now it seems alright. Thank you very much.

Marek 25 Jan 2018, 15:37

No problem