क्या बाहरी छवि URL के साथ एक चित्रित छवि सेट करना संभव है

Question

मुझे पता है कि ऐसे प्लगइन्स हैं जो दूरस्थ URL से चित्र लाते हैं और स्थानीय रूप से संग्रहीत करते हैं। मैं सिर्फ यह जानना चाहता हूं कि क्या मीडिया लाइब्रेरी में छवि को स्टोर करना संभव नहीं है, फिर भी इसे फीचर्ड इमेज के रूप में उपयोग करें ?

Comments

आप इसे कस्टम फ़ील्ड के साथ कर सकते हैं जहाँ आप बाहरी छवि URL संग्रहीत करते हैं। हर बार the_post_thumnail()मौजूद (या समान कार्य) होने पर या विषय या प्लगइन द्वारा परिभाषित विभिन्न छवि आकारों के साथ काम करने के लिए इसे बनाना मुश्किल हो सकता है ।

— साइबरमेट

आप इस प्लगइन का उपयोग अपनी चित्रित छवि के रूप में बाहरी छवि url सेट करने के लिए कर सकते हैं: wordpress.org/plugins/wp-remote-thumbnail

— उन्नत SEO

क्या यह छवि को स्थानीय रूप से संग्रहीत करता है या दूरस्थ रूप से कॉल करता है?

— Volatil3

@ Volatil3 मैंने परीक्षण नहीं किया है, लेकिन प्लगइन विवरण को पढ़कर मैं कहूंगा कि इसे दूरस्थ रूप से कहते हैं।

— एंडी मैकाले-ब्रुक

Answer 1

हाँ, यह संभव है और बहुत आसान है।

यह मेरे द्वारा सुझाया गया वर्कफ़्लो है:

1. चित्रित छवि का URL सम्मिलित करने के लिए कहीं UI रखें। शायद सबसे अच्छा विकल्प 'admin_post_thumbnail_html'फिल्टर हुक का उपयोग करना है
2. 'save_post'कस्टम पोस्ट मेटा में URL (सुरक्षा और सत्यापन रूटीन के बाद) को बचाने के लिए एक्शन हुक का उपयोग करें
3. 'post_thumbnail_html'उचित <img>मार्कअप को आउटपुट के लिए फ़िल्टर हुक का उपयोग करें , डिफ़ॉल्ट रूप से ओवरराइडिंग, यदि पोस्ट जिसके लिए विशेष रुप से प्रदर्शित छवि की आवश्यकता है, में पोस्ट की गई बाहरी बाहरी छवि के साथ मेटा है

काम करने के लिए, इस वर्कफ़्लो को फ़ीचर इमेज को फ़ंक्शंस get_the_post_thumnbail()या the_post_thumbnail()फ़ंक्शंस में दिखाया जाना चाहिए ।

इसके अलावा, हमें यह सुनिश्चित करना चाहिए कि '_thumbnail_id'जब हम बाहरी URL के लिए मेटा सेट करते हैं तो मेटा वैल्यू एक गैर-रिक्त मान होता है, अन्यथा has_post_thumbnail()उन पोस्टों के लिए गलत वापस आ जाएगा जिनमें केवल एक बाहरी फ़ीचर्ड छवि है।

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

हमारे वर्कफ़्लो को कार्यान्वित करने के लिए हमें एक बाहरी विशेषताओं वाली छवि के रूप में उपयोग किए गए URL को मान्य करने के लिए एक फ़ंक्शन की आवश्यकता होती है, क्योंकि हमें यह सुनिश्चित करना होगा कि यह एक मान्य छवि URL है।

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

function url_is_image( $url ) {
    if ( ! filter_var( $url, FILTER_VALIDATE_URL ) ) {
        return FALSE;
    }
    $ext = array( 'jpeg', 'jpg', 'gif', 'png' );
    $info = (array) pathinfo( parse_url( $url, PHP_URL_PATH ) );
    return isset( $info['extension'] )
        && in_array( strtolower( $info['extension'] ), $ext, TRUE );
}

बहुत आसान। अब उपरोक्त वर्कफ़्लो में वर्णित 3 हुक जोड़ते हैं:

add_filter( 'admin_post_thumbnail_html', 'thumbnail_url_field' );

add_action( 'save_post', 'thumbnail_url_field_save', 10, 2 );

add_filter( 'post_thumbnail_html', 'thumbnail_external_replace', 10, PHP_INT_MAX );

और संबंधित कार्य। पहले वह जो व्यवस्थापक में फ़ील्ड आउटपुट करता है:

function thumbnail_url_field( $html ) {
    global $post;
    $value = get_post_meta( $post->ID, '_thumbnail_ext_url', TRUE ) ? : "";
    $nonce = wp_create_nonce( 'thumbnail_ext_url_' . $post->ID . get_current_blog_id() );
    $html .= '<input type="hidden" name="thumbnail_ext_url_nonce" value="' 
        . esc_attr( $nonce ) . '">';
    $html .= '<div><p>' . __('Or', 'txtdomain') . '</p>';
    $html .= '<p>' . __( 'Enter the url for external image', 'txtdomain' ) . '</p>';
    $html .= '<p><input type="url" name="thumbnail_ext_url" value="' . $value . '"></p>';
    if ( ! empty($value) && url_is_image( $value ) ) {
        $html .= '<p><img style="max-width:150px;height:auto;" src="' 
            . esc_url($value) . '"></p>';
        $html .= '<p>' . __( 'Leave url blank to remove.', 'txtdomain' ) . '</p>';
    }
    $html .= '</div>';
    return $html;
}

