• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Dev Tips / WordPress Maintain Aspect Ratio Thumbnail

WordPress Maintain Aspect Ratio Thumbnail

Last updated on September 16, 2015 by Sal Ferrarello

In WordPress your thumbnails will be cropped to exactly 150px by 150px regardless of the original aspect ratio. With this setting, if your original image is very short and wide, the left and right edges will be removed to make the image square. This is called “hard cropping”. In many cases this works well, but in some cases it causes problems.

When defining new image sizes using the WordPress add_image_size() function, you can define the crop mode with the third parameter (true for hard cropping as described above or false which scales the image rather than cropping).

Since we’re not defining a new image size but rather modifying the existing thumbnail image size, we need to modify the cropping in a different way. If you want to maintain the aspect ratio of your thumbnails, rather than forcing them to be exactly 150px by 150px, you can do this in (at least) two ways.

Maintain Aspect Ratio for Thumbnail via WordPress Setting

In the WordPress admin section, Settings > Media (/wp-admin/options-media.php), there is a checkbox for Crop thumbnail to exact dimensions (normally thumbnails are proportional). By unchecking this box, your thumbnails will maintain the original aspect ratio.

WordPress Maintain Aspect Ratio Thumbnail

Maintain Aspect Ratio for Thumbnail via PHP Code

As a developer, one of my goals is to move as much configuration as possible into my code base rather than having it live in the database. To this end, you can add a filter to your code to force the behavior of the thumbnails maintaining the aspect ratio of the original image. This effectively unchecks the Crop thumbnail to exact dimensions checkbox described above (and prevents it from being checked).

add_filter( 'pre_option_thumbnail_crop', '__return_zero' );

You can add this line of code in your functions.php file.

Cropping Changes are Not Retroactive

Changing the cropping settings for thumbnails will not affect images that have already been uploaded. If you want to apply these settings to already uploaded images, I suggest using the excellent Regenerate Thumbnails plugin.

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Dev Tips, Programming Tagged With: WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in