Return to previous page

Same height and width on all arhive images without being cut

This topic has 6 replies, 2 voices, and was last updated 2 years, 9 months ago ago by Olga Barlow

ziga32

Participant

May 9, 2022 at 17:39

I want my images to be squared but “non-squared” images look like this
https://i.imgur.com/O75v5md.png

when I want them to uncut, contained like this
https://i.imgur.com/P80aza4.png

But if I use this
https://i.imgur.com/Lodz37t.png

then everything is wrong.
https://i.imgur.com/OQxaLJp.png

Basicaly I just want every image to be squared and contained. Is this possible?

I’m importing images from another xml source, so I can’t crop them.

#323480 Copied Theme version: 8.1.1 WooCommerce version: 6.3.1

5 Answers

Olga Barlow

Participant

May 9, 2022 at 21:47

Hello,

We would recommend you use all the images with the same aspect ratio to get a nice-looking grid. Anyway, I have added some custom CSS to limit product image height. Check now.

Regards

#323510 Copied

ziga32

Participant

May 10, 2022 at 13:48

Like I said, I can’t crop the images as they are being imported from few other xml sources.

Your code is nice, but I wanted all images to be squared. I changed the height so it’s better
https://i.imgur.com/odhr0iQ.png

But on larger or smaller displays it’s not squared anymore.
https://i.imgur.com/y5l8WQa.png
https://i.imgur.com/WzFki8A.png

Is it possible to set the height as same value as the width?

also the sale badge is hidden behind the image
https://i.imgur.com/DvktD0r.png

#323563 Copied
Olga Barlow

Participant

May 10, 2022 at 15:01
Hello,

If you want to have all the images squared then you need to upload squared images from the very beginning or use crop. There is no other way because the width of the images changes depending on the device width and custom height is static. So, unfortunately. You can try to look for third-party plugins for these purposes but there is no option in the theme to make all the images the same height/width, for example https://wordpress.org/plugins/smart-image-resize/ or similar.

I added below code to child theme style.css to fix the sale label issue

.woocommerce ul.products li.product .onsale, .woocommerce span.onsale { z-index: 2; }

Check now.

Regards
#323581 Copied
ziga32

Participant

May 10, 2022 at 15:06

thank you!

#323583 Copied

Olga Barlow

Participant

May 10, 2022 at 15:10

Hello,

You are welcome.

Regards

#323586 Copied
Tagged: archive images, best selling, no cut, same height, same width, themes, woocommerce
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘same height and width on all arhive images without being cut’' has been successfully resolved, and the topic is now closed for further responses

Same height and width on all arhive images without being cut

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection