एसवीजी को वर्डप्रेस में रेंडर करने के तरीके?

Question

इंटरनेट ब्राउज़र की उन्नति के साथ, मैं वेबसाइटों को कोड करते समय SVGS का उपयोग करके खुद को अधिक से अधिक आरामदायक पाता हूं ... विशेष रूप से माउस के लिए, और सरल ग्राफिक्स जिन्हें मक्खी द्वारा प्रतिस्थापित किया जा सकता है।

ऐसा लगता है कि वर्डप्रेस एसवीजीएस का लगभग समर्थन करता है। मैं लगभग कहता हूं क्योंकि:

1. यह डिफ़ॉल्ट रूप से वर्डप्रेस में एक अनुमत फ़ाइल प्रकार नहीं है। इसलिए आपको SVG अपलोड करने से पहले इसे जोड़ना होगा

2. आप मीडिया गैलरी में SVG थंबनेल नहीं देख सकते। (नीचे चित्र देखें)

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

अब आपको SVG अपलोड करने में सक्षम होना चाहिए। आप इस ट्यूटोरियल में अधिक जानकारी पा सकते हैं । यह केवल आइटम 1 को हल करता है, जैसा कि मैंने पहले उल्लेख किया है, यह मेरे लिए कोई मुद्दा नहीं है (हालांकि मुझे लगता है कि इसे डिफ़ॉल्ट रूप से अनुमति दी जानी चाहिए)।

आइटम 2 के बारे में अपडेट करें:

मैंने कुछ खुदाई की और उस फ़ंक्शन को ट्रैक किया जो यह तय करता है कि लगाव एक छवि है या नहीं। ऐसा लगता है कि यह सब wp में इस फ़ंक्शन के लिए नीचे आता है / पोस्ट.php

