• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (deprecated)
You are here: Home / Dev Tips / Change Render Size of Featured Image in WordPress Gutenberg Block Editor

Change Render Size of Featured Image in WordPress Gutenberg Block Editor

Last updated on May 7, 2023 by Sal Ferrarello

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).

Browser console with code to set Featured Image preview size.

Original Rendering

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

Featured Image preview at default 'Large' size

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.

Featured Image preview at square 'thumbnail' size

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.

Featured Image preview at default 'Large' size

Sal Ferrarello
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.

Filed Under: Dev Tips, Programming Tagged With: Gutenberg, JavaScript, WordPress, WordPress Filter

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in