Comment afficher les fichiers .ico dans la médiathèque

11

J'ai ajouté un type .ico mime à mon site WordPress et je peux télécharger des fichiers favicon. Mais la médiathèque n'affiche que l'image default.png pour ces images et également dans le Customizer. Comment obtenir WordPress pour afficher ces images favicon dans la médiathèque et dans le personnalisateur?

    
posée AlanP 13.02.2015 - 01:06

1 réponse

15

Mise à jour: il semble que cela sera supporté dans la version 5.0+. Voir le billet # 43458

La valeur par défaut

Voici comment les fichiers Favicon ( .ico ) s'affichent dans la vue Grille des supports :

Voicilapartiecorrespondantedumicro-modèle:

<#}elseif('image'===data.type&&data.sizes){#><divclass="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>
<# } #>

data.sizes est vide pour les favicons .

Méthode 1) Utilisation du filtre wp_mime_type_icon

Le type mime des favicons est image/x-icon .

J'ai réussi à afficher les fichiers .ico dans la vue Grille des supports 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 conserver le troisième paramètre de wp_get_attachment_image_src comme $icon = false (par défaut) pour éviter une boucle infinie!

Les favicons sont ensuite affichés comme ceci:

Méthode2)Utilisationdufiltrewp_prepare_attachment_for_js

Lorsquenouschargeonslavuedelagrilledesupports,nousappelonslegestionnairewp_ajax_query_attachments.Ileffectuelarequêtedepiècesjointessuivante:

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

Danscettefonctionwp_prepare_attachment_for_js,diversesinformationssontajoutéesauxmessagesWP_Postetellessontfiltréesavec:

returnapply_filters('wp_prepare_attachment_for_js',$response,$attachment,$meta);

oùlerésultatestletableau$response.

Nouspouvonsutilisercefiltrepourajouterlestaillesmanquantespourlesfavicons:

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

etilsapparaîtrontcommececi:

Notez que nous définissons uniquement la partie url et non les width , height et orientation . Nous pourrions également étendre la solution pour ajouter ces données, à l'aide de la fonction wp_get_attachment_image_src() , par exemple. Mais je vous laisse cela ;-)

Quelques exemples de $response :

Voici un exemple du tableau $response pour le fichier 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] => 
        )

)

Voici un exemple pour l'image 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: Nous nous intéressons plus particulièrement à la partie $response['size'] de ces exemples.

    
réponse donnée birgire 13.02.2015 - 03:43

Lire d'autres questions sur les étiquettes