管理面板中特色图片的大小？

Question

一直在尝试一些自定义元框，但我读过或找不到的任何东西都无法帮助我实现我真正追求的目标。

我可以渲染一个新的元框，但我找不到在管理面板中实际更改帖子缩略图本身的输出的方法。

function new_post_thumbnail_meta_box() {
    global $post; 

    echo 'Content above the image.';

    $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true ); 
    echo _wp_post_thumbnail_html( $thumbnail_id ); 

    echo 'Content below the image.';
}
function render_new_post_thumbnail_meta_box() {
    global $post_type;

    // remove the old meta box
    remove_meta_box( 'postimagediv','post','side' );

    // adding the new meta box.
    add_meta_box('postimagediv', __('Featured Image'), 'new_post_thumbnail_meta_box', $post_type, 'side', 'low');
}
add_action('do_meta_boxes', 'render_new_post_thumbnail_meta_box');

如何在管理面板中显示更大或“实际尺寸”的特色图片？

复制包含函数并修改输出，这会引发服务器错误。

function _wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
            global $content_width, $_wp_additional_image_sizes;

           $post = get_post( $post );

            $upload_iframe_src = esc_url( get_upload_iframe_src('image', $post->ID ) );
            $set_thumbnail_link = '<p class="hide-if-no-js"><a title="' . esc_attr__( 'Set featured image' ) . '" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
            $content = sprintf( $set_thumbnail_link, $upload_iframe_src, esc_html__( 'Set featured image' ) );

            if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
                    $old_content_width = $content_width;
                    $content_width = 600;
                    if ( !isset( $_wp_additional_image_sizes['post-thumbnail'] ) )
                            $thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
                    else
                            $thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'post-thumbnail' );
                    if ( !empty( $thumbnail_html ) ) {
                            $ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
                            $content = sprintf( $set_thumbnail_link, $upload_iframe_src, $thumbnail_html );
                            $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail(\'' . $ajax_nonce . '\');return false;">' . esc_html__( 'Remove featured image' ) . '</a></p>';
                    }
                    $content_width = $old_content_width;
            }

            return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );
    }

或者我应该使用 add_image_size( 'post_thumbnail', 600, 400, true ); ?因为这就是它要寻找的东西？

Answer 1

以防万一有人在这个旧帖子上绊倒。

WP 引入了一个名为 admin_post_thumbnail_size 的新过滤器，让您能够在管理面板中更改默认图像大小。

要更改特色缩略图的大小，您可以使用以下内容：

function custom_admin_thumb_size($thumb_size){
  return "custom-image-size"; //or use something like array(400,400).
}
add_filter( 'admin_post_thumbnail_size', 'custom_admin_thumb_size');

Answer 2

您应该将_wp_post_thumbnail_html 替换为get_the_post_thumbnail

Answer 3

从WordPress 4.4 开始，引入了一个新的过滤器admin_post_thumbnail_size，它允许修改特色图像元框中帖子缩略图的显示大小。

当主题添加“缩略图后”支持时，会注册一个特殊的“缩略图后”图像尺寸，这与通过“设置”>“媒体”屏幕管理的“缩略图”图像尺寸不同。

我们可以使用此过滤器来更改post-thumbnail 的大小（266 x 266 像素）并将其修改为使用默认的thumbnail 大小（150 x 150 像素）。

/**
 * Change Display Size of Featured Image Thumbnail in WordPress Admin Dashboard
 */
add_filter( 'admin_post_thumbnail_size', function ( $size, $thumbnail_id, $post ) {
    $sizes = get_intermediate_image_sizes();

    $result = array_search( 'thumbnail', $sizes );

    $size = is_numeric( $result ) ? $sizes[ $result ] : array( 100, 100 );

    return $size;
}, 10, 3 );

如果intermediate thumbnail size 不可用，也可以指定或设置特定大小（例如，100 x 100 像素）作为后备。

Answer 4

函数_wp_post_thumbnail_html返回如下代码：

<p class="hide-if-no-js">
    <a title="Set featured image" href="http://example.com/wp-admin/media-upload.php?post_id=4573&#038;type=image&#038;TB_iframe=1" id="set-post-thumbnail" class="thickbox">
        <img width="266" height="90" src="http://example.com/wp-content/uploads/thumb2-3-846x288.png" class="attachment-post-thumbnail" alt="thumb2-3" />
    </a>
</p>
<p class="hide-if-no-js">
    <a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail('dfd8f3353b');return false;">
        Remove featured image
    </a>
</p> 

请注意，图片为 846x288，但在 img 标签属性中将其大小调整为 266x90。

Analyzing the function，我们看到如果有一个名为post_thumbnail的图像大小，它就会得到那个。否则，它会获得266x266 的图像大小（带裁剪）。您可以简单地复制该函数并修改为您想要的输出。

其他选项是使用过滤器admin_post_thumbnail_html 并删除img 宽度和高度属性：

add_filter( 'admin_post_thumbnail_html', 'filter_featured_img_so_17713997' );

