Wordpress images not cropping properly

Question

I have my post image thumbnails set with:

  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(1280, 436, true); 
  add_image_size('general-thumb', 600, 339, true);   

They are resized into two columns with the following css:

   max-width: 100%;
   height: auto;

The columns they are displayed in are about 348px wide.

The issue is that when I upload an image that is less than the dimensions 600x339 in either height or width, they show up incorrectly on the page.

I think the reason for this is that 600x339 is the starting 'box' within which an image is cropped. It's then resized to fill the width of the column while retaining the aspect ratio of the original image size.

What are some ways I can fix this with wordpress' functions or css hacks?

What I think needs to happen so that the images can resize dynamically is have every uploaded image automatically cropped to the correct aspect ratio without resizing it. But this needs to start with the original image's width and height, not the predefined box dimensions.

Thanks!

Answer 1

It sounds like your problem occurs before the image is cropped/ resized and displayed in the page - the original image is too small.

You can require minimum dimensions for uploaded images, see: How to Require a Minimum Image Dimension for Uploading?

Then, to resize the uploaded image without cropping it, define the image size with a 'soft crop' using 'false' in the third parameter:

add_image_size('general-thumb', 600, 339, false);

Finally, using the image as a background image for an element may be an alternative way of getting the sizing right.

You can position the element within your layout with whatever height, width, minimum height etc is required and use the CSS background-size to fill/ position the image within the element.

For example:

background-size: contain;

Will ensure the image is as large as possible without hiding any part of it.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

The issue is that when I upload an image that is less than the dimensions 600x339 in either height or width, they show up incorrectly on the page.

I did not understand this statement as you wrote it, but when I started researching I found what you meant, so I am writing this answer to document this for others who do not understand your meaning, or how WP processes images.

When you are uploading images to WordPress, they are automatically processed and several sizes are cropped or resized depending on settings.

A developer can declare her custom sizes using the code that was used in this question.

add_theme_support('post-thumbnails');
set_post_thumbnail_size(1280, 436, true); 
add_image_size('general-thumb', 600, 339, true);

for set_post_thumbnail() The first variable is Width, the second Height, and the third indicates cropping type: Hard(true) or Soft(false)

for add_image_size() The first string is the name you want to call the image, followed by width, height, and cropping.

Hard cropping reduces the dimension proportionately to the requested number, then cuts off everything else to match the odd dimension. For example: if you upload a 800x600 photo you want cropped to 600x200, WP will reduce 800w proportionately down to 600w, then crop the remaining 450h down to 200h. I believe it centers the image and takes it evenly from top and bottom.

Soft cropping reduces the whole image proportionately, maintaining the whole image. For example: That 800x600 image you uploaded would soft crop down to smallest maximum dimension 200h, leaving the width proportionately 267w.

In this case, I believe the OP definitely wants to Hard Crop, as indicated in the code.

The issue that is being encountered is that WP will not scale up an image to match the proportions. If you want that 600w x 200h image, but upload 550w x 300h, it will crop the 300h down to 200h, but leave the 550w. Most of the documentation I have run across makes this very clear. The 'fix' I know most people use is to scale the image in a desktop program before uploading it if it absolutely cannot be gotten at a larger scale already.

OP is looking for a solution that will allow WP to scale up the image to the requested dimensions. This solution can be found here: How to scale up image into thumbnail without distorting it?

Axlmedia (the source quoted) also adds this warning about the solution:

The slight downside (not much to worry about with the server space we have today) is that if you for example upload a 16×16 favicon to your media library, it will be cropped and upscaled to all larger thumbnail sizes available. So, some more images will be created.

As for older images, WordPress does not go back and revert your older thumbnails. These settings would only work on everything new from point of install onward. Once your solution is set, you can find a plugin or two that will go back in and rescale every image to the new settings. I do not know if it will work with the added upscale function. The two plugins suggested by user Stanislau Ladutska may offer a quicker overall solution.

Answer 3

You can try to crop the image in places you want manually using the WP_Image_Editor class. Here is a simple example

$image = 'http://karunshakya.com.np/wp-content/themes/twentyeleven/images/headers/lanterns.jpg';
$img_size = getimagesize($image);
$img_process = wp_get_image_editor( $image ); // Return an implementation that extends <tt>WP_Image_Editor</tt>

if ( ! is_wp_error( $img_process ) ) {
    //$img_process->resize( 1920, 661, array( 'left', 'top' ) );
    $img_process->crop( 0, 0, $img_size[0], $img_size[1], 600, 339 );
    $img_process->save( $image );
    $img_process->set_quality( 100 );
}

Answer 4

It's because wordpress do not use upscale for thumbnails by default.

You could use this plugin to solve this problem: https://wordpress.org/plugins/thumbnail-upscale/

It will affect only new uploaded images. To regenerate your old images use this plugin: https://wordpress.org/plugins/regenerate-thumbnails/

Answer 5

Having a solution:

First register thumbnail size in function.php

add_image_size( 'cp-thumb', 600, 339, true ); // (cropped) Generate thumbnail while uploading image.

Then call it in post loop in following way:

<div class="outer-div">
  <div class="inner-div">
    <?php get_the_post_thumbnail( $thumbnail->ID, 'cp-thumb' ); ?>
  </div>
</div>

Set the inner div as table-cell, align center vertically and horizontally. In this case if the image size is smaller than requirement. Positioning or layout will not disturbed.

Give it a try.

Thanks Vee