মিডিয়া লাইব্রেরিতে .ico ফাইলগুলি কীভাবে প্রদর্শন করা যায়

Question

আমি .icoআমার ওয়ার্ডপ্রেস সাইটে একটি মাইম টাইপ যুক্ত করেছি এবং আমি ফেভিকন ফাইলগুলি আপলোড করতে সক্ষম হয়েছি। তবে মিডিয়া লাইব্রেরি কেবল default.pngএই চিত্রগুলির জন্য এবং কাস্টমাইজারে চিত্রটি প্রদর্শন করে । মিডিয়া লাইব্রেরি এবং কাস্টমাইজারে এই ফেভিকন চিত্রগুলি প্রদর্শনের জন্য আমি কীভাবে ওয়ার্ডপ্রেস পেতে পারি?

Answer 1

আপডেট: দেখে মনে হচ্ছে এটি 5.0+ এ সমর্থিত হবে। টিকিট দেখুন # 43458

ডিফল্ট

ফ্যাভিকন ( .ico) ফাইলগুলি মিডিয়া গ্রিড ভিউতে এভাবে প্রদর্শিত হয় :

এটি মাইক্রো টেম্পলেটটির সংশ্লিষ্ট অংশ:

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

ফেভিকনdata.sizes জন্য যেখানে খালি ।

পদ্ধতি 1) wp_mime_type_iconফিল্টার ব্যবহার করে

ফেভিকনগুলির জন্য মাইম টাইপটি image/x-icon।

আমি এইগুলি .icoদিয়ে মিডিয়া গ্রিড ভিউতে ফাইলগুলি পরিচালনা করতে পরিচালিত করেছি :

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

যেখানে তা এখানে গুরুত্বপূর্ণ তৃতীয় প্যারামিটারটি রাখার wp_get_attachment_image_srcযেমন $icon = falseএকটি অসীম লুপ এড়াতে (ডিফল্ট অনুসারে)!

ফ্যাভিকনগুলি এর পরে প্রদর্শিত হবে:

পদ্ধতি 2) wp_prepare_attachment_for_jsফিল্টার ব্যবহার করে

আমরা যখন মিডিয়া গ্রিড ভিউ লোড করি, আমরা wp_ajax_query_attachmentsহ্যান্ডলারের কাছে একটি কল করি । এটি নিম্নলিখিত সংযুক্তি কোয়েরি সম্পাদন করে:

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

এই wp_prepare_attachment_for_jsফাংশনে, WP_Postপোস্টগুলিতে বিভিন্ন তথ্য যুক্ত করা হয় এবং সেগুলি দিয়ে ফিল্টার করা হয়:

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

যেখানে আউটপুট $responseঅ্যারে হয়।

আমরা এই ফিল্টারটি ফেভিকনগুলির জন্য অনুপস্থিত আকারগুলি যুক্ত করতে ব্যবহার করতে পারি:

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

এবং তারপরে তারা এটির মতো প্রদর্শিত হবে:

লক্ষ্য করুন যে আমরা কেবল সেট urlঅংশ এবং width, heightএবং orientation। wp_get_attachment_image_src()উদাহরণস্বরূপ, ফাংশনের সাহায্যে আমরা এই ডেটা যুক্ত করার জন্য সমাধানটি আরও বাড়িয়ে দিতে পারি । তবে আমি এটি আপনার উপর ছেড়ে দিচ্ছি ;-)

কিছু $responseউদাহরণ:

এখানে ফাইলের $responseজন্য অ্যারের উদাহরণ রয়েছে 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.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: আমরা $response['size']এই উদাহরণগুলির অংশে বিশেষভাবে আগ্রহী ।