Menu

Additional Image Sizes in WordPress

We can easily add new image sizes to our theme or plugin with a few line of codes, but we could use the extra sizes from code, and not from the Media Selector.

By adding a function to our code, we can select our extra image sizes from the media gallery.

1. Adding the new sizes:

add_action( 'after_setup_theme', 'extend_image_sizes' );
function extend_image_sizes() {
  add_image_size( 'square', 600, 600, array( 'center', 'center' ) );
  add_image_size( 'rectangle', 1200, 600, array( 'center', 'center' ) );
}

More info: https://codex.wordpress.org/Function_Reference/add_image_size

2. Make them selectable

add_filter( 'image_size_names_choose', 'extend_image_size_selection' );
function extend_image_size_selection( $args ) {
  //get the global var
  global $_wp_additional_image_sizes;
  // make the names human friendly by removing dashes and capitalising
  foreach( $_wp_additional_image_sizes as $key => $value ) {
    $custom[$key] = __( ucwords( str_replace( '-', ' ', $key ) ) );
  }
  return array_merge( $args, $custom );
}

Have something on your mind?