Show all image sizes in Gutenberg (MediaUpload) [WordPress]

For me, they were gone overnight ...

  1. The problem
  2. The solution
  3. Conclusion

My last blog post has been delayed a bit because since the last update of WordPress (5.2.2), the thumbnail sizes I created were no longer loaded when I selected a picture with the MediaUpload component.

The problem

In one of my self-programmed blocks, I have had the function of going through every thumbnail size and continuing to use it accordingly.

['uhd','wqhd','fhd'].forEach(function (size){
	if (media.sizes.hasOwnProperty(size)) {
		image[size+'-url'] = media.sizes[size].url;
		image[size+'-width'] = media.sizes[size].width;
		image[size+'-height'] = media.sizes[size].height;

However, when I wrote my last post I realized that the sizes I had created were not returned to my Gutenberg editor.

This had led to the cause that the original pictures were loaded and the pictures I upload are partially over 10mb in size.

The solution

Luckily I found a quick solution and was able to implement it directly. For whatever reason, this problem was solved by declaring my thumbnail sizes with the action image_size_names_choose.

function wpse_setup_theme() {
	add_theme_support( 'post-thumbnails');
	add_image_size( 'full-hd', 1920, 1080, array('center') );
	add_image_size( 'uhd' , 3840, 2160, array('center'));
	add_image_size( 'wqhd' , 2560, 1440, array('center'));
	add_image_size( 'fhd' , 1920, 1080, array('center'));
	add_image_size( 'xga' , 1024, 768, array('center'));
	add_image_size( 'vga' , 640, 480, array('center'));
	add_image_size( 'qvga' , 320, 240, array('center'));
add_action( 'after_setup_theme', 'wpse_setup_theme' );

function my_custom_sizes( $sizes ) {
	return array_merge( $sizes, array(
		'full-hd' => 'full-hd',
		'uhd' => 'uhd',
		'wqhd' => 'wqhd',
		'fhd' => 'fhd',
		'xga' => 'xga',
		'vga' => 'vga',
		'qvga' => 'qvga',
	) );
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

In the official documentation of WordPress it is said that this function is to make the set thumbnail sizes, human readable, that is, if you have a product_spotlight size, for example, you can write: Image displayed at recommended products.


Since you do not need any names in the programming, which must be readable by a human, I strongly assume that this is a careless mistake.

Hopefully, the WordPress core team will fix this problem as quickly as possible so that WordPress users who have no programming skills will not face any problems.


Experience Gutenberg Program technology Tips WordPress

Beitrag teilen

WhatsApp it

Folgen Sie uns