1×1 ratio image on products list

This topic has 12 replies, 3 voices, and was last updated 4 years, 6 months ago by Artem Temos.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
April 24, 2020 at 10:39 am #189649

Nejc
Participant

Hey!

On the product page (woocommerce), if I change color attribute, it doesn’t load me a 1×1 aspect ratio image (default is 300×300) and it turns out ugly.

How to do that always load 300px x 300px images here?

Example: https://youtu.be/F69_WWG8wYw

April 24, 2020 at 11:20 am #189656

Aizaz Imtiaz Awan
Keymaster

Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :).

I watched the video you attached. The product images are controlled by WooCommerce and our theme doesn’t influence this. WooCommerce provides some settings that can be found under Appearance >> Customize >> WooCommerce >> Product Images.

Screenshot for Clarification: https://ibb.co/1L7ZNjp

You can make settings of your own from there.

Best Regards.

April 24, 2020 at 12:32 pm #189680

Nejc
Participant

It’s work for product page. On grid is still the same 🙁

And yes, I run regenerate thumbnails in Woocomerce tools and clean cache.

Looks like Ajax get image without 300×300 parameters?

Video: https://www.loom.com/share/2edd39957ad34c34b419ea3de61c28e8

April 24, 2020 at 1:04 pm #189687

Nejc
Participant

And by the way, I already have 4 licenses for WoodMart. …and counting 🙂

April 25, 2020 at 4:56 am #189826

Aizaz Imtiaz Awan
Keymaster

Hello,

I watched the video you attached.

As I mentioned in my previous reply that the images of products are controlled by WooCommerce and our theme doesn’t influence this. It seems that you are using different images for product variations that are of different sizes. Please try and add the variation images of the same sizes, clear cache and check back.

Or you can try changing the image crop ratio from Appearance >> Customize >> Woocommerce >> Product Images.

Screenshot for Clarification: https://ibb.co/1L7ZNjp

Best Regards.

April 25, 2020 at 7:03 am #189843

Nejc
Participant

I temporary fix it with edit CSS in Woodmart theme.

I replace:
img{max-width:100%;height:auto;border:0;vertical-align:middle;}

with:
img{max-width:100%;border:0;vertical-align:middle;object-fit:cover;}

Why are you using “height:auto;”? I can’t remove it within child theme, so with every update I need to fix it again?

April 25, 2020 at 7:13 am #189844

Aizaz Imtiaz Awan
Keymaster

Hello,

We are Glad that you resolved the issue by yourself. You are Great!!

You can use the CSS in the Child theme that will not be lost after the theme update. If you use the CSS in the main theme then it will be lost after updating.

Best Regards.

April 29, 2020 at 8:30 am #190784

Nejc
Participant

You don’t understand me.

In the main CSS, “height: auto;” is set for the img tag.

This overrides the attributes that Javascript gives to a woocomerce photo.

However, I cannot overwrite “height: auto” in child theme because height should not be defined for img{}.

“height: auto” must be deleted in the theme CSS

Look at photo.

I hope you will understand me now. 🙂

Attachments:
You must be logged in to view attached files.

April 29, 2020 at 10:02 am #190819

Aizaz Imtiaz Awan
Keymaster

Hello,

I saw the screenshot you attached. The image height is defined in the main theme files and you don’t need to apply any height. That’s why you need to update them from the main theme files. As you did in your case.

You can keep the solution as far as it is working for you.

Best Regards.

April 29, 2020 at 10:18 am #190822

Nejc
Participant

No,

“height: auto;” overwrite the height set in Woocomerce settings (under Appearance >> Customize >> WooCommerce >> Product Images).

So you need to delete this line in your theme CSS. I cant do that in child theme, it’s impossible.

For now I need edit your main CSS with every update and that’s annoying. Just deleting this line and everything works fine. It actually doesn’t make sense that “height: auto” is there.

April 29, 2020 at 11:53 am #190886

Artem Temos
Keymaster

This line height: auto; is required to make all images responsive. It doesn’t influence your images aspect ratio if you don’t customize anything in the code. 1×1 ratio can be achieved if you enable crop in WooCommerce settings without any extra code customization.

April 29, 2020 at 12:17 pm #190906

Nejc
Participant

Not quite true.

Try create a product with different colors and upload different height image for each color. And than start clicking on colors. After color change it will never be 1×1 again, even though you have 1×1 cropping in the settings.

I cant find solution except delete the “height: auto”.
But I have to keep an eye on it every update..

April 30, 2020 at 6:07 am #191077

Artem Temos
Keymaster

That means that you didn’t set 1×1 ratio for the single product page. The problem is that swatches and WooCommerce variations take images with single product page size. So if you want to use this feature, you need to have the same size for shop catalog and for single product page.
Author

Posts