Picture quality with zoom

[fabiohenriqueoc]

I have the same problem. Need help.

[Swift Ideas – Ed]

@fabiohenriqueoc – please read the previous responses, basically you just need to upload an image with a larger resolution.

– Ed

[fabiohenriqueoc]

Beyond the problem of zoom, I realize that there is also a problem of image resolution that is on the main page of the site.

[Kyle – SUPPORT]

@fabiohenriqueoc Please check your image sizes in WooCommerce > Products

Please follow: http://support.swiftideas.net/knowledgebase/product-image-quality/

– Kyle

[RubenM2412]

Uploading a picture with a larger resolution is not the answer. It seems like a bug in the woocommerce plug in or the theme itself, because the same problem even occurs on the theme demo website 🙁

[Kyle – SUPPORT]

Where is the issue on our demo?

– Kyle

[saturnerond]

Provided that uploaded images are large enough and Woocommerce Image Size settings are okay (what image size/Woo settings are you using?), I’m afraid this is not a bug but simply due to the way WordPress itself processes image resizing when generating thumbnails. Basically, WordPress is not as good as an image editor. There are plenty of posts about that on the web.
That being said, keep in mind that on the contrary of web designers e-shoppers rarely look at a page for more than a few seconds. Most of them won’t notice that the product image is not crystal clear. If they do stay on the page and look at product details, the zoom or lightbox features can then provide them with the full-size, sharper image.

If really you need better quality thumbnail images, then the only convenient solution would be to have the Imagick php engine installed on the server (ask your web host) and to process your uploaded images with the help of WordPress ImageMagick plugin. I didn’t try that however, just a suggestion.

Ammie

[Mohammad – SUPPORT]

@saturnerond – Thanks for your suggestion .

[lobsterass]

Hi!

All week, I’ve been trying to solve the issue with blurry product detail image and squished (wrong proportion) pop-up zoomed product image. Please see attached images.

QUESTIONS:
A. My product images are currently 1024×709 zoomed and 807×559 as main product image. Is it some kind of problem with this proportion or size?
B. Please give me CSS to remove the image file name in pop-up product image.

THIS IS WHAT I’VE DONE SO FAR:

1. I made my host activate Image Magik.
2. I installed plugin Simple Image Sizes (please see my settings in the attached image). Wrong settings?
3. I updated to Neighborhood v 1.70 and the latest WP.
4. I reuploaded the product images after making other changes.

Please tell med how I best solve this. I just need to get it right once to be able to move on and do my 30 other products the same way.

Cheers!

<3

[lobsterass]

This reply has been marked as private.

[Swift Ideas – Ed]

@lobsterass

Ok here is what you want to do:

1) Copy /woocommerce/single-product/product-image.php to your child theme (inc structure).
2) Edit line 92, replacing 562 with the width of image you want:

$image = aq_resize( $image_link, 562, NULL, true, false);

Custom css to remove that title:

div.pp_woocommerce .pp_description {
display: none!important;
}

Hope that helps.

– Ed

[lobsterass]

Hi!

Cool. I did all that. Thanx for manking me install the child theme. That will make my life so much easier with every update. 🙂

The code fixed the blurry product image. The only problem remaining now is the wrong proportion of the product pop-up image. Those are now supposed to be 1800×1246. They are distorted to 1760×1246 for some reason. No matter if I upload other sizes – the images becomes taller than they should for their width.

Please help.

http://monroedesign.se/produkt/zlatan-mork/

<3

[Swift Ideas – Ed]

Try adding this custom css:

#fullResImage {
height: auto!important;
}

Apologies for the delay!

– Ed

[lobsterass]

YEEES! Finally it works! Perfect! Thanx Ed for your patience with me.

🙂 very happy!

….Now, sorry for being a pain in the ass, but I realized two other issues connected to this:

1. Product image:
When I upload several product images to this product, the additional ones (see number 2+3 in attached image) are unsharp. I fixed the first image by doing this:

Copy /woocommerce/single-product/product-image.php to your child theme (inc structure).
2) Edit line 92, replacing 562 with the width of image you want:
$image = aq_resize( $image_link, 562, NULL, true, false);

2. Product pop up image:
Is there a way to get both nav arrows to show up outside the image – like it does on the right side? Please see attached second image.

Whenever I’m done with my site, I’m gonna write something really nice about the support. I know I’m asking many questions.

<3

[Swift Ideas – Ed]

Great!

1) Hmm.. The 562 you are referring to is for the main image (for this check in that file for 562, there should be 1 more instance which controls the other images.) As for the thumbnails, they are all 270 x 270 (this is set in the WooCommerce Settings panel) – you many need to regenerate.

2) Try adding this custom css:

.pp_hoverContainer {
left: 0;
width: 100%!important;
}

Hope that helps.

– Ed