ওয়ার্ডপ্রেসে এসভিজি রেন্ডারিং পরিচালনা করার উপায়গুলি?


9

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

দেখে মনে হচ্ছে ওয়ার্ডপ্রেস প্রায় এসভিজিএস সমর্থন করে। আমি প্রায় বলেছি কারণ:

  1. এটি ডিফল্টরূপে ওয়ার্ডপ্রেসে কোনও অনুমোদিত ফাইল প্রকার নয়। সুতরাং আপনাকে এসভিজিগুলি আপলোড করার আগে এটি যুক্ত করা দরকার

  2. আপনি মিডিয়া গ্যালারীটিতে একটি এসভিজি থাম্বনেল দেখতে পাচ্ছেন না। (নীচের চিত্র দেখুন)

  3. কখনও কখনও যখন আপনি এটিকে এডিটরটিতে যুক্ত করেন (অ্যাড মিডিয়া বোতামের মাধ্যমে) সম্পাদক এসভিজি আকার জানেন না, সুতরাং এটি একটি চিত্র হিসাবে এসভিজি যুক্ত করলেও এর প্রস্থ এবং উচ্চতা শূন্য থাকে।

  4. মিডিয়া আপলোড পপআপের মধ্যে থেকে যখন আপনি "চিত্র সম্পাদনা করুন" এ ক্লিক করেন আপনি "চিত্রের অস্তিত্ব নেই" বলে একটি বার্তা পাবেন। নীচে চিত্র দেখুন।

আমি এই তালিকার 1 আইটেমের সাথে ভাল আছি, তবে কী কোনও ফিক্স আইটেম 2 3 এবং 4 কীভাবে খুঁজে পেয়েছে?

এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন

আইটেম 1 সম্পর্কে আপডেট করুন:

নতুন মাইম টাইপের (যেমন এসভিজি) অনুমতি দেওয়ার জন্য আপনি কেবল ফাংশন.ফ্পে একটি হুক যুক্ত করতে পারেন

function allow_new_mime_type($mimes) {

    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
}
add_filter( 'mime_types', 'allow_new_mime_type' );

এখন আপনার এসভিজিগুলি আপলোড করতে সক্ষম হওয়া উচিত। আপনি এই টিউটোরিয়ালে আরও তথ্য পেতে পারেন । এটি কেবলমাত্র আইটেম 1 সমাধান করে, যা আমি আগেই বলেছি এটি আমার পক্ষে কোনও সমস্যা নয় (যদিও আমি মনে করি এটি ডিফল্টরূপে অনুমোদিত হতে হবে)।

আইটেম 2 সম্পর্কে আপডেট করুন:

আমি কিছু খনন করেছি এবং ফাংশনটি ট্র্যাক করেছি যা স্থির করে যে কোনও সংযুক্তি একটি চিত্র কিনা। দেখে মনে হচ্ছে এটি সমস্তই ডাব্লুপি-অন্তর্ভুক্ত / পোস্ট.এফপি এই ফাংশনে নেমে আসে

/**
 * Check if the attachment is an image.
 *
 * @since 2.1.0
 *
 * @param int $post_id Attachment ID
 * @return bool
 */
function wp_attachment_is_image( $post_id = 0 ) {
    $post_id = (int) $post_id;
    if ( !$post = get_post( $post_id ) )
        return false;

    if ( !$file = get_attached_file( $post->ID ) )
        return false;

    $ext = preg_match('/\.([^.]+)$/', $file, $matches) ? strtolower($matches[1]) : false;

    $image_exts = array( 'jpg', 'jpeg', 'jpe', 'gif', 'png' );

    if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )
        return true;
    return false;
}

আপনি দেখতে পাচ্ছেন যে এই ফাংশনে সংজ্ঞায়িত বৈধ চিত্র এক্সটেনশনের একটি অ্যারে রয়েছে। সেই অ্যারেটি সংশোধন করার জন্য এমন কোনও ফিল্টার দেখছি না I তবে এটি একটি শুরু ...

আমি নিশ্চিত নই কেন সর্বশেষ যদি বিবৃতিটি এসএমএসের জন্য মিথ্যা ফিরিয়ে দেয়। এমনকি যদি আমি অ্যারে $ ইমেজ_এক্সেটগুলিতে এসভিজি এক্সটেনশনটি না যোগ করি তবে প্রথম শর্তটি সত্য হওয়া উচিত, তাই না?