ध्यान दें कि मैंने 'txtdomain'पाठ डोमेन के रूप में उपयोग किया है , लेकिन आपको एक उचित, पंजीकृत पाठ डोमेन का उपयोग करना चाहिए।

खाली होने पर आउटपुट दिखता है:

और यह एक छवि URL जोड़ने और पोस्ट को सहेजने / अपडेट करने के बाद कैसा दिखता है:

तो, अब हमारे व्यवस्थापक यूआई किया जाता है, चलो बचत दिनचर्या लिखते हैं:

function thumbnail_url_field_save( $pid, $post ) {
    $cap = $post->post_type === 'page' ? 'edit_page' : 'edit_post';
    if (
        ! current_user_can( $cap, $pid )
        || ! post_type_supports( $post->post_type, 'thumbnail' )
        || defined( 'DOING_AUTOSAVE' )
    ) {
        return;
    }
    $action = 'thumbnail_ext_url_' . $pid . get_current_blog_id();
    $nonce = filter_input( INPUT_POST, 'thumbnail_ext_url_nonce', FILTER_SANITIZE_STRING );
    $url = filter_input( INPUT_POST,  'thumbnail_ext_url', FILTER_VALIDATE_URL );
    if (
        empty( $nonce )
        || ! wp_verify_nonce( $nonce, $action )
        || ( ! empty( $url ) && ! url_is_image( $url ) )
    ) {
        return;
    }
    if ( ! empty( $url ) ) {
        update_post_meta( $pid, '_thumbnail_ext_url', esc_url($url) );
        if ( ! get_post_meta( $pid, '_thumbnail_id', TRUE ) ) {
            update_post_meta( $pid, '_thumbnail_id', 'by_url' );
        }
    } elseif ( get_post_meta( $pid, '_thumbnail_ext_url', TRUE ) ) {
        delete_post_meta( $pid, '_thumbnail_ext_url' );
        if ( get_post_meta( $pid, '_thumbnail_id', TRUE ) === 'by_url' ) {
            delete_post_meta( $pid, '_thumbnail_id' );
        }
    }
}

फ़ंक्शन, कुछ सुरक्षा जांचों के बाद, पोस्ट किए गए URL को देखता है और यदि यह ठीक है, तो इसे '_thumbnail_ext_url'पोस्ट मेटा में सहेजता है । यदि URL रिक्त है और मेटा सहेजा गया था, तो उसे हटा दिया गया है, बाहरी URL फ़ील्ड को खाली करके मेटा को हटाने की अनुमति देता है।

अंतिम छवि मार्कअप को आउटपुट करने के लिए जब हमारी बाहरी छवि URL मेटा में सेट की जाती है:

function thumbnail_external_replace( $html, $post_id ) {
    $url =  get_post_meta( $post_id, '_thumbnail_ext_url', TRUE );
    if ( empty( $url ) || ! url_is_image( $url ) ) {
        return $html;
    }
    $alt = get_post_field( 'post_title', $post_id ) . ' ' .  __( 'thumbnail', 'txtdomain' );
    $attr = array( 'alt' => $alt );
    $attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, NULL );
    $attr = array_map( 'esc_attr', $attr );
    $html = sprintf( '<img src="%s"', esc_url($url) );
    foreach ( $attr as $name => $value ) {
        $html .= " $name=" . '"' . $value . '"';
    }
    $html .= ' />';
    return $html;
}

हमारा हो गया।

क्या करना बाकी है

विशेष रुप से प्रदर्शित छवि आउटपुट में मैंने widthया heightगुणों का उपयोग नहीं किया है , और न ही कक्षाएं जो वर्डप्रेस आमतौर पर जोड़ता है, जैसे 'attachment-$size'। ऐसा इसलिए है क्योंकि एक छवि के आकार को सूँघने के लिए अतिरिक्त काम की आवश्यकता होती है जो पृष्ठ लोडिंग को धीमा कर देगा, खासकर यदि आपके पास पृष्ठ में एक से अधिक चित्रित चित्र हैं।

यदि आपको उन विशेषताओं की आवश्यकता है, तो आप wp_get_attachment_image_attributes'फ़िल्टर करने के लिए कॉलबैक जोड़कर मेरे कोड का उपयोग कर सकते हैं (यह एक मानक वर्डप्रेस हुक है ) या शायद आप छवि आकार और आउटपुट संबंधित विशेषताओं और कक्षाओं को सूँघने के लिए मेरे कोड को बदल सकते हैं।

प्लगिन जिस्ट

एक उचित टेक्स्ट डोमेन इनिशियलाइज़ेशन जोड़ने के अपवाद के साथ यहाँ पोस्ट किए गए सभी कोड, यहां एक Gist में पूर्ण-कार्यशील प्लगइन के रूप में उपलब्ध हैं । कोड वहां एक नाम स्थान का उपयोग करता है, इसलिए इसे PHP 5.3+ की आवश्यकता होती है।

टिप्पणियाँ

बेशक, आपको यह सुनिश्चित करना चाहिए कि आपके पास बाहरी लोगों से अपनी साइट में छवियों का उपयोग करने और हॉटलाइन करने के लिए लाइसेंस और प्राधिकरण है।

Comments

जहाँ मुझे यह कोड डालना है

— अंकित अग्रवाल

क्या आप कृपया बता सकते हैं कि कौन सा कोड हमें किस पेज पर लिखना है। मैं PHP / Wordpress में नौसिखिया हूँ इसलिए कृपया चरण दर चरण बताएं। धन्यवाद

— अंकित अग्रवाल

@AnkitAgrawal यहाँ देखो

— gmazzap