मैं कस्टम 3.5 मीडिया अपलोडर में "URL से डालें" टैब कैसे जोड़ सकता हूं?


17

जब एक बटन पर क्लिक किया जाता है, तो मैंने इस जावास्क्रिप्ट को चलाकर एक विजेट में WP 3.5 मीडिया अपलोडर डाला है:

var frame = wp.media( {
    title       : 'Widget Uploader',
    multiple    : false,
    library     : { type : 'image' },
    button      : { text : 'Select Image' }
} );

frame.on( 'close', function() {
    var attachments = frame.state().get( 'selection' ).toJSON();
    imageWidget.render( widget_id, widget_id_string, attachments[0] );
} );

frame.open();
return false;

इससे मुझे एक मॉडल मिलता है जिसमें "अपलोड फाइलें" और "मीडिया लाइब्रेरी" टैब हैं, लेकिन मैं यह भी चाहता हूं कि "URL से डालें" टैब आपके पास एक पोस्ट संपादित करते समय "मीडिया जोड़ें" बटन पर क्लिक करें। /पृष्ठ।

यहाँ छवि विवरण दर्ज करें

मैंने वेब के चारों ओर खुदाई करने, स्रोत कोड के माध्यम से पढ़ने और अपलोडर के बैकएंड पर डेरिल कोपरस्मिथ की प्रस्तुति को देखने के लिए कुछ घंटे बिताए हैं , लेकिन यह पता लगाने में सक्षम नहीं है।

क्या कोई मुझे सही दिशा दिखा सकता है? क्या कोई ऐसा पैरामीटर है जिसे मैं इसे शामिल करने के लिए wp.media () में पास कर सकता हूं, या क्या मुझे इसमें शामिल एक निर्मित दृश्य / मॉडल का उपयोग करना चाहिए?


हो सकता है कि हैक किए गए समाधान में कोई सुराग हो, लेकिन जब आप "चुनिंदा फाइलों" पर क्लिक करते हैं, तो आप एक फ़ाइल स्थान के बजाय खुलने वाले फ़ाइल एक्सप्लोरर में एक url पिछले कर सकते हैं।
व्यैक

क्या आप ऑपरेटिंग सिस्टम के ओपन फाइल मोडल के बारे में बात कर रहे हैं? फेडोरा में मेरे लिए यह काम नहीं करता है, इसलिए यह ओएस पर निर्भर हो सकता है। यह एक वितरित प्लगइन के लिए भी है, इसलिए UI को सहज होना चाहिए।
इयान डन

हाँ सही है, यह कुछ OS पर काम करता है।
व्यैक

जवाबों:


10

मैं एक समान कारण के लिए स्रोत कोड के माध्यम से खुदाई कर रहा हूं; मैं "अटैचमेंट डिस्प्ले सेटिंग्स" को डिफॉल्ट "सिलेक्ट" फ्रेम में जोड़ना चाहूंगा। जहाँ तक मैं बता सकता हूँ, यह wp.media () के मापदंडों को पार करके नहीं किया जा सकता है, जैसा कि हम सभी चाहेंगे। wp.media में वर्तमान में दो फ़्रेम हैं ("पोस्ट" और "सिलेक्ट"), और उनके साथ आने वाले दृश्य पूर्व निर्धारित हैं।

अब मैं जिस दृष्टिकोण को देख रहा हूं, वह एक नया फ्रेम बनाने के लिए media.view.mediaFrame का विस्तार करना है ("चुनिंदा" फ्रेम के आधार पर) जिसमें मुझे उस दृश्य के हिस्से शामिल हैं जिनकी मुझे आवश्यकता है। अगर मुझे यह काम मिलता है तो मैं कोड पोस्ट करूँगा।

संपादित करें:

इयान, मुझे वह सुविधा मिली जो मुझे काम करने के लिए मिली थी और आपको पता लगाने में कुछ समय लगा। wp.media () काफी मॉड्यूलर नहीं है क्योंकि यह हो सकता है। यह केवल फ्रेम के लिए 'सेलेक्ट' और 'पोस्ट' के मान को स्वीकार करता है, जिसमें 'सिलेक्ट' डिफॉल्ट होता है, इसलिए आप एक नया फ्रेम ऑब्जेक्ट नहीं बना सकते। इसके बजाय, आपको दो फ़्रेम ऑब्जेक्ट्स में से एक का विस्तार करने की आवश्यकता है (यह सब /wp-includes/js/media-views.js में है), जो क्लूनी की तरह भी है। UI का हिस्सा जोड़ना कई चरणों वाली प्रक्रिया है। आप सिलेक्ट के साथ शुरू कर सकते हैं और जोड़ सकते हैं, लेकिन आपके लिए मैंने पोस्ट फ्रेम में कोड के साथ शुरू करने और गैलरी के सामान को हटाने का विकल्प चुना। यहाँ मेरा कोड है, काम कर रहा है लेकिन भारी परीक्षण नहीं किया गया है। शायद कुछ कमरे सुव्यवस्थित करने के लिए भी।

wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({

            initialize: function() {
                wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );

                _.defaults( this.options, {
                    multiple:  true,
                    editing:   false,
                    state:    'insert'
                });

                this.createSelection();
                this.createStates();
                this.bindHandlers();
                this.createIframeStates();
            },

            createStates: function() {
                var options = this.options;

                // Add the default states.
                this.states.add([
                    // Main states.
                    new wp.media.controller.Library({
                        id:         'insert',
                        title:      'Insert Media',
                        priority:   20,
                        toolbar:    'main-insert',
                        filterable: 'image',
                        library:    wp.media.query( options.library ),
                        multiple:   options.multiple ? 'reset' : false,
                        editable:   true,

                        // If the user isn't allowed to edit fields,
                        // can they still edit it locally?
                        allowLocalEdits: true,

                        // Show the attachment display settings.
                        displaySettings: true,
                        // Update user settings when users adjust the
                        // attachment display settings.
                        displayUserSettings: true
                    }),

                    // Embed states.
                    new wp.media.controller.Embed(),
                ]);


                if ( wp.media.view.settings.post.featuredImageId ) {
                    this.states.add( new wp.media.controller.FeaturedImage() );
                }
            },

            bindHandlers: function() {
                // from Select
                this.on( 'router:create:browse', this.createRouter, this );
                this.on( 'router:render:browse', this.browseRouter, this );
                this.on( 'content:create:browse', this.browseContent, this );
                this.on( 'content:render:upload', this.uploadContent, this );
                this.on( 'toolbar:create:select', this.createSelectToolbar, this );
                //

                this.on( 'menu:create:gallery', this.createMenu, this );
                this.on( 'toolbar:create:main-insert', this.createToolbar, this );
                this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
                this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
                this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );

                var handlers = {
                        menu: {
                            'default': 'mainMenu'
                        },

                        content: {
                            'embed':          'embedContent',
                            'edit-selection': 'editSelectionContent'
                        },

                        toolbar: {
                            'main-insert':      'mainInsertToolbar'
                        }
                    };

                _.each( handlers, function( regionHandlers, region ) {
                    _.each( regionHandlers, function( callback, handler ) {
                        this.on( region + ':render:' + handler, this[ callback ], this );
                    }, this );
                }, this );
            },

            // Menus
            mainMenu: function( view ) {
                view.set({
                    'library-separator': new wp.media.View({
                        className: 'separator',
                        priority: 100
                    })
                });
            },

            // Content
            embedContent: function() {
                var view = new wp.media.view.Embed({
                    controller: this,
                    model:      this.state()
                }).render();

                this.content.set( view );
                view.url.focus();
            },

            editSelectionContent: function() {
                var state = this.state(),
                    selection = state.get('selection'),
                    view;

                view = new wp.media.view.AttachmentsBrowser({
                    controller: this,
                    collection: selection,
                    selection:  selection,
                    model:      state,
                    sortable:   true,
                    search:     false,
                    dragInfo:   true,

                    AttachmentView: wp.media.view.Attachment.EditSelection
                }).render();

                view.toolbar.set( 'backToLibrary', {
                    text:     'Return to Library',
                    priority: -100,

                    click: function() {
                        this.controller.content.mode('browse');
                    }
                });

                // Browse our library of attachments.
                this.content.set( view );
            },

            // Toolbars
            selectionStatusToolbar: function( view ) {
                var editable = this.state().get('editable');

                view.set( 'selection', new wp.media.view.Selection({
                    controller: this,
                    collection: this.state().get('selection'),
                    priority:   -40,

                    // If the selection is editable, pass the callback to
                    // switch the content mode.
                    editable: editable && function() {
                        this.controller.content.mode('edit-selection');
                    }
                }).render() );
            },

            mainInsertToolbar: function( view ) {
                var controller = this;

                this.selectionStatusToolbar( view );

                view.set( 'insert', {
                    style:    'primary',
                    priority: 80,
                    text:     'Select Image',
                    requires: { selection: true },

                    click: function() {
                        var state = controller.state(),
                            selection = state.get('selection');

                        controller.close();
                        state.trigger( 'insert', selection ).reset();
                    }
                });
            },

            featuredImageToolbar: function( toolbar ) {
                this.createSelectToolbar( toolbar, {
                    text:  'Set Featured Image',
                    state: this.options.state || 'upload'
                });
            },

            mainEmbedToolbar: function( toolbar ) {
                toolbar.view = new wp.media.view.Toolbar.Embed({
                    controller: this,
                    text: 'Insert Image'
                });
            }

    });

