I tried many tricks, googled many websites, used many wordpress plugins but failed & fedup. I am running a coupons/ deals website, my problem is i want to display the product image completely without any crop even if it is small in size.
The original image is https://postimg.org/image/ue5aamx8t/
but cropped image showing in my website is http://couponfun.in/product/kanvas-katha-tote-%E2%82%B983/
please help.
Just do this thing,
The category images are the same size as shop_image (or Catalog) thumbnail. WooCommerce handles its product thumbnails in its settings:
WooCommerce->Settings>Products>Display
You can change its height, width, and toggle the hard crop on/off.
Note : After changing the image sizes you will need to regenerate thumbnails. (Link in same page you can see.)
Related
I have created 2 blogposts in wordpress and shared them in twitter.
The twitter URLs are
https://twitter.com/Jagannathan6/status/1423662392534175744?s=20
and the other is
https://twitter.com/Jagannathan6/status/1423197036195717124?s=20
As you see the image appears as a thumbnail in one tweet and as a large image in another. How to make the thumbnail image appear as a large image? Has it got something with the size of the image?
I am looking for an answer where I need not get premium version of wordpress.
Easiest way is to use Yoast plugin. Taking a look at the two tweets I'm wondering:
Are you using media sizes to size the images (Wordpress takes the largest image it can and resizes and/or crops smaller images to fit the sizes in the Media options menu)?
Are you using Yoast or custom hooks to post the images to twitter?
Are you using the same size images for both posts?
Are you attaching the images as Featured Images in the editor in the same way?
Did you post them to twitter in the same way?
Do both posts have snippets / excerpts applied to them? If not, make sure your theme is calling the_excerpt, or else you've configured the excerpt to pull from the main body of the post, or else hand-craft the excerpt in the relevant meta box.
Do both images have meta tags / alt tags applied to them? Check in the Media Library or in the post > edit image and see that alt text, caption and description are all filled out.
Did you test the images first with https://cards-dev.twitter.com/validator ?
Here are the settings i use on the website for the woocommerce images.
If you visit the website homepage, you will notice that the images with the 3 rows are being cropped but everywhere else they are normal. (right below in the special offers section they are okay, with the same size)
If you inspect an image and open in new tab, you will notice they are actually cropped. Those rows are created with siteorigin plugin and the widget is the product tyche widget of the theme tyche.
What could be the solution of this issue? Why the images are being cropped at those 3 rows? (Gaming, accessories, merchandise)
It might be the issue for different sizes of the 3 images. Try to do all the images equal size then add the pictures again. Hopefully, it will work.
Okay it was a theme issue and not Woocommerce.
Thanks to Simple Image Sizes plugin, I managed to fix the issue simply by disabling cropping on all of the theme images and resizing those image to the proper size so they get the perfect quality!
I hope this community can help. I see there is a lot of information on Woocommerce blurry product images and I've tried the fixes to no avail. We recently migrated our site and although all the products in our shop are fine, each time we try to upload and create a new product, the main product image is blurry.
Here's two examples. (1) Good product listing
And (2) here's the test with problems
Using Onetone wordpress theme and have the current installs of Wordpress and Woocommerce. Changing the thumbnail size and regenerating did not solve the problem. Neither did changing the image size from 100% declaration to 'auto' in Woocommerce.
The problem seems to be wordpress is using a much smaller thumbnail (we did not change any sizes after migration) and this is causing the blur because the images are being blown up. Here's the code I found for the image:
The image 'source' for this in particular is:
src="http://liquescencemedia.com/wordpress/wp-content/uploads/2016/08/Liquescence-Time-Travel-Mens-Ash-Grey-1-275x275.jpg
And as you can see, somehow this size is being used for the product image although we've uploaded a much larger size (1000x1000).
On the image details attachment page everything is fine, the resolution is high.
So I'm quite frustrated with this. Why is it calling a 275x275 from uploads when I've uploaded an image 1000x1000? How can I change this?
Any help is appreciated. Do know that I've already been through the Woocommerce literature and it doesn't address this problem.
I have an up to date install of wordpress and woocommerce using a pretty simple, customized theme.
I recently noticed that woocommerce is not calling thumbnail images for catalog pages, the cart, anywhere.. i hadn't noticed earlier because everything looks OK. For example: the cart displays 32x32px thumbnails, but is merely re-sizing the original image (1000x10000px) down to 32x32 instead of calling a smaller file such as the 150x150px thumbnails. it seems to be doing this anywhere a smaller image is used and my main catalog page is almost 40mb which is ridiculous- it should only weigh 1.5 or 2mb...
if you're feeling frisky, the 40mb catalog page is at superfly5000.com/collections/ (NSFW!!!)
Both woocommerce and wordpress image settings are set to 150x150 and 300x300. WC single product images and WP large size images are set to 0x0 so it will call the original image.
I have regenerated thumbnails and am about to convert all my PNG's to JPG's to save some weight but I really don't want to lose transparencies..
Any ideas??
You have to enable the hard-crop option for thumbnails, more info.
resolved: cool thanks,Vikas, the hard crop wasn't the issue but the snippet at the bottom of the page (https://docs.woothemes.com/document/adding-product-images-and-galleries/#section-4)- manually calling image sizes from the functions.php and regenerating thumbnails apparently did the trick. for some reason WC wasn't using it's own image sizes settings- i don't know why.
The problem I'm having is with WooCommerce plugin in Wordpress. I am adding products along with their images but the problem is that the images I'm provided are of varying sizes. Some of the images are vertically oriented and as a result, the image gets cropped off so that only the top ~30% of the image is showing while the rest is cropped off.
I need to upload hundreds of product images so I'd want to find a way to efficiently resize everything properly so that images aren't cropped incorrectly. Do I just need to resize the images myself before uploading to WooCommerce or is there a way to get this to work properly?
It is ultimately up to you how you want to handle your images - it's going to be specific to your site. That said WooThemes has some documentation on using appropriate product image dimensions. You might want to try unchecking "Hard crop" on the product thumbnails - this will result in your thumbnails not having the same dimensions but it will not crop part of the image. If this doesn't work, you probably need to pre-edit the images.