Cách hiển thị tệp .ico trong thư viện phương tiện

Tôi đã thêm một .icoloại mime vào trang web WordPress của mình và tôi có thể tải lên các tệp favicon. Nhưng thư viện phương tiện chỉ hiển thị default.pnghình ảnh cho những hình ảnh này và cả trong Tùy biến. Làm cách nào tôi có thể khiến WordPress hiển thị những hình ảnh favicon này, trong thư viện phương tiện và tùy biến?

media-library favicon

— AlanP
nguồn

Cập nhật: Có vẻ như điều này sẽ được hỗ trợ trong 5.0+. Xem vé # 43458

Mặc định

Đây là cách các tệp favicon ( .ico) hiển thị trong chế độ xem Lưới truyền thông :

mặc định

Đây là phần tương ứng của mẫu vi mô:

<# } else if ( 'image' === data.type && data.sizes ) { #>
    <div class="centered">
        <img src="{{ data.size.url }}" draggable="false" alt="" />
    </div>
<# } else { #>
    <div class="centered"> 
        <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
           <img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
        <# } else { #>
            <img src="{{ data.icon }}" class="icon" draggable="false" />
        <# } #>
    </div>
    <div class="filename">
        <div>{{ data.filename }}</div>
    </div>
<# } #>

nơi data.sizestrống rỗng cho các favicon .

Phương pháp 1) Sử dụng `wp_mime_type_icon`bộ lọc

Loại mime cho favicon là image/x-icon.

Tôi đã quản lý để hiển thị các .icotệp trong chế độ xem Lưới Truyền thông với:

add_filter( 'wp_mime_type_icon', function( $icon, $mime, $post_id )
{
    if( $src = false || 'image/x-icon' === $mime && $post_id > 0 )
        $src = wp_get_attachment_image_src( $post_id );

    return is_array( $src ) ? array_shift( $src ) : $icon;
}, 10, 3 );

ở đây điều quan trọng ở đây là giữ tham số thứ ba wp_get_attachment_image_srclà $icon = false(theo mặc định) để tránh vòng lặp vô hạn!

Các favicon sau đó được hiển thị như thế này:

Phiên bản sửa đổi # 1

Phương pháp 2) Sử dụng `wp_prepare_attachment_for_js`bộ lọc

Khi chúng tôi tải chế độ xem lưới phương tiện, chúng tôi thực hiện cuộc gọi đến wp_ajax_query_attachmentstrình xử lý. Nó thực hiện các truy vấn đính kèm sau đây:

$query = new WP_Query( $query );
$posts = array_map( 'wp_prepare_attachment_for_js', $query->posts );

Trong wp_prepare_attachment_for_jschức năng này , nhiều thông tin khác nhau được thêm vào WP_Postbài đăng và chúng được lọc với:

return apply_filters( 'wp_prepare_attachment_for_js', $response, $attachment, $meta );

trong đó đầu ra là $responsemảng.

Chúng tôi có thể sử dụng bộ lọc này để thêm các kích thước còn thiếu cho favicon:

add_filter( 'wp_prepare_attachment_for_js', function( $response, $attachment, $meta )
{
    if( 'image/x-icon' === $response['mime'] 
         && isset( $response['url'] )
         && ! isset( $response['sizes']['full'] )
    )
    {
            $response['sizes'] = array( 'full' => array( 'url' => $response['url'] ) );
    }   
   return $response;
}, 10, 3 );

và sau đó họ sẽ xuất hiện như thế này:

Sửa đổi số 2

Lưu ý rằng chúng tôi chỉ đặt urlphần và không width, heightvà orientation. Chúng ta có thể mở rộng thêm giải pháp để thêm dữ liệu này, với sự trợ giúp của wp_get_attachment_image_src()chức năng, ví dụ. Nhưng tôi để điều đó cho bạn ;-)

Một số `$response`ví dụ:

Đây là một ví dụ về $responsemảng cho favicon.icotệp:

Array 
(
    [id] => 803
    [title] => favicon
    [filename] => favicon.ico
    [url] => http://example.tld/wp-content/uploads/2015/02/favicon.ico
    [link] => http://example.tld/?attachment_id=803
    [alt] => 
    [author] => 11
    [description] => 
    [caption] => 
    [name] => favicon
    [status] => inherit
    [uploadedTo] => 0
    [date] => 1423791136000
    [modified] => 1423791136000
    [menuOrder] => 0
    [mime] => image/x-icon
    [type] => image
    [subtype] => x-icon
    [icon] => http://example.tld/wp-includes/images/media/default.png
    [dateFormatted] => February 13, 2015
    [nonces] => Array
        (
            [update] => 4fac983f49
            [delete] => efd563466d
            [edit] => df266bf556
        )

    [editLink] => http://example.tld/wp-admin/post.php?post=803&action=edit
    [meta] => 
    [authorName] => someuser
    [filesizeInBytes] => 1406
    [filesizeHumanReadable] => 1 kB
    [compat] => Array
        (
            [item] => 
            [meta] => 
        )

)

Đây là một ví dụ cho WordPress-Logo.jpghình ảnh:

ps: Chúng tôi đặc biệt quan tâm đến $response['size']phần của những ví dụ này.

— bạch dương
nguồn

Cách hiển thị tệp .ico trong thư viện phương tiện

Mặc định

Phương pháp 1) Sử dụng wp_mime_type_iconbộ lọc

Phương pháp 2) Sử dụng wp_prepare_attachment_for_jsbộ lọc

Một số $responseví dụ:

Phương pháp 1) Sử dụng `wp_mime_type_icon`bộ lọc

Phương pháp 2) Sử dụng `wp_prepare_attachment_for_js`bộ lọc

Một số `$response`ví dụ: