Medya kitaplığında .ico dosyaları nasıl görüntülenir


13

.icoWordPress siteme bir mime türü ekledim ve favicon dosyalarını yükleyebiliyorum. Ancak medya kitaplığı yalnızca default.pngbu görüntüler için ve ayrıca Özelleştirici'de görüntüyü görüntüler. WordPress'in bu favicon görüntülerini medya kitaplığında ve özelleştiricide görüntülemesini nasıl sağlayabilirim?

Yanıtlar:


15

Güncelleme: Görünüşe göre 5.0 ve üstü sürümlerde desteklenecek. Bilete bakın # 43458

Varsayılan

Favicon ( .ico) dosyaları Medya Izgarası görünümünde şu şekilde görünür :

varsayılan

Bu, mikro şablonun ilgili kısmıdır:

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

nerede data.sizesiçin boş site simgeleri .

Yöntem 1) wp_mime_type_iconFiltreyi kullanma

Favicons için mime türü image/x-icon.

.icoDosyaları Media Grid görünümünde görüntülemeyi başardım :

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

o üçüncü parametre tutmak için burada önemli olan nerede wp_get_attachment_image_srcolduğu $icon = falsesonsuz döngü önlemek için (varsayılan olarak)!

Favicons daha sonra şu şekilde görüntülenir:

Değiştirilmiş sürüm # 1

Yöntem 2) wp_prepare_attachment_for_jsFiltreyi kullanma

Medya ızgarası görünümünü yüklediğimizde, wp_ajax_query_attachmentsişleyiciyi ararız . Aşağıdaki ekler sorgusunu gerçekleştirir:

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

Bu wp_prepare_attachment_for_jsişlevde, WP_Postyayınlara çeşitli bilgiler eklenir ve bunlara aşağıdakilerle filtre uygulanır:

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

burada çıkış $responsedizidir.

Bu filtreyi favorilere eksik boyutlar eklemek için kullanabiliriz:

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

ve sonra böyle görünecekler:

Değişiklik # 2

Biz sadece ayarlamanız Bildirimi urlkısmını değil width, heightve orientation. wp_get_attachment_image_src()Örneğin , fonksiyonun yardımıyla bu verileri ekleme çözümünü daha da genişletebiliriz . Ama bunu sana bırakıyorum ;-)

Bazı $responseörnekler:

İşte dosya için $responsedizi örneği favicon.ico:

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

)

WordPress-Logo.jpgResim için bir örnek :

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: Bu örneklerle özellikle ilgileniyoruz $response['size'].

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.