SDAC Blog

Read our latest blog posts, learn something new, find answers, and stay up to date.

Control Image Cropping Better (WordPress)

Recently we were working on a project that used the WordPress add_image_size() function to crop images a specific size for the archive view. We noticed that there were a lot of faces getting cut off (at the top of the image). Fortunately – there is a way to fix this:

In our theme we were using:
add_image_size(‘archive, 220, 120’, true) which hard cropped the image at 220px x 120px) but the hard crop started at the center of the image and went out. In order to reduce the head cropping – we changed it to:
add_image_size(‘archive, 220, 120’, array(‘center’, ‘top’)). Having something in the array still signals for a hard crop – but it starts at the top/center (as I specified) vs. center/center.

After changing the crop options – make sure you rebuild your thumbnails with something like: AJAX Thumbnail Rebuild

There are other options as well:

  • x_crop_position accepts ‘left’ ‘center’, or ‘right’
  • y_crop_position accepts ‘top’, ‘center’, or ‘bottom’

Further documentation: https://developer.wordpress.org/reference/functions/add_image_size/