hardcrop images in gutenberg "latest posts" block

admin管理员组

文章数量:1321259

I like the gutenberg "latest posts" block. The problem I have with it is that it doesn't hardcrop images that users upload to the posts. Is there a way to choose a hard-cropped or custom size that I have created through the add_image_size() function?

I don't really have any code, but I think this question is on topic because it's purely about wordpress core. I'm sorry if it isn't!

What I have used to create my custom image size is this though:

add_action( 'after_setup_theme', 'aeroleds_image_sizes' );
function aeroleds_image_sizes() {
    add_image_size( 'banner-image', 400, 300, true ); // (cropped)
}

I like the gutenberg "latest posts" block. The problem I have with it is that it doesn't hardcrop images that users upload to the posts. Is there a way to choose a hard-cropped or custom size that I have created through the add_image_size() function?

I don't really have any code, but I think this question is on topic because it's purely about wordpress core. I'm sorry if it isn't!

What I have used to create my custom image size is this though:

add_action( 'after_setup_theme', 'aeroleds_image_sizes' );
function aeroleds_image_sizes() {
    add_image_size( 'banner-image', 400, 300, true ); // (cropped)
}

• images
• block-editor

Share Improve this question asked Sep 29, 2020 at 5:44 presswordpressword 38011 gold badge44 silver badges1313 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 4

The Latest Posts block uses (wp.data.select( 'core/block-editor' ).getSettings() to get) the image sizes in the editor settings which can be filtered via the block_editor_settings hook in PHP:

apply_filters( 'block_editor_settings', array $editor_settings, WP_Post $post )

Filters the settings to pass to the block editor.

And the setting name used for the image sizes is imageSizes.

So for example, to make the custom banner-image size be available in the featured image size dropdown (in the Latest Posts block's settings):

add_filter( 'block_editor_settings', 'wpse_375600' );
function wpse_375600( $editor_settings ) {
    $editor_settings['imageSizes'][] = [
        'slug' => 'banner-image',
        'name' => 'Banner Image',
    ];

    return $editor_settings;
}

And in addition to that the filter being specific to the block editor, your callback can also get access to the post being edited, which is the second parameter ($post) in the filter hook as you can see above. So you could for example filter the settings only for certain posts.

Resources:

• The Latest Posts block on GitHub

• The Block Editor's Data » getSettings()

• Editor Filters » Editor Settings

it looks like you have to also pass your custom image thumbnail sizes to the filter image_size_names_choose. I tried it and this works for displaying custom images sizes as choices in the latest posts dropdown:

add_filter('image_size_names_choose', function( $sizes ){
    return array_merge( $sizes, [ 'banner-image' => 'banner image' ] );
});

This blog explains a similar issue, so I tried his suggestion. https://talhasariyuerek/en/show-all-image-sizes-in-gutenberg-mediaupload-wordpress/

And by the way, the Gutenberg component that controls that dropdown is https://github/WordPress/gutenberg/tree/master/packages/block-editor/src/components/image-size-control

本文标签： hardcrop images in gutenberg quotlatest postsquot block