Woocommerce product images display incorrectly

bruce3
72 Posts
bruce3 posted this 15 February 2016

Hi,

I notice the following when resizing the product images for Woocommerce:

I set the catalog image to 550px X 550px
I set the single product image to 1100 px X 1100px

I resize using the plugin Regen Thumbnails.

When I view on the website the images in the product grid view are the correct size at 550 px on the longest side. I know this as images that are more vertical than horizontal display with a height of 550px.

When viewing on the single product page the images that have a height of 1100px are blurred. I right click on the image in google chrome and select 'open image in new tab'. The image that is displayed is the 550px image. I checked and the 1100px does exist.

The original images uploaded have a maximum length of 1100px on the longest side. The 1100px image created by Regen Thumbnails is very sharp.

The catalog part of the site is still in development but you can view an example here:
http://tdfstudio.co.za/products/decor/fc150170abc-set-40-x-120-ea/

Please help.

Regards,

Bruce

Hi, I notice the following when resizing the product images for Woocommerce: I set the catalog image to 550px X 550px I set the single product image to 1100 px X 1100px I resize using the plugin Regen Thumbnails. When I view on the website the images in the product grid view are the correct size at 550 px on the longest side. I know this as images that are more vertical than horizontal display with a height of 550px. When viewing on the single product page the images that have a height of 1100px are blurred. I right click on the image in google chrome and select 'open image in new tab'. The image that is displayed is the 550px image. I checked and the 1100px does exist. The original images uploaded have a maximum length of 1100px on the longest side. The 1100px image created by Regen Thumbnails is very sharp. The catalog part of the site is still in development but you can view an example here: http://tdfstudio.co.za/products/decor/fc150170abc-set-40-x-120-ea/ Please help. Regards, Bruce
wordpress woocommerce image-size woocommerce-3
Vote to pay developers attention to this features or issue.
7 Comments
Order By: Standard | Newest
bruce3
72 Posts
bruce3 posted this 16 February 2016

Hi

I have checked and the image width is only 384 pixels when 1100px in height.

the incorrect image though is still displayed, i.e. the 550px or catlaog image and not the single product image.

Regarsd,

Bruce

Hi I have checked and the image width is only 384 pixels when 1100px in height. the incorrect image though is still displayed, i.e. the 550px or catlaog image and not the single product image. Regarsd, Bruce
bruce3
72 Posts
bruce3 posted this 16 February 2016

Hi

I noticed that when changing the following css code the 550px image displays and not the single product image dimension of 1100px.

Check this url and change the css width from 100% to auto.

.bd-productimage-8 img {
display: block;
width: auto; /Change from 100% to auto to display the original image size - in this case catalog image of 550px/
height: 100%;
}

Regards,

Bruce

Hi I noticed that when changing the following css code the 550px image displays and not the single product image dimension of 1100px. Check this url and change the css width from 100% to auto. .bd-productimage-8 img { display: block; width: auto; /*Change from 100% to auto to display the original image size - in this case catalog image of 550px*/ height: 100%; } Regards, Bruce
bruce3
72 Posts
bruce3 posted this 16 February 2016

Hi,

I have worked out that you must use the product overview image in the single product display page and not the product image control.

This also resolves the issue when the lightbox feature included in Woocommerce does not work.

Regards,

Bruce

Hi, I have worked out that you must use the product overview image in the single product display page and not the product image control. This also resolves the issue when the lightbox feature included in Woocommerce does not work. Regards, Bruce
bruce3
72 Posts
bruce3 posted this 16 February 2016

Hi,

Buy changing this css in Woocommerce the images that are tall and narrow only go to the maximum width of the image and do not stretch to the width of the image box.

.woocommerce div.product div.images img {
width: auto;
}

Regards,

Bruce

Hi, Buy changing this css in Woocommerce the images that are tall and narrow only go to the maximum width of the image and do not stretch to the width of the image box. .woocommerce div.product div.images img { width: auto; } Regards, Bruce
Support Team
Support Team posted this 19 February 2016

Hello Bruce,
Themler themes are using the same image on the Products and Product details templates. So to output the image of higher quality I'd recommend that under WooCommerce product settings you specify image with higher resolution as featured product image.
In Themler on Products template on the Product Grid set width and height for the Product Image control, e.g. to 50%.
On Products details template check the Product Image, may be you need to set width and height to 100%.

regards,
Aileen

Hello Bruce, Themler themes are using the same image on the Products and Product details templates. So to output the image of higher quality I'd recommend that under WooCommerce product settings you specify image with higher resolution as featured product image. In Themler on Products template on the Product Grid set width and height for the Product Image control, e.g. to 50%. On Products details template check the Product Image, may be you need to set width and height to 100%. regards, Aileen
copywriter
82 Posts
copywriter posted this 15 June 2020

So how do I make sure the images in Product Slider are visible and sharp?
https://navrh2.tvorba-webova.cz/produkt/minidresy-fotbalove/

So how do I make sure the images in Product Slider are visible and sharp? https://navrh2.tvorba-webova.cz/produkt/minidresy-fotbalove/
Support Team
Support Team posted this 23 June 2020

Hello,

Sorry for delay. The main Product image in Product Details outputs the Featured Image from wooCommerce and on your website I can also see a set of the gallery images (Product Gallery output by the Product Thumbnails control). Source images for both of these image types are set in Woocommerce product image settings.

Sincerely,
Nettie

Hello, Sorry for delay. The main Product image in Product Details outputs the Featured Image from wooCommerce and on your website I can also see a set of the gallery images (Product Gallery output by the Product Thumbnails control). Source images for both of these image types are set in Woocommerce product image settings. Sincerely, Nettie
You must log in or register to leave comments