Showing other image sizes in the Media Gallery dialog

As I was developing the Really Simple Gallery Widget, I started defining more custom image sizes and was irritated to find that they didn’t show in the Media Gallery dialog, even though they were being generated. So, what’s a girl to do except fix that? I noticed that the Max Image Size Control plugin did add the sizes, so I looked inside the plugin to see how that was happening. Turns out there’s a not very well-known filter “attachment_fields_to_edit” which allowed me to do just what I needed to. Unfortunately, it doesn’t look too pretty because each of the items just floats to the left and they are not of consistent heights, but it works for what I need it to do. To use, just add the following to your functions.php or your plugin file.

/**
 * Add intermediate image sizes to media gallery modal dialog
 */

function image_sizes_attachment_fields_to_edit( $form_fields, $post ) {
	if ( !is_array( $imagedata = wp_get_attachment_metadata( $post->ID ) ) )
		return $form_fields;

	if ( is_array($imagedata['sizes']) ) :
		foreach ( $imagedata['sizes'] as $size => $val ) :
			if ( $size != 'thumbnail' && $size != 'medium' && $size != 'large' ) :
				$css_id = "image-size-{$size}-{$post->ID}";
				$html .= '<div class="image-size-item"><input type="radio" name="attachments[' . $post->ID . '][image-size]" id="' . $css_id . '" value="' . $size . '" />';
				$html .= '<label for="' . $css_id . '">' . $size . '</label>';
				$html .= ' <label for="' . $css_id . '" class="help">' . sprintf( __("(%d&nbsp;&times;&nbsp;%d)"), $val['width'], $val['height'] ). '</label>';
				$html .= '</div>';
			endif;
		endforeach;
	endif;

	$form_fields['image-size']['html'] .= $html;
	return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'image_sizes_attachment_fields_to_edit', 100, 2 );

In action:

Intermediate sizes in the WordPress Media Gallery dialog

Resources:

Showing other image sizes in the Media Gallery dialog

9 thoughts on “Showing other image sizes in the Media Gallery dialog

  1. Marcelo Cannobbio says:

    Works great!
    BUT…
    There’s an error in the code:

    `add_filter( __abENT__apos;attachment_fields_to_edit__abENT__apos;, __abENT__apos;esm_attachment_fields_to_edit__abENT__apos;, 100, 2 );`

    should be:

    `add_filter( __abENT__apos;attachment_fields_to_edit__abENT__apos;, __abENT__apos;image_sizes_attachment_fields_to_edit__abENT__apos;, 100, 2 );`

    since “image_sizes_attachment_fields_to_edit” is the name of the function.

    Thank you!

    Like

    1. Helen says:

      Whoops, you’re right! That’s what I get for copying things over from work code and forgetting to un-namespace fully. Fixed now – thanks for catching that.

      Like

  2. goto10 says:

    Hi,

    I just wanted to chime in and mention that there’s now a filter dedicated to adding custom image sizes to the gallery iframe: http://core.trac.wordpress.org/ticket/18520

    // Example image size added:
    add_image_size( ‘just_testing’, 100, 100, true );

    // Add your example image size to the selection:
    add_filter( ‘image_size_names_choose’, ‘namespace_image_size_names_choose’ );
    function namespace_image_size_names_choose( $image_sizes ) {
    $image_sizes[‘just_testing’] = __( ‘Just Testing’, ‘yourtextdomain’ );
    return $image_sizes;
    }

    Cheers!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s