管理面板中的精选图片大小？

时间：2013-07-18 03:26:54

标签： wordpress

正在尝试一些自定义元框，但我读过或找不到任何内容正在帮助我实现我实际所追求的目标。

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

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）; ？既然这就是它的样子？

7 个答案:

答案 0 :(得分：4)

以防万一有人在这个老帖子上磕磕绊绊。

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');

答案 1 :(得分：1)

您应该将_wp_post_thumbnail_html替换为get_the_post_thumbnail

答案 2 :(得分：1)

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

  

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

我们可以使用此过滤器更改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像素）或设置为后备。

答案 3 :(得分：0)

函数_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，但已在266x90代码属性中将其调整为img。

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，则会从浏览器画布中渗出。

答案 4 :(得分：0)

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

/**
 * 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

（我还没有足够的声誉发布超过两个链接，所以google他们。）

答案 5 :(得分：0)

您是否尝试过使用set_post_thumbnail_size()更改默认的特色图片尺寸？我遇到了同样的问题，这很有效。

答案 6 :(得分：0)

默认情况下，WordPress块编辑器使用方形缩略图显示“特色图片”。要更改此设置，我们需要应用JavaScript过滤器而不是PHP过滤器。显示未裁剪的精选图片的非常简单的过滤器如下所示：

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

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

相关问题
最新问题