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.
Leave a Reply