Como exibir arquivos .ico na biblioteca de mídia

Eu adicionei um tipo .ico mime no meu site WordPress e eu posso fazer o upload de arquivos favicon. Mas a biblioteca de mídia exibe apenas a imagem default.png para essas imagens e também no Customizer. Como posso obter o WordPress para exibir essas imagens favicon, na biblioteca de mídia e no personalizador?

Solutions Collecting From Web of "Como exibir arquivos .ico na biblioteca de mídia"

O padrão

É assim que os arquivos favicon ( .ico ) aparecem na exibição Grade de mídia :

padrão

Esta é a parte correspondente do modelo micro:

 < # } else if ( 'image' === data.type && data.sizes ) { #> 
< # } else { #>
< # if ( data.image && data.image.src && data.image.src !== data.icon ) { #> < # } else { #> < # } #>
{{ data.filename }}
< # } #>

onde data.sizes está vazio para os favicons .

Método 1) Usando o filtro wp_mime_type_icon

O tipo mime para favicons é image/x-icon .

Consegui exibir os arquivos .ico na visualização Grade de mídia com:

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

onde é importante aqui manter o terceiro parâmetro de wp_get_attachment_image_src como $icon = false (por padrão) para evitar um loop infinito!

Os favicons são exibidos assim:

Versão modificada # 1

Método 2) Usando o filtro wp_prepare_attachment_for_js

Quando carregamos a vista de grade de mídia, fazemos uma chamada para o manipulador wp_ajax_query_attachments . Executa a seguinte consulta de anexos:

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

Nesta function wp_prepare_attachment_for_js , várias informações são adicionadas às postagens WP_Post e são filtradas com:

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

onde a saída é a matriz $response .

Podemos usar esse filtro para adicionar os tamanhos que faltam para os 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 ); 

e eles aparecerão assim assim:

Modificação # 2

Observe que nós apenas configuramos a parte da url e não a width , height e orientation . Poderíamos ampliar a solução para adicionar esses dados, com a ajuda da function wp_get_attachment_image_src() , por exemplo. Mas deixo isso com você 😉

Alguns exemplos de $response :

Aqui está um exemplo da matriz $response para o arquivo 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] => ) ) 

Aqui está um exemplo para a imagem WordPress-Logo.jpg :

 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: Estamos especificamente interessados ​​na parte $response['size'] desses exemplos.