function filter_featured_img_so_17713997( $html )
{
    $doc = new DOMDocument();
    $doc->loadHTML($html);

    $tags = $doc->getElementsByTagName('img');
    if(count($tags) > 0)
    {
           $tag = $tags->item(0);
           $tag->removeAttribute('width');
           $tag->removeAttribute('height');
           return $doc->saveHTML($tag);
    }

    return $html;
}

但是，结果可能不是您所期望的。如果图像大于266，则会从浏览器画布中溢出。

Answer 5

这是另一个使用自定义大小的缩略图或系统定义的“完整”大小的图像（您上传的图像的原始大小）作为管理面板中显示的特色图像的选项：

/**
 * step 1   - define custom image size
 *
 *          - either plan to use 'full' (returns the size of the image you uploaded) OR define our custom image size
 *          - so we can call one of those instead of the system defined default 'post-thumbnail'
 *
 *          - remainder of this example assumes using a custom image size, so it is defined
 *          - if using 'full', instead, then no need to define custom
 *          - so remove the following add_image_size line (and thereby skip step 1)
 */
add_image_size( 'admin-post-thumbnail', 846, 288, true );

/**
 * step 2   - replace the meta box with ours for standard post type only, especially so we can set our own callback and 
 *          - move it into the larger main column.
 *          - Note that in any event, the full size won't ever have greater width than the current column width
 *          - as CSS and modern admin panel make the image elements responsive to the column width.
 */
add_action('do_meta_boxes', 'so17713997_move_meta_box');

function so17713997_move_meta_box(){
    remove_meta_box( 'postimagediv', 'post', 'side' );
    add_meta_box('postimagediv', __('Featured Image'), 'so17713997_post_thumbnail_meta_box', 'post', 'normal', 'low');
}

// step 3   - custom callback to call our functional replacement for _wp_post_thumbnail_html for post type only
function so17713997_post_thumbnail_meta_box( $post ) {
    $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
    echo so17713997_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
}

/**
 * step 4   - replace _wp_post_thumbnail_html with our version that calls our thumbnail 'admin-post-thumbnail' instead of the default 'post-thumbnail'
 *
 *          - we could do more here, like adjust the content width variable, but not entirely necessary. The custom image size we defined will
 *          - handle most of it, plus the admin section these days has responsive CSS, so the image doesn't blow-out column width in any event.
 */
function so17713997_wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
    global $content_width, $_wp_additional_image_sizes;

    $post               = get_post( $post );
    $post_type_object   = get_post_type_object( $post->post_type );
    $set_thumbnail_link = '<p class="hide-if-no-js"><a title="%s" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
    $upload_iframe_src  = get_upload_iframe_src( 'image', $post->ID );

    $content = sprintf( $set_thumbnail_link,
        esc_attr( $post_type_object->labels->set_featured_image ),
        esc_url( $upload_iframe_src ),
        esc_html( $post_type_object->labels->set_featured_image )
    );

    if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
        $old_content_width = $content_width;
        $content_width = 266;
        if ( !isset( $_wp_additional_image_sizes['admin-post-thumbnail'] ) )    // use our custom image size instead of 'post-thumbnail' OR use 'full' for system defined fullsize image
            $thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
        else
            $thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'admin-post-thumbnail' ); // use our custom image size instead of 'post-thumbnail' OR use 'full' for system defined fullsize image
        if ( !empty( $thumbnail_html ) ) {
            $ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
            $content = sprintf( $set_thumbnail_link,
                esc_attr( $post_type_object->labels->set_featured_image ),
                esc_url( $upload_iframe_src ),
                $thumbnail_html
            );
            $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail(\'' . $ajax_nonce . '\');return false;">' . esc_html( $post_type_object->labels->remove_featured_image ) . '</a></p>';
        }
        $content_width = $old_content_width;
    }

    /**
     * Filter the admin post thumbnail HTML markup to return.
     *
     * @since 2.9.0
     *
     * @param string $content Admin post thumbnail HTML markup.
     * @param int    $post_id Post ID.
     */
    return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );
}

首先请注意，在帖子被保存或更新（视情况而定）之前，所选的特色图片可能不会反映更新后的大小。

此外，此 hack 还广泛使用了以下核心 WordPress 功能：

the_post_thumbnail(),
add_meta_box(),
post_thumbnail_meta_box()，以及
_wp_post_thumbnail_html

（我还没有足够的声誉发布两个以上的链接，所以用谷歌搜索它们。）

Answer 6

您是否尝试过使用set_post_thumbnail_size() 更改默认的特色图片大小？我遇到了同样的问题，而且效果很好。

Answer 7

默认情况下，WordPress 块编辑器使用方形缩略图显示特色图像。要改变这一点，我们需要应用 JavaScript 过滤器而不是 PHP 过滤器。一个非常简单的过滤器可以显示未裁剪的特色图像，如下所示：

wp.hooks.addFilter(
  "editor.PostFeaturedImage.imageSize",
  "uncroppedFeaturedImage",
  () => "post-thumbnail"
);

从enqueue_block_editor_assets 挂钩加载该脚本。也可以使用其他注册的图像尺寸（medium、large 等）。