Thumbnails

Hello,
We use your theme on the test website bellow where we have uploaded only images with resolution 1280 x 960 and others with square res minimum 500 x 500, for products.
Please tell me how the thumbnails settings from WooCommerce and WordPress should be like? I mean, what sizes should we use for catalog, product and gallery? Also, in the WordPress Media Settings what res should we have there before regenerate all the images uploaded now?
Thx!

Hello,

Thank you for choosing our theme and contacting us.

It all depend on what images sizes you would like to see on your website. There are no any requirements for the theme. If you want you can make them square like 300×300 or rectangular 450×270.

Kind Regards
XTemos Studio

Thx for your reply.
Can I leave them untouched? With hardcrop options from woocommerce settings unchecked?

As you wish 🙂 As we stated, our theme doesn’t have any requirements and it depends on your needs what images size should be set.

Regards

Hello.
I’m back with the same problems regardings the thumbnails for category pages.
Please see the screenshot > http://prnt.sc/efl9jo
As you can see, thumbnails sizes are very different.
I mention that the first image has the originaly res at 1000 x 1000 and the second ones at 1280 x 960.
I use in WordPress > Media settings > http://prnt.sc/eflah3
And for WooCommerce > http://prntscr.com/eflauu
What settings should I have for them to show correctly on the shop page? I’ve regenerated the images already with the same settings.

Hello,

Could you please prepare a sketch or some screenshot of how you would like to make them look like?

Also, the only one way to make them all inline is to enable Hard crop option in WooCommerce settings.

Regards

I would like to look exactly like product no 2 and 3.
The problem is with the first image because it has other res (square). Practicaly it needs to be zoom out or something to be in line with others.

Try to set 400×300 image size and enable Hard crop to make them all look the same.

The first image is now in line with others but it’s cropped, as you can see.
Also, the thumbnails are a little blurry now. Please see the comparison > http://prntscr.com/efm2fd

In this case, disable the Hard crop option.

And now we’re back to first image not in line with others 🙂
Take a look, first row of products.

Ok, so I changed to 300 x 200 for the category thumbnails in woocommerce settings, unchecked cropped images and they look fine for now on the category page, but we have another issue on the front page with the same products.
Please see screenshot from and ipad in landscapde mode.
http://prntscr.com/efna0o

So, we made some more test and these are the results:
– on desktop seems to be ok
– on mobile iPhone landscape mode is ok
– on iPhone portrait mode is not ok – http://prntscr.com/efndfx
– on tablet is not ok – http://prntscr.com/efna0o

So i think is a responsive problem, wich image is displayed for a certain resolution…

Try to limit your product images height with CSS. Add this on to the Custom CSS for mobile devices

.product-element-top img {
	max-height:120px;
}

and this for tablets

.product-element-top img {
	max-height:130px;
}

With this CSS the images look weird..It’s not ok 🙁
They are practically vertically tight and non aesthetic.

OK, we see. Try to add this also

.product-element-top img {
    width: auto;
}

Seems ok now.
Thank you!

You are welcome!

[Author]

Posts