यह wp.media.view.edia.MediaFrame.Post से कोड को जोड़ती है। इसके अलावा मीडिया से। mediaFrame.Select, इस तथ्य के लिए समायोजित किया जाता है कि इसे मूल दायरे से बाहर निष्पादित किया गया है। पाठ के लिए मान विभिन्न बटन हैं, और यदि आप चाहें तो आप अपनी स्थानीयकरण ऑब्जेक्ट को संदर्भित कर सकते हैं। लाइब्रेरी कंस्ट्रक्टर (createStates ()) में 'फ़िल्टर करने योग्य' मान यह निर्धारित करता है कि किस मीडिया प्रकार का समर्थन किया जाएगा।

एक बार जब आप इस दृष्टिकोण के साथ सेलेक्ट ऑब्जेक्ट को बढ़ा देते हैं, तो बस इसे उसी तरह से त्वरित करें जैसे आप वर्तमान में हैं और जब कोई छवि चुनी जाती है तो अपने कस्टम हैंडलर को जोड़ें। अपलोड मीडिया से उठाते समय Url से इन्सर्ट एक अलग घटना को आग लगा सकता है। संभवतः आपके फ्रेम को पहले, वास्तव में, और फिर इसे विस्तारित करना बेहतर होगा, ताकि पृष्ठ पर कोई अन्य मीडिया फ़्रेम अप्रभावित हो, लेकिन मैंने यह कोशिश नहीं की है।

उम्मीद है की वो मदद करदे-


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

@IanDunn यह प्रश्न कई साल पुराना है, लेकिन मुझे पता चल रहा है कि मुझे उसी समाधान की आवश्यकता है। क्या आपने परीक्षण और परिपक्व होने वाले वर्षों में एक समाधान बनाए रखा? या प्लगइन या अन्य समाधान खोजें जो आपकी आवश्यकताओं को पूरा करता है? यदि आपके पास वर्तमान कोड या कोई समाधान है, तो क्या आप इसे अद्यतन उत्तर के रूप में पोस्ट कर सकते हैं? धन्यवाद!
user658182

1

स्रोत कोड से यह लगता है कि सामान्य मीडिया मॉडल "URL से सम्मिलित करें" का समर्थन नहीं करता है। जिस तरह से मैं उस टैब को प्राप्त करने में सक्षम था वह "पोस्ट" फ्रेम प्रकार को निर्दिष्ट करने के लिए था:

var frame = wp.media( {
                            title       : 'Widget Uploader',
                            multiple    : false,
                            library     : { type : 'image' },
                            button      : { text : 'Select Image' },
                            frame      : 'post'
                        } );

नकारात्मक पक्ष यह है कि निर्दिष्ट मोडल के शीर्षक को अनदेखा किया गया है।


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

0

मुद्दा यह है कि टैब सीधे पोस्ट में डाले जाने के लिए एक बाहरी URL लौटाता है, जबकि विजेट को मीडिया आईडी लौटना चाहिए। मूल रूप से बाहरी छवि को सर्वर पर लोड करने की आवश्यकता होती है।

देखें कैसे / क्या प्लगइन पकड़ो और बचाओ क्या आप चाहते हैं। (के माध्यम से )


प्लग इन करें या नहीं, मुझे यह देखने में दिलचस्पी होगी कि यह कैसे होता है, क्या आप इसे विस्तृत कर सकते हैं?
टॉम जम्मू नॉवेल

क्या मीडिया लाइब्रेरी आपके लिए बाहरी छवि को स्थानीय सर्वर पर डाउनलोड करने का काम नहीं करता है? यहां तक ​​कि अगर यह नहीं है, मुख्य सवाल यह है: आप पहली जगह में भी दिखाने के लिए टैब कैसे प्राप्त करते हैं?
इयान डन

मैंने जाँच की, और मीडिया लाइब्रेरी URL से डाली गई छवियों को डाउनलोड / संलग्न नहीं करती है; यह सिर्फ उनसे सीधे जुड़ता है। यह वास्तव में सवाल के लिए प्रासंगिक नहीं है, हालांकि, मैं सिर्फ URL टैब से मोडल में सम्मिलित करने के तरीके से संबंधित हूं।
इयान डन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.