Docs

[bryan1976]

Hi,

My category thumbnail image appears blurry, I have no idea why?

It is 1000px x 1000px

Please can you take a look at this page and see if there is anything obvious?

Is 1000 x 1000 too large?

I have uploaded the image this morning.

http://theaudiobarndev.co.uk/product-category/loudspeakers/

Thanks,

Bryan

[Christian]

Hey Bryan,

The thumbnail uses 240 x 240px size (see attachment). But upon checking, it is not blurry.

Thanks.

[bryan1976]

Hi,

Respectfully, there is something not quite right here.

Please look at the attached screenshot on a Mac Book Pro, and the original file as uploaded to wordpress.
The original file – now at 500px by 500px is crystal clear, however it is rendered on the website with a blur? Despite being in the correct aspect ratio?

Thanks,

Bryan

[bryan1976]

This reply has been marked as private.

[Christian]

The second example does not use the 240px version but the 800px (see attachment). X uses a small category image. You can make this high resolution by following the steps below:

1. Add the code below in your functions.php

add_action('after_setup_theme','woocommerce_default');

function woocommerce_default() {
	remove_action( 'admin_init', 'x_woocommerce_image_dimensions', 1 );
	remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}

2. Go to WooCommerce > Settings > Products > Display and set Catalog Images to 800 x 800 (see attachment)

3. Install Force Regenerate Thumbnails plugin then regenerate all your thumbnails. See the plugin docs for usage instructions.

You should see your catalog images load in 800 x 800px after that. I tested this in my test site and it works. But, please take note that this involved overriding X defaults so any issues arising from the use of this customization would fall outside the scope of our support.

Thanks.

[bryan1976]

Hi Christian,

I followed your instructions thank you, but this does not work.

All that happens was a low resolution version of the 800px x 800px image was shown.

I don’t wish to change the size of the image from 240px, I just want it to be retina ready.

I have reverted back to the undo these changes, so please can you compare these 2 pages which use the SAME image:

http://theaudiobarndev.co.uk/product-category/loudspeakers/

http://theaudiobarndev.co.uk/product-category/loudspeakers/active-loudspeakers/

Both use the SAME 800×800 image, and both show at 240x240px…however one is MUCH clearer than the other? The category thumbnail seems to be very low resolution. Is there a work around?

Sorry if I am missing something obvious, and thanks for your support.

Bryan

[Nico]

Hi There,

Would you mind sharing us your FTP credentials so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[bryan1976]

This reply has been marked as private.

[Christian]

Hey Bryan,

Let us go back to #1132119. Are you sure you did steps 2 and 3 correctly? Also clear your browser cache.

The only way for the image to display sharp in retina devices is to load or use a higher resolution. If not, the width of the container containing the image must be restrained to less than or equal to the width of the image. The code in the other thread does not target the image in the product category page. With that said, please try adding the code below in your Appearance > Customize > Custom > CSS

.woocommerce .product-category {
    max-width: 240px;
}

Thanks.

[bryan1976]

Hi,

Tried this and its the same problem.

The original image is 4x larger than the container, however to me (business owner not a developer) wordpress is generating a thumbnail for categories from the original image and its low resolution.

Would a plugin like EWWW correctly generate the right thumbnail image and override wordpress?

This is such a beautiful looking theme, its crazy that the category thumbnails are not easy to get retina ready?

Please can you have another look?

Thanks,

Bryan

[bryan1976]

Hi,

I solved the problem by installing the free plugin:

Perfect Images

This has saved my whole dev website and nearly 100 hours work!

Be great if X could support this or add this plugin as an approved addon?

I have attached images of before and after the plugin was introduced.

Thanks,

Bryan

[Christian]

Glad you’ve found a solution. The thing with retina is that you will need to use a larger image so you will need to use this wisely as this will affect page load times.

X has a retina feature for logo and certain areas. It overrides the setting for product category image out of the box though.

Thanks.

[Author]

Posts