Product Image Size Problem

Hi guys,

This is my first post in this forum but the forum has been helping me out for years.

I have a problem that I need some help with with. On my website the product pictures are the incorrect size for new uploads.

For example, this is how I want the product picture to be: http://www.gadjetsupply.com/product/classic-earphones-gadjet/

You can see that the image is squared and you see the full image. When you click on the image you see the full size.

This is how the images should NOT look: http://www.gadjetsupply.com/product/hi-tech-metallic-earphones/

But I have no idea how to change it. I changed the settings but nothing works so far.

Any help would be much appreciated, thanks guys.

 

Don't see any problem. The image seems to resize by itself relative to the actual image. For Wordpress related issues, I suggest you pay $5 on Fiverr to get the job done within 24 hours. Posting it here will have little to no effect sometimes.

 

The problem is that the woocommerce stylesheet is using height:auto, so the image is rendered at the height necessary to maintain tha aspect ratio. that is normally a desirable behavior. If you want it aquare then you will need to crop the image in a graphics program to make it square. I would not advise screwing around with the stylesheet if other images are displaying the way you want them. If it was me, I would just keep the flexible enough to allow for rectangle images as well as square.

 

The width of image is always 367 px and the height scales accordingly. First image is 510x510, and it scales to 367x367, If you upload image with 1:1 w/h ratio(crop it from the bottom, or add width to left and right), final image will be like the first one.

 

Thanks for the replies guys. The full size of the images is all actually 800 x 800 square. Both the correct and the incorrect pictures are the same size so it is strange why they show up differently!

 

No, no it isn't.

http://www.gadjetsupply.com/wp-content/uploads/2014/11/Gadjet-Hi-Tech-Earphones-Green-510x800.jpg

510x800, not 800x800. the other one is 510x510. Are you controlling these manually and doing the smart thing of uploading only in the sizes the site actually needs, or are you just blindly hoping the steaming pile of bloated manure known as turdpress will magically handle it for you?

Sorry, can you tell how much of a fan I am?

 

The number one booster of WP, utilizing Bootstrap for magic moments, optimized by a minimum dozen themes full of exploding planets and special presentations.

 

if this is woo why cant you just hardcrop the images? your woo settings has that so it regulates each image size

 

Thanks for all the replies.

The original picture I have uploaded is 800 x 800 and for some reason it crops to 510 x 800. It should resize to 510 x 510. When you click on the image you see the full size 800 x 800.

How do I hardcrop the images in Woocommerce please?

Thanks!

 

go into your admin - woocommerce - settings

 

I have hardcropped the images but it doesn't work, it is still exactly the same - even for new images I upload.

Is there some type of CSS that I can apply that can fix this nagging problem?

 

It looks like a media problem, you could check your media settings inside your admin. Goto
Admin - Settings - Media and 356x356px is the one you like and the one you don't like is 510x800.

 

Are you saying that if you make the image 510x510 before you upload it, it's STILL resizing it to 510x800? If so then something's REALLY jacked up since that's what "hardcropped" means.

Trying to let the server or the software handle image resizing and scaling of uploads is most always rubbish -- there's a reason I would never do that; admittedly I'd never use idiotic halfwit bloated trash like turdpress or it's mouth-breathing dumbass extensions like woocommerce either -- static style in the markup, static scripting in the markup, little if anything remotely resembling semantics, endless pointless DIV for nothing, endless pointless classes for nothing, and a general laundry list of how not to code a website -- but that's a tale for another time... but best summed up as...

If you don't know what's wrong with this:

<body class="single single-product postid-461 custom-background woocommerce woocommerce-page et_fixed_nav et_secondary_nav_enabled et_secondary_nav_two_panels windows et_right_sidebar gecko">
	<div id="page-container">

			<div id="top-header" class="et_nav_text_color_light">
			<div class="container clearfix">

			
				<div id="et-info">
									<span id="et-info-phone">0121 546 0300</span>
				
				
				<ul class="et-social-icons">

	<li class="et-social-icon et-social-facebook">

Code (markup):

You probably shouldn't be running a website -- or designing sites for others -- or making software others will be using. Then people wonder why they have first-loads of a minute plus thanks to two megabyte pages built from five or six dozen separate files -- dooming themselves to failure before they even start.

 

*** A Shot in the Dark ***
If you have changed something at the server, but it remains the same in the browser, be sure to hard clear your cache. You may still be viewing the old content.

cheers,

gary