Define image size for Media Library WordPress

Dbranes answers:

The grid view uses a Backbone micro template and fetches the data via ajax.

<strong>Why medium or full size in the grid view?:</strong>

The grid view is rendered with:

if ( 'image' === options.type ) {
options.size = this.imageSize();
}


in the <em>media-view.js</em> file.

In the <em>imageSize()</em> method you can see that <em>medium</em> size is used and if that size doesn't exists the <em>actual/full</em> size is used instead:


/**
* @param {string} size
* @returns {Object}
*/
imageSize: function( size ) {
var sizes = this.model.get('sizes');

size = size || 'medium';

// Use the provided image size if possible.
if ( sizes && sizes[ size ] ) {
return _.clone( sizes[ size ] );
} else {
return {
url: this.model.get('url'),
width: this.model.get('width'),
height: this.model.get('height'),
orientation: this.model.get('orientation')
};
}
},


If your <em>medium</em> size is missing, this could be easily solved with for example:

if ( 'image' === options.type ) {
options.size = this.imageSize( 'thumbnail' );
}


or some other image size, but we don't want to modify the core files.

<strong>A workaround:</strong>

Here's a workaround to add the missing <em>medium</em> size with another image size:

/**
* Media Grid View: Replace the "medium" image size with "replace_this_image_size" image size, when the former doesn't exists.
*
* @see http://www.wpquestions.com/question/showChronoLoggedIn/id/9941
*/

add_filter( 'wp_prepare_attachment_for_js', function( $response, $attachment, $meta ) {

$use_size = 'some_image_size'; // Edit this to your needs.

if( 'image' === $response['type'] && ! isset( $response['sizes']['medium'] ) ) {

if( isset( $response['sizes'][$use_size] ) ) {
$response['sizes']['medium'] = $response['sizes'][$use_size];
} else {
$response['sizes']['medium'] = wp_get_attachment_image_src( $response['id'], $use_size );
}

}

return $response;
}, 10, 3 );


<strong>Another workaround:</strong>

Another drastic approach would be to override (from a plugin code without modifying the core files) the Backbone micro template to your needs, for example with a check like:

<# if ( data.sizes.medium ) { #>
<img src="{{ data.sizes.medium.url }}" draggable="false" alt="" />
<# } else if ( data.sizes.replace_this_image_size) { #>
<img src="{{ data.sizes.replace_this_image_size.url }}" draggable="false" alt="" />
<# } else { #>
<img src="{{ data.size.url }}" draggable="false" alt="" />
<# } #>


but I'm not sure how frequently these micro templates are changing between WordPress versions.

Professore comments:

Thank you Dbranes, your answer definitely gave me the right direction, here is my working, perfect fitting solution:


add_filter( 'wp_prepare_attachment_for_js', function( $response, $attachment, $meta ) {
if (!empty($response)) {
$sizes_list = array(
'FOUR',
'THREE',
'TWO',
'ONE'
);
while ( !isset( $response['sizes']['medium'] ) && count( $sizes_list ) > 0 ) {
$cur_size = array_pop( $sizes_list );
if ( isset( $response['sizes'][$cur_size] ) ) {
$response['sizes']['medium'] = $response['sizes'][$cur_size];
}
}
}
return $response;
}, 999, 3 );
add_filter( 'image_size_names_choose', function( $sizes ) {
return array_merge( $sizes, array(
'ONE' => __('One'),
'TWO' => __('Two'),
'THREE' => __('Three'),
'FOUR' => __('Four')
) );
}, 10, 1 );

I needed to filter "image_size_names_choose" to get my sizes, then "wp_prepare_attachment_for_js", as you suggested, to set "medium" size.

Thank you.

Dbranes comments:

Glad to hear it worked out for you.

Good idea to reuse the image sizes set by <em>image_size_names_choose</em>.

In general it would be better to have not too many image sizes in <em>image_size_names_choose</em>, to limit the number of database calls. (just like you did in your solution by using few sizes).