Change Render Size of Featured Image in WordPress Gutenberg Block Editor

In the WordPress block editor (a.k.a. Gutenberg) the Featured Image is rendered at the WordPress large image size by default. By adding a WordPress JavaScript filter to the editor.PostFeaturedImage.imageSize hook, we can change this default rendering.

Render the Featured Image in Editor as “Thumbnail” size

The default behavior of the large image size in WordPress retains the original aspect ratio. On the other hand, the default behavior of the thumbnail image size in WordPress creates a square cropped image.

Here we are going to replace the large rendering with the thumbnail rendering.

// Set Featured Image Render Size in Editor to Thumbnail.
wp.hooks.addFilter(
  'editor.PostFeaturedImage.imageSize',
  'salcode.postFeatImgSizeThumbnail',
  function() {
      return 'thumbnail';
  }
);

Ultimately, you’ll want to add this JavaScript to your WordPress site to consistently get this behavior but as a testing step you can paste it directly in the browser console (see How to Run Code in the Browser Console).

Original Rendering

Here we can see the original rendering in the block editor, where the image is displayed at the original aspect ratio.

Rendering After Applying Filter

After applying our filter, we need to cause the area to re-render – we can do this by collapsing and re-opening the Featured image section. On re-render, we can see the thumbnail square image rendered.

Removing Our Filter

When we added our filter, the second parameter (salcode.postFeatImgSizeThumbnail) was the namespace. This namespace acts as an identifier to our filter and allows us to remove it by name.

Running the following from the browser console

// Remove my filter on Featured Image Render Size in Editor.
wp.hooks.removeFilter(
  'editor.PostFeaturedImage.imageSize',
  'salcode.postFeatImgSizeThumbnail'
);

and triggering a re-render, by collapsing the Featured image and re-opening it, restores the original large (i.e. non-square) image.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.