Cara menampilkan file .ico di perpustakaan media

13

Saya telah menambahkan .icotipe mime ke situs WordPress saya dan saya dapat mengunggah file favicon. Tetapi perpustakaan media hanya menampilkan default.pnggambar untuk gambar-gambar ini dan juga di Customizer. Bagaimana saya bisa mendapatkan WordPress untuk menampilkan gambar favicon ini, di perpustakaan media dan penyesuai?

AlanP
sumber

Jawaban:

15

Pembaruan: Sepertinya ini akan didukung di 5.0+. Lihat tiket # 43458

Default

Ini adalah bagaimana file favicon ( .ico) muncul di tampilan Media Grid :

standar

Ini adalah bagian yang sesuai dari template mikro:

<# } 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>
<# } #>

di mana data.sizeskosong untuk favicons .

Metode 1) Menggunakan wp_mime_type_iconfilter

Jenis pantomim untuk favicons adalah image/x-icon.

Saya berhasil menampilkan .icofile dalam tampilan Media Grid dengan:

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

di mana penting di sini untuk menjaga parameter ketiga wp_get_attachment_image_srcas $icon = false(secara default) untuk menghindari infinite loop!

Favicon kemudian ditampilkan seperti ini:

Versi modifikasi # 1

Metode 2) Menggunakan wp_prepare_attachment_for_jsfilter

Saat kami memuat tampilan kisi media, kami melakukan panggilan ke wp_ajax_query_attachmentshandler. Ia melakukan permintaan lampiran berikut:

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

Dalam wp_prepare_attachment_for_jsfungsi ini , berbagai informasi ditambahkan ke WP_Postposting dan disaring dengan:

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

di mana output adalah $responsearray.

Kita dapat menggunakan filter ini untuk menambahkan ukuran yang tidak ada untuk 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 );

dan mereka akan muncul seperti ini:

Modifikasi # 2

Perhatikan bahwa kita hanya mengatur urlbagian dan bukan bagian width, heightdan orientation. Kami selanjutnya dapat memperluas solusi untuk menambahkan data ini, dengan bantuan wp_get_attachment_image_src()fungsi, misalnya. Tapi aku menyerahkannya padamu ;-)

Beberapa $responsecontoh:

Berikut ini contoh $responsearray untuk favicon.icofile:

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] => 
        )

)

Berikut ini contoh untuk WordPress-Logo.jpggambar:

Array
(
    [id] => 733
    [title] => WordPress-Logo
    [filename] => WordPress-Logo.jpg
    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo.jpg
    [link] => http://example.tld/2015/02/10/test/wordpress-logo/
    [alt] => 
    [author] => 1
    [description] =>
    [caption] =>
    [name] =>  wordpress-logo
    [status] => inherit
    [uploadedTo] => 784
    [date] => 1423314735000
    [modified] => 1423571320000
    [menuOrder] => 0
    [mime] => image/jpeg
    [type] => image
    [subtype] => jpeg
    [icon] => http://example.tld/wp-includes/images/media/default.png
    [dateFormatted] => February 7, 2015
    [nonces] => Array
        (
            [update] => cb6a4bca10
            [delete] => 068a4d3897
            [edit] => 14b7d201ff
        )

    [editLink] => http://example.tld/wp-admin/post.php?post=733&action=edit
    [meta] => 
    [authorName] => someuser
    [uploadedToLink] => http://example.tld/wp-admin/post.php?post=784&action=edit
    [uploadedToTitle] => 20150209021847
    [filesizeInBytes] => 127668
    [filesizeHumanReadable] => 125 kB
    [sizes] => Array
        (
            [thumbnail] => Array
                (
                    [height] => 150
                    [width] => 150
                    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo-150x150.jpg
                    [orientation] => landscape
                )

            [medium] => Array
                (
                    [height] => 184
                    [width] => 300
                    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo-300x184.jpg
                    [orientation] => landscape
                )

            [full] => Array
                (
                    [url] => http://example.tld/wp-content/uploads/2015/02/WordPress-Logo.jpg
                    [height] => 620
                    [width] => 1010
                    [orientation] => landscape
                )

        )

    [height] => 620
    [width] => 1010
    [orientation] => landscape
    [compat] => Array
        (
            [item] => 
            [meta] => 
        )

)

ps: Kami secara khusus tertarik pada $response['size']bagian dari contoh-contoh ini.

birgire
sumber