if ( 'image/' == substr($post->post_mime_type, 0, 6)

এটি পরীক্ষা করে যে 'চিত্র /' মাইম টাইপের প্রথম ছয় অক্ষরের সাথে সমান, যদি এসভিজি-র জন্য চিত্র / এসভিজি + এক্সএমএল হয় (প্রথম ছয়টি "চিত্র /")।

হালনাগাদ

আরও তদন্ত করার পরে, মনে হয় সমস্যাটি মোটেও wp_attachment_is_image এর সাথে নয়, তবে এসভিজি আপলোড হওয়ার পরে চিত্রের আকার (প্রস্থ এবং উচ্চতা) সংযুক্তি মেটাডেটাতে যুক্ত করা হচ্ছে না। এর কারণটি ব্যবহৃত চিত্রটি গণনা করার ফাংশনটি হ'ল পিএইচপি ফাংশন জিটিমেজেসাইজ (), যা এসভিজির জন্য কোনও চিত্রের আকার দেয় না। জেটিমেজেসাইজ ফাংশন এবং এসভিজেস কীভাবে আচরণ করে সে সম্পর্কে স্ট্যাকওভারফ্লোতে আমি একটি উত্তর পেয়েছি। এটি এখানে দেখুন।


এসভিজি সমর্থন প্লাগইন ইনস্টল করুন এটি মিডিয়া গ্যালারিতে এসভিজি প্রদর্শন করে - wordpress.org/plugins/svg-support
নুনো সরমেন্টো

উত্তর:


10

একবার দেখুন wp_prepare_attachment_for_js(), যা মিডিয়া পৃষ্ঠাগুলিতে ব্যবহারের জন্য সংযুক্তি মেটাডেটা সংগ্রহ করে। এপিমনাম ফিল্টার আমাদের মেটাডেটা যুক্ত বা পরিবর্তন করতে দেয়।

নিম্নলিখিত উদাহরণটি ফাংশন.এফপি এ বাদ দেওয়া যেতে পারে। দ্রষ্টব্য: পিএইচপি-তে এর জন্য সিম্পল এক্সএমএল সমর্থন প্রয়োজন।

function common_svg_media_thumbnails($response, $attachment, $meta){
    if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement'))
    {
        try {
            $path = get_attached_file($attachment->ID);
            if(@file_exists($path))
            {
                $svg = new SimpleXMLElement(@file_get_contents($path));
                $src = $response['url'];
                $width = (int) $svg['width'];
                $height = (int) $svg['height'];

                //media gallery
                $response['image'] = compact( 'src', 'width', 'height' );
                $response['thumb'] = compact( 'src', 'width', 'height' );

                //media single
                $response['sizes']['full'] = array(
                    'height'        => $height,
                    'width'         => $width,
                    'url'           => $src,
                    'orientation'   => $height > $width ? 'portrait' : 'landscape',
                );
            }
        }
        catch(Exception $e){}
    }

    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'common_svg_media_thumbnails', 10, 3);

2

এটি এমন কিছু নয় যা আপনি সহজেই কোনও প্লাগিন বা কিছু ছোট সেট কোডের সাহায্যে "হ্যাক ইন" করতে সক্ষম হবেন।

এর সংক্ষিপ্তসারটি হ'ল এসভিজিগুলি, বৃহত্তর, এর আগে উপস্থিত সমস্ত চিত্রের অর্থে "চিত্র" নয়। এসভিজি হ'ল ভেক্টর ভিত্তিক চিত্র এবং ওয়েবে কোনও সত্যিকারের ট্রেশন পাওয়া প্রথমগুলি।

এর আগে সমস্ত চিত্র বিটম্যাপ ভিত্তিক করা হয়েছে। ওয়ার্ডপ্রেসের ইমেজ হ্যান্ডলিং সিস্টেমটি সেইগুলির সাথে মোকাবিলা করার জন্য বিশেষভাবে লেখা হয়েছিল এবং এই অন্তর্নিহিত নকশাটি সিস্টেমের প্রতিটি পয়েন্টে অবস্থিত।

উদাহরণস্বরূপ, চিত্রগুলির প্রস্থ এবং উচ্চতা রয়েছে এটি একটি অন্তর্নিহিত অনুমান। এসভিজির কোনও নেই, সেগুলি যে কোনও আকার হতে পারে। ওয়ার্ডপ্রেসে অন্তর্নির্মিত চিত্রগুলির জন্য একটি সম্পূর্ণ বেসিক "সম্পাদক" রয়েছে, কার্যকারিতার কোনওটিই এসভিজিতে সত্যই প্রয়োগ করতে পারে না।

এখানে "ধীরে ধীরে" জোর দিয়ে মাল্টিমিডিয়া সিস্টেমটি ধীরে ধীরে পুনর্নবীকরণ করা হচ্ছে। পিছনে সামঞ্জস্যতা বজায় রাখতে এবং নতুন নকশাগুলি বাস্তবায়িত করার জন্য পুরোপুরি অনেকগুলি আছে। অতিরিক্তভাবে, বেশিরভাগ লোকেরা ভিডিও, অডিও এবং প্লেলিস্টগুলিকে সমর্থন করার ক্ষেত্রে আরও বেশি আগ্রহী। যেহেতু এই পুনরায় নকশা কাজটি করা হয়েছে এবং লাইব্রেরির অংশগুলি আরও বিমূর্ত হয়ে পড়েছে, তাই এই ধরণের জিনিসটি সময়ের সাথে সাথে সমর্থন করা আরও সহজ হয়ে উঠবে। তবে এটি এখনও নেই, এবং এটি কিছু সময়ের জন্য হবে না। এজন্য এসভিজি মাইম প্রকারটি সমর্থিত নয়, কারণ সমস্ত অন্তর্নিহিত টুকরা কাজ না করা অবধি মাইম টাইপ যুক্ত হওয়া ভাঙ্গার পথে হবে।

এসভিজির জন্য, মানটি wp_attachment_is_imageমিথ্যা প্রত্যাবর্তন করা উচিত, কারণ wp_attachment_is_imageসম্পাদক বোতামটি প্রদর্শন করতে হবে বা না এবং তা image_downsizeথাম্বনেইলগুলিতে চিত্রকে পুনরায় আকার দেওয়ার চেষ্টা করবে কি না তা নির্ধারণ করতে ব্যবহৃত হয় such যার কোনটিই এসভিজির পক্ষে কাজ করবে না। এসভিজিকে সঠিকভাবে সমর্থন করার জন্য আপনাকে সেই চিত্রগুলি সম্পূর্ণরূপে মেটাডেটা যুক্ত করার জন্য একটি নতুন সিস্টেম লিখতে হবে এবং তারপরে মেটাডেটা যে সমস্ত জায়গায় ব্যবহৃত হতে পারে তার জন্য এটির জন্য সমর্থন যুক্ত করতে হবে। আপনি যেমন কল্পনা করতে পারেন, এটি কোনও ছোট কাজ নয়।


1
এসভিজির আকার (ভিউপোর্ট এবং দেখুন বাক্স) থাকে না, এটি বিটম্যাপের স্থির পিক্সেল – নির্ভর মাত্রার চেয়ে আরও বেশি "ভার্চুয়াল"।
রর্স্ট

1

কেবল উত্সটি পড়ে (পরীক্ষা করা হচ্ছে না), আমি দেখতে পাচ্ছি যে এক্সটেনশানটি মেলানো দরকার:

if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )

যা পড়ে (সিউডো কোড)

যদি image/$ পোস্ট অবজেক্ট পোস্ট_মাইম_ টাইপ সম্পত্তিতে প্রথম 6 টি অক্ষর হয় বা একটি এক্সটেনশন থাকে বা importobjects পোস্ট অবজেক্ট পোস্ট_মাইম_ টাইপ সম্পত্তি হয় এবং বর্তমান ফাইল এক্সটেনশন (অ্যারে) এর মধ্যে একটি

এবং এর অর্থ হ'ল সর্বশেষ বিবৃতিটি সর্বদা সিদ্ধান্ত নেবে যে ifটার্নগুলি সত্য হয় বা না।

আমি যা পড়তে পারি তার থেকে get_attached_file()এমন একটি ফিল্টার রয়েছে যা এক্সটেনশানটিকে নকল করতে দেয় :

return apply_filters( 'get_attached_file', $file, $attachment_id );

অন্য কথায়, আপনি একই ফাইলটি ফেরত দেওয়ার চেষ্টা করতে পারেন তবে আলাদা এক্সটেনশন দিয়ে। এটা তোলে হিসাবে, অন্যান্য অংশের সাথে বিবাদের না wp_attachment_is_image()শুধু আয় bool

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.