WP - Reorganize Media Library Image Order

Readme.md

This is important when adding custom image sizes. The FoundationPress theme add new sizes by default. What happens is when you add new images sizes they go at the end of the list, so it would be, "Thumbnail, Medium, Large, Full Size, Small, XLarge". This is confusing to the user and will auto select medium normally. The best order is to have the image sizes in order from smallest to largest, then full size, then the thumbnail.

The important piece is after the comment "Unset WP Default sizes so they can be reordered with new custom sizes". This removes them from the list of available image sizes. Then right after you re-add them in order as well as custom sizes.

FoundationPress theme you can edit to add the "unset" rules then add them into the $sizes array. More generically, you can add this to functions.php.

responsive-images.php

// Register the new image sizes for use in the add media modal in wp-admin
function foundationpress_custom_sizes( $sizes ) {

	// Unset WP Default sizes so they can be reordered with new custom sizes
	unset( $sizes['thumbnail']);
	unset( $sizes['medium']);
    unset( $sizes['large']);
	unset( $sizes['full']);

	return array_merge(
		$sizes, array(

			'xsmall'  => __( 'XSmall' ), // Custom size
			'small'  => __( 'Small' ), // Custom size
			'medium' => __( 'Medium' ), // WP default
			'large'  => __( 'Large' ), // WP default
			'xlarge' => __( 'XLarge' ), // Custom size
			'full' => __( 'Full Size' ), // WP default
			'thumbnail' => __( 'Thumbnail' ), // WP default
		)
	);
}
add_filter( 'image_size_names_choose', 'foundationpress_custom_sizes' );