मैं अपने प्लगइन में मीडिया लाइब्रेरी से एक छवि कैसे चुनूं?


15

मैंने एक प्लगइन लिखा है जिसमें आपके नीचे दायें कोने में एक छोटा चैट आइकन है, हालांकि मैं चाहता हूं कि उपयोगकर्ता नीचे से आइकन के रूप में एक छवि चुनने में सक्षम हो Media Library। मैं वर्डप्रेस एपीआई के साथ यह कैसे कर सकता हूं? छवि प्लगइन में एक सेटिंग है (केवल व्यवस्थापक द्वारा बदलने योग्य)


2
आपको wp.mediaकस्टम अपलोड की अनुमति देने के लिए शामिल होना चाहिए , इस आवश्यकता के लिए मीडिया फ़ाइल का चयन करें। WPSE के बहुत से उदाहरण हैं, लेकिन हो सकता है कि यह पोस्ट आपको jeroensormani.com/ में मदद करे। इसके अलावा आप गितुब उदाहरणों पर भी, विशेषकर ओशन 90 से - github.com/ocean90/media-modal-demo
buelt

जवाबों:


19

आपको wp.mediaवर्डप्रेस मीडिया मैनेजर डायलॉग का उपयोग करना चाहिए ।

सबसे पहले, आपको स्क्रिट्स को एनक्ल्यूज़ करना होगा:

// As you are dealing with plugin settings,
// I assume you are in admin side
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
function load_wp_media_files( $page ) {
  // change to the $page where you want to enqueue the script
  if( $page == 'options-general.php' ) {
    // Enqueue WordPress media scripts
    wp_enqueue_media();
    // Enqueue custom script that will interact with wp.media
    wp_enqueue_script( 'myprefix_script', plugins_url( '/js/myscript.js' , __FILE__ ), array('jquery'), '0.1' );
  }
}

आपका HTML कुछ इस तरह का हो सकता है (ध्यान दें कि आपने अपने उत्तर में इमेज url के बजाय प्लगइन सेटिंग में मेरे कोड का उपयोग अटैचमेंट आईडी किया है, मुझे लगता है कि यह बहुत बेहतर है। उदाहरण के लिए, आईडी का उपयोग करने से आपको अलग-अलग चित्र आकार प्राप्त करने की अनुमति मिलती है। उनकी जरूरत):

