0

am trying to crop my thumbnail in my loop, am having some problems when i crop using codes some images appear either big in width or height here is my code Css

.imgholder {float:left;margin-right:20px; margin-left:20px;height:240px;width:240px;}

loop

<?php the_post_thumbnail( 'large' , array('class' => 'imgholder')); ?>

when i change the 'large' to 'thumbnail' from the above it works perfectly please help Thank you

0

Basically, when you are setting the thumbnail sizes you have a choice of how the thumbnails cropped in WordPress.

Soft Crop

The Soft Crop in WordPress is the same as what's commonly known as a Fit Crop and is what we'd normally think as a "pure resize". The entire image will be fit in a box of the dimensions you specify without cutting any of the image. So, if the shape of the image is not exactly the same as the shape of the box, then you will end up with blank space.

There are two ways that you can specify a hard crop. One of them is to navigate in the WordPress dashboard > Settings > Media and uncheck the choice of "Crop thumbnails to exact dimensions (normally thumbnails are proportional)". Keeping that unchecked is setting a soft crop.

enter image description here

Now, if you have added extra image sizes through your functions.php then you can use the add_image_size function and you can specify the soft crop with the FALSE attribute, like this.

add_image_size ('large', 240, 240, false);

Hard Crop

The Hard Crop will fill a box of whatever dimensions you specify and cut out any other parts of the image that do not fill in that box. Also, in this case, we have two ways that you can specify hard crop. One of them is to navigate in the WordPress dashboard > Settings > Media and check the choice for "Crop thumbnails to exact dimensions (normally thumbnails are proportional)". Keeping that checked is setting a hard crop.

In the case that you are specifying it in functions.php then it looks something like this :

add_image_size ('large', 240, 240, true);

enter image description here

Tips

  • Namely correctly your custom images. In your question, you use the term large but these dimensions are not so large. If you use a lot of dimensions of images, I recommended you to be clear of the naming to avoid any confusion. In your case, I would use medium instead of large.
  • To change these images that you have already uploaded, you should regenerate your thumbnails. Feel free and use this awesome plugin Regenerate Thumbnails. This plugin allows you to regenerate all thumbnail sizes for one or more images that have been uploaded to your Media Library.
| improve this answer | |
0

Using the_post_thumbnail doesn't crop an image, it just displays whichever WP-registered image size you request. By default, when you upload an image to the Media Library, several sizes are generated. The thumbnail is usually set to crop to a square, but the large image size is not.

You could change your media settings to force-crop and force the Large image size to be square.

Or, you could add a whole new image size, so you can use the Large images wherever you like on your site and not have to have them cropped square, but this would also generate your new additional image size so you'll always have a larger square image to pull into your code.

| improve this answer | |
  • Actually the .imgholder crops my thumbnail to 240px kindly check – Mulusa Pro Feb 26 at 21:46
  • Sure, you can use CSS to do faux cropping, where the browser downloads the larger file but it only displays a certain portion. But if you're using CSS to directly affect the image size, then the browser is just going to stretch the existing image. That's why the thumbnail (square) works but the large (not square) doesn't work - the CSS is stretching the not-square image into a square shape. – WebElaine Feb 26 at 23:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.