Comment afficher les fichiers .ico dans la bibliothèque multimédia

J'ai ajouté un .icotype mime sur mon site WordPress et je peux télécharger des fichiers favicon. Mais la médiathèque n'affiche que l' default.pngimage de ces images et également dans le Customizer. Comment puis-je obtenir WordPress pour afficher ces images favicon, dans la bibliothèque multimédia et le personnalisateur?

Mise à jour: il semble que cela sera pris en charge dans la version 5.0+. Voir billet # 43458

Le défaut

Voici comment les fichiers favicon ( .ico) apparaissent dans la vue Media Grid :

Ceci est la partie correspondante du micro modèle:

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

où data.sizesest vide pour les favicons .

Méthode 1) Utilisation du wp_mime_type_iconfiltre

Le type mime pour les favicons est image/x-icon.

J'ai réussi à afficher les .icofichiers dans la vue Media Grid avec:

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ù il est important ici de garder le troisième paramètre de wp_get_attachment_image_srcas $icon = false(par défaut) pour éviter une boucle infinie!

Les favicons sont alors affichés comme ceci:

Méthode 2) Utilisation du wp_prepare_attachment_for_jsfiltre

Lorsque nous chargeons la vue de la grille multimédia, nous appelons le wp_ajax_query_attachmentsgestionnaire. Il effectue la requête de pièces jointes suivante:

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

Dans cette wp_prepare_attachment_for_jsfonction, diverses informations sont ajoutées aux WP_Postarticles et elles sont filtrées avec:

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

où la sortie est le $responsetableau.

Nous pouvons utiliser ce filtre pour ajouter les tailles manquantes pour les favicons:

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

et ils apparaîtront alors comme ceci:

Notez que nous définissons uniquement la urlpartie et non le width, heightet orientation. Nous pourrions étendre la solution pour ajouter ces données, à l'aide de la wp_get_attachment_image_src()fonction, par exemple. Mais je vous laisse ça ;-)

Quelques $responseexemples:

Voici un exemple du $responsetableau du favicon.icofichier:

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

)

Voici un exemple pour l' WordPress-Logo.jpgimage:

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: Nous sommes spécifiquement intéressés par la $response['size']partie de ces exemples.