WordPress Images – Soft Versus (Vs) Hard Crop

Are you having trouble getting your images the correct size? After altering them time after time only to find them displaying incorrectly on your WordPress site? The answer could be as simple as defining a soft or hard crop.

What is Hard Crop?

A hard crop is where the image is not resized, but selects a number of pixels (width and height) starting from the center of the image.

Here is the original image, the dimensions are 1000 x 288 pixels.

Here is the image “hard cropped” at 735x 400:

What is Soft Crop?

A soft crop takes the same image and does not exceed the height or width of the defined image size. It stretches it proportionately.

Here is an example the above 1000 x 288 image, but set to “soft crop” to 735 x 400

Why Would You Want a Hard Crop?

I don’t know? Leave a reply if you can think of a good reason. I have read them, but they were not logical. If you have a image that you’ve created, why would you want any part of it cut off from the center? The image is one of the most important pieces of your blog.

How To Change Your Theme to Soft Or Hard

  • SSH or navigate to your files on your website
    • public_html/wp-content/themes/<themename>
  • open the functions.php file
  • search for the section that has functions add_image_size
  • Here is an example:
    •  add_image_size( 'hitmag-landscape', 1120, 450, false );
                          add_image_size( 'hitmag-featured', 735, 400, false );
                          add_image_size( 'hitmag-grid', 348, 215, false );
                          add_image_size( 'hitmag-list', 290, 220, false );
                          add_image_size( 'hitmag-thumbnail', 135, 93, false );
                      
  • All of these examples are set to “soft crop”
  • The syntax is:
  • add_image_size( string $name, int $width, int $height, bool|array $crop = false )
    
            Description #Description
            Cropping behavior for the image size is dependent on the value of $crop:
    
            If false (default), images will be scaled, not cropped.
            If an array in the form of array( x_crop_position, y_crop_position ):
            x_crop_position accepts ‘left’ ‘center’, or ‘right’.
            y_crop_position accepts ‘top’, ‘center’, or ‘bottom’. Images will be cropped to the specified dimensions within the defined crop area.
            If true, images will be cropped to the specified dimensions using center positions.
            

If you want it to be “hard cropped” it should be true at the end, otherwise set it to false.

Conclusion

I do not know why you would want anything other than soft cropped for images, but most themes seem to auto set it to “hard crop”.

Note: once you change the default for a theme, the settings will change back to the default if you upgrade the theme. If this is an issue, then you should look into a child theme. With a child theme you can make changes to the theme without worries of updates to the parent theme. It is not the easiest of things to implement, but best for anyone that wants to fully edit an existing theme and make it their own.

About Daniel Fredrick

Technology enthusiast, Programmer, Network Engineer CCIE# 17094

View all posts by Daniel Fredrick →

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.