$image_id = get_option( 'myprefix_image_id' );
if( intval( $image_id ) > 0 ) {
    // Change with the image size you want to use
    $image = wp_get_attachment_image( $image_id, 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
} else {
    // Some default image
    $image = '<img id="myprefix-preview-image" src="https://some.default.image.jpg" />';
}

 <?php echo $image; ?>
 <input type="hidden" name="myprefix_image_id" id="myprefix_image_id" value="<?php echo esc_attr( $image_id ); ?>" class="regular-text" />
 <input type='button' class="button-primary" value="<?php esc_attr_e( 'Select a image', 'mytextdomain' ); ?>" id="myprefix_media_manager"/>ç

myscript.js

jQuery(document).ready( function($) {

      jQuery('input#myprefix_media_manager').click(function(e) {

             e.preventDefault();
             var image_frame;
             if(image_frame){
                 image_frame.open();
             }
             // Define image_frame as wp.media object
             image_frame = wp.media({
                           title: 'Select Media',
                           multiple : false,
                           library : {
                                type : 'image',
                            }
                       });

                       image_frame.on('close',function() {
                          // On close, get selections and save to the hidden input
                          // plus other AJAX stuff to refresh the image preview
                          var selection =  image_frame.state().get('selection');
                          var gallery_ids = new Array();
                          var my_index = 0;
                          selection.each(function(attachment) {
                             gallery_ids[my_index] = attachment['id'];
                             my_index++;
                          });
                          var ids = gallery_ids.join(",");
                          jQuery('input#myprefix_image_id').val(ids);
                          Refresh_Image(ids);
                       });

                      image_frame.on('open',function() {
                        // On open, get the id from the hidden input
                        // and select the appropiate images in the media manager
                        var selection =  image_frame.state().get('selection');
                        var ids = jQuery('input#myprefix_image_id').val().split(',');
                        ids.forEach(function(id) {
                          var attachment = wp.media.attachment(id);
                          attachment.fetch();
                          selection.add( attachment ? [ attachment ] : [] );
                        });

                      });

                    image_frame.open();
     });

});

// Ajax request to refresh the image preview
function Refresh_Image(the_id){
        var data = {
            action: 'myprefix_get_image',
            id: the_id
        };

        jQuery.get(ajaxurl, data, function(response) {

            if(response.success === true) {
                jQuery('#myprefix-preview-image').replaceWith( response.data.image );
            }
        });
}

और छवि पूर्वावलोकन को ताज़ा करने के लिए अजाक्स कार्रवाई:

// Ajax action to refresh the user image
add_action( 'wp_ajax_myprefix_get_image', 'myprefix_get_image'   );
function myprefix_get_image() {
    if(isset($_GET['id']) ){
        $image = wp_get_attachment_image( filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT ), 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
        $data = array(
            'image'    => $image,
        );
        wp_send_json_success( $data );
    } else {
        wp_send_json_error();
    }
}

पीडी: यह एक त्वरित नमूना है जो अन्य उत्तर के आधार पर यहां लिखा गया है । परीक्षण नहीं किया गया है क्योंकि आपने सटीक संदर्भ के बारे में पर्याप्त जानकारी नहीं दी है जो कोड का उपयोग किया जाएगा या आपके पास सटीक समस्याएं हैं।


2

wordpress-settings-api-classतारेक हसन द्वारा प्रयोग , यूआरएल: https://github.com/tareq1988/wordpress-settings-__-ass


2
मुझे लगता है कि अतिरिक्त पुस्तकालयों के बिना एक समाधान बेहतर, ठोस है; wp.mediaनियंत्रण की तरह ।
बुलेटी

1

चूंकि आप चाहते हैं कि आइकन हर उपयोगकर्ता के लिए अलग हो, इसलिए आपको उपयोगकर्ता प्रोफ़ाइल में छवि को संग्रहीत करना होगा। इसका मतलब है कि आपको एक अतिरिक्त उपयोगकर्ता फ़ील्ड जोड़ने की आवश्यकता है:

// create the field
add_action( 'show_user_profile', 'wpse_235406_chaticon' );
add_action( 'edit_user_profile', 'wpse_235406_chaticon' );

function wpse_235406_chaticon ($user) { 
    echo '
    <h3>Chat Icon</h3>
    <table class="form-table">
        <tr>
            <th><label for="chaticon">Chat Icon</label></th>
            <td>
                <input type="file" name="chaticon" id="chaticon" value="' . esc_attr (get_the_author_meta ('chaticon', $user->ID)) . '" class="file-upload" /><br />
                <span class="description">Please select your chat icon.</span>
            </td>
        </tr>
    </table>';
}

// save the field
add_action( 'personal_options_update', 'wpse_235406_chaticon_save' );
add_action( 'edit_user_profile_update', 'wpse_235406_chaticon_save' );

function wpse_235406_chaticon_save ($user_id) {
    if (current_user_can ('edit_user', $user_id)) 
        update_usermeta ($user_id, 'chaticon', $_POST['chaticon']);
}

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

अपने टेम्प्लेट में आपको तीन संभावनाओं को अलग करना होगा: उपयोगकर्ता लॉग इन नहीं है, उपयोगकर्ता लॉग इन है लेकिन कोई आइकन नहीं है, उपयोगकर्ता लॉग इन और आइकन है। मोटे तौर पर, इसे शामिल करें:

$current_user = wp_get_current_user();
if ( 0 == $current_user->ID ) {
  ... do what you want to do for not logged in users ...
  }
else {
  $icon = get_user_meta ($current_user->ID, 'chaticon');
  if (empty($icon)) {
    ... default icon with link to upload possibility ...
    }
  else {
     ... display $icon ...
     }

नहीं, मैं चाहूंगा कि यह एक प्लगइन सेटिंग हो
थॉमस

आपका मतलब है कि साइट का केवल व्यवस्थापक ही आइकन को बदलने में सक्षम होना चाहिए और यह प्रत्येक आगंतुक / उपयोगकर्ता के लिए समान होगा?
cjbj

1
यह बहुत तुच्छ होगा। यहाँ उस के लिए एक ट्यूटोरियल है: mikejolley.com/2012/12/21/…
cjbj

हाँ, यह एक बटन के देखो (छवि) को अनुकूलित करता है
थॉमस

मैं ट्यूटोरियल की कोशिश की, लेकिन यह मेरे लिए काम नहीं करता है (अप्रचलित?) क्योंकि फ़्रेम जेएस ऑब्जेक्ट का हिस्सा नहीं है
थॉमस


0

मैंने इस समाधान का उपयोग किया (मीडिया लाइब्रेरी का उपयोग किए बिना):

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

एचटीएमएल

<input id="image" name="image" class="validate" type="image" src="<?php echo esc_attr(get_option('image_url')); ?>" id="image_url" width="48" height="48" />
<br>
<a href="#imageModal" class="waves-effect waves-light btn modal-trigger">
    change
</a>
<input id="image_url" name="image_url" type="text" value="" hidden />

PHP / एचटीएमएल

<div id="imageModal" class="modal">
    <div class="modal-content">
        <select class="image-picker show-html">
            <option data-img-src="<?php echo CM_PATH . "/img/chat_general.png" ?>"  value="0"></option>
            <?php
            $query_images_args = array(
                'post_type'   => 'attachment',
                'post_mime_type' => 'image',
                'post_status' => 'inherit',
                'posts_per_page' => - 1,
            );

            $query_images = new WP_Query( $query_images_args );
            $i = 1;
            foreach ( $query_images->posts as $image ) {
                ?>
                <option data-img-src="<?php echo wp_get_attachment_url($image->ID); ?>"  value="<?php echo $i; ?>"></option>
                <?php
                $i  ;
            }
            ?>
        </select>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-light btn change">Choose</a>
    </div>
</div>
</div>
</div>

जे एस

 $(".change").on("click", function() {
 +            var url = $(".image-picker > option:selected").attr("data-img-src");
 +            $("#image").attr("src", url);
 +            $("#image_url").attr("value", url);
 +            $("#imageModal").closeModal();
 +        });

मुझे लगता है कि अतिरिक्त पुस्तकालयों के बिना एक समाधान बेहतर, ठोस है; wp.mediaनियंत्रण की तरह ।
bueltge

@ द्वंद्वयुद्ध मैं सहमत हूं, लेकिन किसी ने भी सीधा जवाब नहीं दिया और मुझे समय की जरूरत थी। इसलिए अगर कोई बहुत बढ़िया जवाब देता है, तो उन्हें इनाम मिलता है!
थॉमस

मैं आपके उत्तर को भी समाधान के रूप में देखता हूं, लेकिन सबसे अच्छा तरीका नहीं। अब यह निर्णय लेने के लिए प्रश्न लेखक, आप;) का एक हिस्सा है।
१ge'१६

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

@cybmeta मैंने कोशिश की और यह मेरा सबसे अच्छा अडैप्ट है, इसलिए इसके बारे में एक गधा मत बनो। यदि आपको यह पसंद नहीं है, तो बेहतर समाधान का प्रस्ताव करें।
थॉमस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.