/**
 * 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;
}

जैसा कि आप देख सकते हैं कि इस फ़ंक्शन में परिभाषित मान्य छवि एक्सटेंशन की एक सरणी है। मुझे कोई भी फ़िल्टर दिखाई नहीं देता जिसका उपयोग उस सरणी को संशोधित करने के लिए किया जा सकता है। लेकिन यह एक शुरुआत है ...

मुझे यकीन नहीं है कि आखिरी बयान अगर svgs के लिए गलत है, हालांकि। यहां तक ​​कि अगर मैं सरणी $ image_exts में svg एक्सटेंशन को नहीं जोड़ता हूं, तो पहली शर्त सही होनी चाहिए, क्या नहीं?

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

यह जांचता है कि क्या 'छवि /' माइम प्रकार में पहले छह वर्णों के लिए योग्य है, जो कि svg के लिए छवि / svg + xml है (पहले छह में "छवि /" है)।

अपडेट करें

आगे की जाँच करने पर, ऐसा लगता है कि समस्या wp_attachment_is_image के साथ बिल्कुल भी नहीं है, लेकिन क्योंकि SVG अपलोड होने पर छवि के आकार (चौड़ाई और ऊँचाई) को अनुलग्नक मेटाडेटा में नहीं जोड़ा जा रहा है। ऐसा इसलिए है क्योंकि उपयोग की गई छवि की गणना करने का फ़ंक्शन php फ़ंक्शन getimagesize () है, जो एसवीजी के लिए एक छवि आकार नहीं लौटाता है। मुझे स्टिमओवरफ़्लो पर एक उत्तर मिला कि गेटिमेजाइज़ फ़ंक्शन के बारे में और svgs कैसे व्यवहार करते हैं। इसे यहाँ देखें।

Comments

SVG सपोर्ट प्लगइन स्थापित करें जो यह मीडिया गैलरी पर svg प्रदर्शित करता है - wordpress.org/plugins/svg-support

— Nuno Sarmento

Answer 1

एक नज़र डालें wp_prepare_attachment_for_js(), जो मीडिया पृष्ठों पर उपयोग के लिए अनुलग्नक मेटाडेटा इकट्ठा करता है। एपिनेम फ़िल्टर हमें मेटाडेटा जोड़ने या बदलने देता है।

निम्न उदाहरण को function.php में छोड़ा जा सकता है। नोट: इसके लिए PHP में SimpleXML समर्थन की आवश्यकता है।

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

Answer 2

यह ऐसा कुछ नहीं है जिसे आप आसानी से एक प्लगइन या कोड के कुछ छोटे सेट के साथ "हैक" करने में सक्षम हो सकते हैं।

इसकी कमी यह है कि एसवीजी, द्वारा और बड़े, उन सभी छवियों के अर्थ में "चित्र" नहीं हैं जो इससे पहले आए हैं। एसवीजी वेक्टर आधारित छवियां हैं, और वेब पर किसी भी वास्तविक कर्षण को प्राप्त करने वाले पहले व्यक्ति हैं।

इससे पहले की सभी छवियां बिटमैप आधारित हैं। वर्डप्रेस की इमेज हैंडलिंग सिस्टम को विशेष रूप से उन लोगों से निपटने के लिए लिखा गया था, और यह अंतर्निहित डिज़ाइन सिस्टम के हर बिंदु पर स्थित है।

यह एक अंतर्निहित धारणा है कि छवियों में चौड़ाई और ऊंचाइयां हैं, उदाहरण के लिए। एसवीजी के पास न तो हैं, वे किसी भी आकार के हो सकते हैं। वर्डप्रेस में बनाई गई छवियों के लिए एक संपूर्ण मूल "संपादक" है, जिसमें से कोई भी कार्यक्षमता एसवीजी पर लागू नहीं हो सकती है।

मल्टीमीडिया सिस्टम धीरे-धीरे पुनर्विकास किया जा रहा है, यहां "धीरे-धीरे" पर जोर दिया गया है। पिछड़ी हुई संगतता को बनाए रखने के लिए और नए डिजाइनों को लागू करने की पूरी संभावना है। इसके अतिरिक्त, अधिकांश लोग वीडियो, ऑडियो और प्लेलिस्ट का समर्थन करने में अधिक रुचि रखते हैं। जैसे-जैसे यह रीडिज़ाइन कार्य पूरा होता है, और लाइब्रेरी के अनुभाग अधिक सारगर्भित हो जाते हैं, तो समय के साथ इस तरह की चीज़ों का समर्थन करना आसान हो जाएगा। लेकिन यह अभी तक नहीं है, और यह थोड़ी देर के लिए नहीं होगा। यही कारण है कि एसवीजी माइम प्रकार समर्थित नहीं है, क्योंकि उस माइम प्रकार को जोड़ने तक सभी अंतर्निहित टुकड़े काम टूटने के लिए एक सड़क होगा।

एसवीजी के लिए, wp_attachment_is_imageगलत तरीके से लौटना चाहिए, क्योंकि wp_attachment_is_imageयह निर्धारित करने के लिए उपयोग किया जाता है कि संपादक बटन को दिखाना है या नहीं image_downsizeऔर छवि को थंबनेल में बदलने की कोशिश करता है या नहीं । जो भी वैसे भी एसवीजी के लिए काम करेगा। SVGs का ठीक से समर्थन करने के लिए, आपको पूरी तरह से उन छवियों के लिए मेटाडेटा जोड़ने के लिए एक नई प्रणाली लिखने की आवश्यकता होगी, और फिर उन सभी स्थानों पर इसके लिए समर्थन जोड़ें जो मेटाडेटा का उपयोग कर सकते हैं। जैसा कि आप सोच सकते हैं, यह एक छोटा काम नहीं है।

Comments

एसवीजी का आकार (व्यूपोर्ट और व्यू बॉक्स) है, यह बिटमैप्स के निश्चित पिक्सेल-निर्भर आयामों की तुलना में अधिक "आभासी" है।

— रारस्ट

Answer 3

केवल स्रोत पढ़ने से (परीक्षण नहीं), मैं देख सकता हूं कि एक्सटेंशन को मिलान करने की आवश्यकता है:

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

जो (छद्म कोड) के रूप में पढ़ता है

अगर image/$ 6 पोस्ट ऑब्जेक्ट में पहले 6 चार्ट हैं post_mime_type संपत्ति या कोई एक्सटेंशन है या import$ पोस्ट ऑब्जेक्ट पोस्ट_mime_type संपत्ति है और वर्तमान फ़ाइल एक्सटेंशन (Array) में से एक है

और इसका मतलब है कि अंतिम कथन हमेशा तय करेगा कि क्या ifसच निकला या नहीं।

जो मैं पढ़ सकता हूं get_attached_file(), उसमें से एक फिल्टर है जो विस्तार को फीका करने की अनुमति देगा :

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

दूसरे शब्दों में, आप एक ही फाइल को वापस करने की कोशिश कर सकते हैं लेकिन एक अलग एक्सटेंशन के साथ। यह wp_attachment_is_image()सिर्फ रिटर्न के रूप में अन्य भागों के साथ संघर्ष नहीं करेगा bool।